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="https://freestyleacademy.rocks/jquery/modernizr.js"></script><!--See https://modernizr.com/-->
<script src="https://freestyleacademy.rocks/jquery/minified.js"></script><!--Main jQuery library-->
<script src="https://freestyleacademy.rocks/jquery/easing.js"></script><!--Easing libraries-->
<script src="https://freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script src="https://freestyleacademy.rocks/jquery/transit.js"></script>
<script src="https://freestyleacademy.rocks/jquery/photogallery12.js"></script>
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 -->
</div>
<!--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>
<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
for(i=0;i<totalPics;i++){
$(".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
opacity:0
});
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
opacity:1
},btnFadeTime,"linear");
p++; // increment the counter
if (p <= totalPics) { //check to see if another button is available
showBtns(); //trigger another button to fade in
}
},btnFadeTime/2)
}
showBtns();
</script>
</div>
#galleryBox{
width:1000px;
height:auto;
position: relative;
margin:0 auto;
z-index: 100;
}
#allSlices {
width:100%;
height:750px;
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 {
width:100%;
height:100%;
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 {
position:relative;
width:100%;
text-align:center;
font-size:1em;
line-height:2em;
}
#photoBtns {
position:relative;
clear:both;
width:832px;
height:52px;
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;
-moz-opacity:1;
-ms-opacity:1;
-o-opacity:1;
opacity:1;
}
.photoBtn:last-child {margin-right:0;}