Back to list of all resources

Gallery similar to http://stroemme.net/#arbeid

All photos from http://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

Alcatraz
The Rock never looked so mysterious and beautiful
Baboons
A perfect way to spend the day with family in the park
Bike on Water
Lone bike after a flood. Where's the rider?
Bike in Snow
Cold ride home in the snow.
Help Me
What would you do for him?
Looking Up
Architectural symmetry at its finest
Crowded
I just want to go home
Dancer
Suspended beauty like no other
Her face
Wonder what she's thinking about?
Wishing
What could she be wishing for?
Practicing
Gotta get that riff just right
Natural Flash
Result of dust in the air rubbing against each other
Strings of lights
New Jersey Louvre
Louvre
French museum
Anxious
What am I going to do now?
New York
What kind of characters live here?
Piano
Wishing I could play better
Road
Sometimes you just get tired and want to go home
Just do it
Would you challenged yourself with this?
Meditator
Only in my dreams

Preparing your photos to match what the script 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 a maximum width of 1500px
  3. Rename your photos in a sequence 1.jpg, 2.jpg, 3.jpg, 4.jpg, ...
  4. Move your photos in a folder labeled "images" (required by script)
  5. Duplicate your images folder and rename the duplicated folder "thumbnails" (required by script)
  6. Crop and/or resize your thumbnail photos to have the SAME dimensions with a maximum dimensions of width=200px and height=200px - the example above uses square images
  7. Move both folders image and thumbnails into a projectX/images/gallery folder
  8. Create a background image like the YELLOW one in the example above that has the SAME DIMENSIONS as all your thumbnails and save it as btnBoxBackground in your projectX/images folder (required by CSS)
  9. 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="http://www.freestyleacademy.rocks/jquery/modernizr.js"></script><!--See http://modernizr.com/-->

<script src="http://www.freestyleacademy.rocks/jquery/minified.js"></script><!--Main jQuery library-->
<script src="http://www.freestyleacademy.rocks/jquery/easing.js"></script><!--Easing libraries-->
<script src="http://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>

<script src="http://www.freestyleacademy.rocks/jquery/css-transform.js"></script>
<script src="http://www.freestyleacademy.rocks/jquery/transit.js"></script><!--See http://ricostacruz.com/jquery.transit/-->
<!-- Add fancyBox -->
<link rel="stylesheet" href="http://www.freestyleacademy.rocks/fancybox/fancybox.css" media="screen" />
<link rel="stylesheet" href="http://www.freestyleacademy.rocks/fancybox/fancybox-buttons.css" media="screen" />
<link rel="stylesheet" href="http://www.freestyleacademy.rocks/fancybox/fancybox-thumbs.css" media="screen" />
<script src="http://www.freestyleacademy.rocks/fancybox/mousewheel.js"></script>
<script src="http://www.freestyleacademy.rocks/fancybox/fancybox.pack.js"></script>
<script src="http://www.freestyleacademy.rocks/fancybox/fancybox-buttons.js"></script>
<script src="http://www.freestyleacademy.rocks/fancybox/fancybox-media.js"></script>
<script src="http://www.freestyleacademy.rocks/fancybox/fancybox-thumbs.js"></script>
<script src="http://www.freestyleacademy.rocks/fancybox/fancyboxCustom.js"></script>

<script src="projectX/scripts/p#-scripts.js"></script><!--adjust this as needed-->

Here's the HTML code

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>

 

Here's the CSS - obviously modify as needed


#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;
}

Here's the javascript code - paste INSIDE the $(document).ready block


//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);
}
});