Back to list of all resources

Sliding Panels Photogallery

Photo 1 caption Photo 2 caption Photo 3 caption Photo 4 caption Photo 5 caption Photo 6 caption Photo 7 caption Photo 8 caption Photo 9 caption Photo 10 caption Photo 11 caption Photo 12 caption Photo 13 caption Photo 14 caption Photo 15 caption Photo 16 caption

Preparing your photos to match what the CSS is expecting to find

  1. Duplicate your photos so that you'll always have copies of your original photos!!!!!!!
  2. Crop and/or resize your duplicated photos with dimensions of 1000x750 pixels
  3. Rename your photos in a sequence 1.jpg, 2.jpg, 3.jpg, 4.jpg, ...
  4. Move your photos to your Websites/project#/images folder
  5. Copy and paste the codes below

Scripts needed (copy and paste inside <head>)

Check that you only have ONE of each line in your <head> - in other words, don't duplicate any of the lines of code below

<script src=""></script><!--See>
<script src=""></script><!--Main jQuery library-->
<script src=""></script><!--Easing libraries-->
<script src=""></script>
<script src=""></script>
<script src=""></script>

Here's the HTML code

Inside your article or section, copy and paste the code below - change the captions for each photo

<div id="galleryBox">
<div id="allSlices">
<div class="slice" id="slice1">
<span>Photo 1 caption</span><!-- Each photo has a unique caption -->
<span>Photo 2 caption</span>
<span>Photo 3 caption</span>
<span>Photo 4 caption</span>
<span>Photo 5 caption</span>
<span>Photo 6 caption</span>
<span>Photo 7 caption</span>
<span>Photo 8 caption</span>
<span>Photo 9 caption</span>
<span>Photo 10 caption</span>
<span>Photo 11 caption</span>
<span>Photo 12 caption</span>
<span>Photo 13 caption</span>
<span>Photo 14 caption</span>
<span>Photo 15 caption</span>
<span>Photo 16 caption</span><!--Add or delete spans for more or less photos -->
<!--The following block of code gets appended with javascript -->
<div class="slice nospans" id="slice2"></div>
<div class="slice nospans" id="slice3"></div>
<div class="slice nospans" id="slice4"></div>
<div class="slice nospans" id="slice5"></div>
<div id="caption"></div><!--Captions get displayed through javascript -->
<div id="photoBtns"></div><!--Buttons get created dynamically with javascript below -->
<script>//This block of code happens immediately BEFORE the document is completely ready
var direction="right" //Change to either "right" or "left"
var btnFadeTime = 600;//time in milliseconds to fade in buttons, you can CHANGE this if you want
var i, n, b, p=1, newDiv;//utility variables - DON'T CHANGE THESE
var spanWidth = $("#slice1 span:nth-child(1)").width();//stores the width of one image slice
var totalPics = $("#slice1 span").length;//stores how many total photos by counting the spans in #slice1
$(".nospans").append("<span></span>");//this creates spans for the css slices to populate images
newDiv = "<div class=\"photoBtn\" id=\"photoBtn"+(i+1)+"\"></div>";
$("#photoBtns").append(newDiv);//this creates divs for small thumbnail buttons to be populated with images
$(".photoBtn, #caption").css({//initially makes btns and caption transparent
function showBtns() { //create a loop function
setTimeout(function () { //call a short setTimeout when the loop is called
b = "#photoBtn" + p; //create selector
$(b).transition({ //fadeIn currentBtn
p++; // increment the counter
if (p <= totalPics) { //check to see if another button is available
showBtns(); //trigger another button to fade in

Here's the CSS - obviously modify as needed

position: relative;
margin:0 auto;
z-index: 100;
#allSlices {
position: relative;
margin:0 auto;
z-index: 200;
background-repeat: no-repeat;
background-position: 0 0;
.slice {
width: 20%;
height: 100%;
position: relative;
float: left;
overflow: hidden;
background-repeat: no-repeat;
z-index: 300;
.slice span {
position: absolute;
top: 0px;
left: -100%;
z-index: 400;
background-repeat: no-repeat;
text-indent: -9000px;
#allSlices .slice span:nth-child(1), #photoBtn1{background-image: url(../images/1.jpg);}
#allSlices .slice span:nth-child(2), #photoBtn2{background-image: url(../images/2.jpg);}
#allSlices .slice span:nth-child(3), #photoBtn3{background-image: url(../images/3.jpg);}
#allSlices .slice span:nth-child(4), #photoBtn4{background-image: url(../images/4.jpg);}
#allSlices .slice span:nth-child(5), #photoBtn5{background-image: url(../images/5.jpg);}
#allSlices .slice span:nth-child(6), #photoBtn6{background-image: url(../images/6.jpg);}
#allSlices .slice span:nth-child(7), #photoBtn7{background-image: url(../images/7.jpg);}
#allSlices .slice span:nth-child(8), #photoBtn8{background-image: url(../images/8.jpg);}
#allSlices .slice span:nth-child(9), #photoBtn9{background-image: url(../images/9.jpg);}
#allSlices .slice span:nth-child(10), #photoBtn10{background-image: url(../images/10.jpg);}
#allSlices .slice span:nth-child(11), #photoBtn11{background-image: url(../images/11.jpg);}
#allSlices .slice span:nth-child(12), #photoBtn12{background-image: url(../images/12.jpg);}
#allSlices .slice span:nth-child(13), #photoBtn13{background-image: url(../images/13.jpg);}
#allSlices .slice span:nth-child(14), #photoBtn14{background-image: url(../images/14.jpg);}
#allSlices .slice span:nth-child(15), #photoBtn15{background-image: url(../images/15.jpg);}
#allSlices .slice span:nth-child(16), #photoBtn16{background-image: url(../images/16.jpg);}
/*If you change the width of #galleryBox above, you also need to change background-position values below*/
/*The new values need to be 20% of the width of #galleryBox you have set above*/
#allSlices div:nth-child(1) span{
background-position: 0px 0px;
#allSlices div:nth-child(2) span{
background-position: -200px 0px;
/*If you change the width of #galleryBox above, you MUST change -200px to -20% of width of #galleryBox above*/}
#allSlices div:nth-child(3) span{
background-position: -400px 0px;
/*If you change the width of #galleryBox above, you MUST change -400px to -40% of width of #galleryBox above*/}
#allSlices div:nth-child(4) span{
background-position: -600px 0px;
/*If you change the width of #galleryBox above, you MUST change -600px to -60% of width of #galleryBox above*/}
#allSlices div:nth-child(5) span{
background-position: -800px 0px;
/*If you change the width of #galleryBox above, you MUST change -800px to -80% of width of #galleryBox above*/}
#caption {
#photoBtns {
margin:0 auto;
.photoBtn {
width: 45px;
height: 45px;
border-radius: 25px;
float: left;
margin-right: 5px;
cursor: pointer;
background-size: cover;
border: 1px solid #000;
opacity: 0.6;
-webkit-transition: all 500ms linear 0s;
-moz-transition: all 500ms linear 0s;
-ms-transition: all 500ms linear 0s;
-o-transition: all 500ms linear 0s;
transition: all 500ms linear 0s;
.photoBtn:hover {
-webkit-opacity: 1;
.photoBtn:last-child {margin-right:0;}