All photos from https://stroemme.net
Variations: Choose a variation and then hover over a thumbnail
Zooming | Shrinking | Slide left/right | Slide right/left | Slide up/down | Slide down/up
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://www.freestyleacademy.rocks/jquery/modernizr.js"></script><!--See https://modernizr.com/-->
<script src="https://www.freestyleacademy.rocks/jquery/minified.js"></script><!--Main jQuery library-->
<script src="https://www.freestyleacademy.rocks/jquery/easing.js"></script><!--Easing libraries-->
<script src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/css-transform.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/transit.js"></script><!--See https://ricostacruz.com/jquery.transit/-->
<!-- Add fancyBox -->
<link rel="stylesheet" href="https://www.freestyleacademy.rocks/fancybox/fancybox.css" media="screen" />
<link rel="stylesheet" href="https://www.freestyleacademy.rocks/fancybox/fancybox-buttons.css" media="screen" />
<link rel="stylesheet" href="https://www.freestyleacademy.rocks/fancybox/fancybox-thumbs.css" media="screen" />
<script src="https://www.freestyleacademy.rocks/fancybox/mousewheel.js"></script>
<script src="https://www.freestyleacademy.rocks/fancybox/fancybox.pack.js"></script>
<script src="https://www.freestyleacademy.rocks/fancybox/fancybox-buttons.js"></script>
<script src="https://www.freestyleacademy.rocks/fancybox/fancybox-media.js"></script>
<script src="https://www.freestyleacademy.rocks/fancybox/fancybox-thumbs.js"></script>
<script src="https://www.freestyleacademy.rocks/fancybox/fancyboxCustom.js"></script>
<script src="projectX/scripts/p#-scripts.js"></script><!--adjust this as needed-->
Inside your article or section, create a SINGLE div that will hold all the thumbnails with id of thumbnails - or copy and paste the code below
<div id="thumbnails">
</div>
You will need the following code FOR EACH OF YOUR THUMBNAILS which should all be the same size for best results - just copy, paste INSIDE the <div id="thumbnails> element and modify the ## for the correct number of your thumbnails. The example above uses thumbnails that have width:200px and height:200px;
<div class="btnBox">
<figure><img src="projectX/images/gallery/thumbnails/##.jpg"/></figure>
<div class="btnHolder">
<div class="boxHeader">Header Text</div>
<div class="boxText">Photo caption</div>
<div class="btnView"><a rel="imageGroup" href="projectX/images/gallery/images/##.jpg">View</a></div>
<!-- rel="imageGroup" activates fancybox-->
</div>
</div>
#thumbnails {
width:800px;
height:800px;
position:relative;
top:0;
margin:20px auto;
}
.btnBox {/*container for each thumbanil*/
float: left;/*allows for reshuffling depending upon window size*/
position: relative;
overflow: hidden;
background-image: url(../images/btnBoxBackground.png);
background-repeat: no-repeat;
background-size: cover;
}
.btnBox, .btnBox figure img {
width:200px;
height:200px;
}
.btnBox figure img{
position: absolute;
left: 0px;
top: 0px;
z-index: 40;
cursor: pointer;
}
.btnHolder {
width: 100%;
height: auto;
position: absolute;
top: 0px;
left: 0px;
z-index: 50;
}
.boxHeader {
text-align: center;
font-weight: bold;
font-size: 1.5em;
margin-top: 15px;
margin-bottom: 10px;
}
.boxText {
width: 80%;
height: 50%;
margin:0 auto;
font-size: 0.9em;
}
.btnView {
width: 50%;
margin: 10px auto;
text-align: center;
font-size: 1.1em;
font-weight: bold;
background-color: #000000;
padding: 5px;
color: #FFFF00;
}
.btnView a:link, .btnView a:visited {
color: #FFFF00;/*text link color and when visited*/
text-decoration: none;
}
.btnView a:hover, .btnView a:active {
color: #FF6666;/*text hover color and when active or as mouse is pressed down*/
text-decoration: none;
}
//add the following code in YOUR javascript file
var thumbnailAnimateTime, easingForThumbnails,thumbnailDelayTime,
thumbnailWindowWidth, thumbnailRowWidth, thumbnailWidth;
var animationEffect = "zoom"; //other options are "shrink", "slideLeft", "slideRight", "slideUp", "slideDown"
thumbnailAnimateTime = 500;//How much time do you want the thumbnail animation to occur?
easingForThumbnails = "easeOutCubic";
thumbnailDelayTime = thumbnailAnimateTime/2;
//This block creates the caption for the fancy box image by
//getting and combining the boxHeader and boxText content
function setCaptions(){
var totalPics = $(".btnBox").length, selector1, selector2, finalCaption, imageLink;
for (var i=0;i<totalPics;i++) {
selector1 = ".boxHeader:eq(" + i + ")";
selector2 = ".boxText:eq(" + i + ")";
finalCaption = $(selector1).html() + ": " + $(selector2).html()
imageLink = ".btnView a:eq(" + i + ")";
$(imageLink).attr("title",finalCaption);
}
};
setCaptions();//This line executes the above defined function
//This block will center the thumbnails within the parent div by
//calculating how many thumbnail boxes can fit within the space and then
//setting the css to auto center the rows of thumbnails
thumbnailWidth = $(".btnBox figure img").width();
//VERY IMPORTANT to make containing div vertically elastic to fit the floating thumbnails
$("#thumbnails").parent().css({
"overflow":"auto"
});
function centerThumbnails(){
//use this if not using a centeringDiv
//thumbnailWindowWidth=$(window).innerWidth();
//use this if using a centeringDiv or article div to hold the thumbnails
thumbnailWindowWidth = $("#thumbnails").parent().innerWidth();
thumbnailRowWidth = parseInt((1.0*thumbnailWindowWidth)/thumbnailWidth);
//1.0 is 100% of #thumbnails parent div width,
//if #thumbnails is 100% width of the browser window,
//change 1.0 to 0.8 to provide some margin away from browser edges
$("#thumbnails").css({
"width":thumbnailRowWidth*thumbnailWidth,
"margin":"0 auto"
});
};
centerThumbnails();
//This block is executed every millisecond that the browser window is resized
$(window).resize(function(){
centerThumbnails();
});
//We need to basically hide everything in each btnBox with the line below
$(".boxHeader, .boxText, .btnView").css({scale:0});
//This block executes when user hovers over each btnBox
$(".btnBox").hover(function(){
if (animationEffect === "slideLeft") {
$(this).find("figure").stop().transition({
x:"-="+thumbnailWidth
},thumbnailAnimateTime,easingForThumbnails);//Shift left
}
if (animationEffect === "slideRight") {
$(this).find("figure").stop().transition({
x:"+="+thumbnailWidth
},thumbnailAnimateTime,easingForThumbnails);//Shift ight
}
if (animationEffect === "slideUp") {
$(this).find("figure").stop().transition({
y:"-="+thumbnailWidth
},thumbnailAnimateTime,easingForThumbnails);//Shift up
}
if (animationEffect === "slideDown") {
$(this).find("figure").stop().transition({
y:"+="+thumbnailWidth
},thumbnailAnimateTime,easingForThumbnails);//Shift down
}
if (animationEffect === "zoom") {
//Zoom in and fade the btnBox image
$(this).find("figure").find("img").stop().transition({
scale:4, opacity:0
},thumbnailAnimateTime,easingForThumbnails);
}
if (animationEffect === "shrink") {
//Shrink and fade the btnBox image
$(this).find("figure").find("img").stop().transition({scale:0.8, opacity:0.5},thumbnailScaleTime,easingForThumbnails);
}
//scale up btnHeader, btnText, and btnView
$(this).find(".boxHeader, .boxText, .btnView")
.stop().delay(thumbnailDelayTime).transition({
scale:1
},thumbnailAnimateTime,easingForThumbnails);
},function(){
$(this).find(".boxHeader, .boxText, .btnView").stop().transition({
scale:0
},thumbnailAnimateTime,easingForThumbnails);//scale down btnHeader, btnText, and btnView
if (animationEffect === "slideLeft") {
$(this).find("figure").stop().delay(thumbnailDelayTime).transition({
x:"+="+thumbnailWidth
},thumbnailAnimateTime,easingForThumbnails);//Shift right
}
if (animationEffect === "slideRight") {
$(this).find("figure").stop().delay(thumbnailDelayTime).transition({
x:"-="+thumbnailWidth
},thumbnailAnimateTime,easingForThumbnails);//Shift left
}
if (animationEffect === "slideUp") {
$(this).find("figure").stop().delay(thumbnailDelayTime).transition({
y:"+="+thumbnailWidth
},thumbnailAnimateTime,easingForThumbnails);//Shift down
}
if (animationEffect === "slideDown") {
$(this).find("figure").stop().delay(thumbnailDelayTime).transition({
y:"-="+thumbnailWidth
},thumbnailAnimateTime,easingForThumbnails);//Shift up
}
if (animationEffect === "zoom") {
//Zoom out and fade the btnBox image
$(this).find("figure").find("img").stop().delay(thumbnailDelayTime).transition({
scale:1, opacity:1
},thumbnailAnimateTime,easingForThumbnails);
}
if (animationEffect === "shrink") {
//Expand and fade the btnBox image
$(this).find("figure").find("img").stop().delay(thumbnailDelayTime).transition({
scale:1, opacity:1
},thumbnailScaleTime,easingForThumbnails);
}
});