JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4650 x0090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

Back to list of all resources

 

Cool Gallery #1

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 folder labeled g2 (assuming you don't already have a g2 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 bg.png in your g2/thumbnails folder (required by CSS)
  9. Copy and paste the codes below

Here's the HTML code

  1. On your WordPress webpage, insert a Custom HTML block.
  2. Copy and paste the code in yellow below into the Custom HTML Block
  3. VERY IMPORTANT - Be sure to change the pasted HTML code below with the following:
    • Each small block is needed for each photo. Add/delete as necessary.
    • If you want more than 8 photos, copy lines 66-73 below and paste it above the <div class="clearFloats"></div> line for as many new photos you need and make sure to change the newly pasted code src="../g2/#.jpg" matches name of the photos such as 9.jpg, 10.jpg, etc.
    • If your photos are in a folder named g3 (instead of g2, for example), then for each small block change the src="../g2/#.jpg" to src="../g3/#.jpg".
    • For each small block, change "Header Text" and "Photo caption"
    • For each small block, if you don't want "Header Text", delete the  <div class="boxHeader">Header Text</div> line
    • For each small block, if you don't want "Photo caption", delete the  <div class="boxText">Photo caption</div> line

<div id="thumbnails">

<div class="btnBox">
<figure><img src="../g2/thumbnails/1.jpg"/></figure>
<div class="btnHolder">
<div class="boxHeader">Header Text</div>
<div class="boxText">Photo caption</div>
<div class="btnView"><a rel="imageGroup" href="../g2/images/1.jpg">View</a></div>
</div>
</div>

<div class="btnBox">
<figure><img src="../g2/thumbnails/2.jpg"/></figure>
<div class="btnHolder">
<div class="boxHeader">Header Text</div>
<div class="boxText">Photo caption</div>
<div class="btnView"><a rel="imageGroup" href="../g2/images/2.jpg">View</a></div>
</div>
</div>

<div class="btnBox">
<figure><img src="../g2/thumbnails/3.jpg"/></figure>
<div class="btnHolder">
<div class="boxHeader">Header Text</div>
<div class="boxText">Photo caption</div>
<div class="btnView"><a rel="imageGroup" href="../g2/images/3.jpg">View</a></div>
</div>
</div>

<div class="btnBox">
<figure><img src="../g2/thumbnails/4.jpg"/></figure>
<div class="btnHolder">
<div class="boxHeader">Header Text</div>
<div class="boxText">Photo caption</div>
<div class="btnView"><a rel="imageGroup" href="../g2/images/4.jpg">View</a></div>
</div>
</div>

<div class="btnBox">
<figure><img src="../g2/thumbnails/5.jpg"/></figure>
<div class="btnHolder">
<div class="boxHeader">Header Text</div>
<div class="boxText">Photo caption</div>
<div class="btnView"><a rel="imageGroup" href="../g2/images/5.jpg">View</a></div>
</div>
</div>

<div class="btnBox">
<figure><img src="../g2/thumbnails/6.jpg"/></figure>
<div class="btnHolder">
<div class="boxHeader">Header Text</div>
<div class="boxText">Photo caption</div>
<div class="btnView"><a rel="imageGroup" href="../g2/images/6.jpg">View</a></div>
</div>
</div>

<div class="btnBox">
<figure><img src="../g2/thumbnails/7.jpg"/></figure>
<div class="btnHolder">
<div class="boxHeader">Header Text</div>
<div class="boxText">Photo caption</div>
<div class="btnView"><a rel="imageGroup" href="../g2/images/7.jpg">View</a></div>
</div>
</div>

<div class="btnBox">
<figure><img src="../g2/thumbnails/8.jpg"/></figure>
<div class="btnHolder">
<div class="boxHeader">Header Text</div>
<div class="boxText">Photo caption</div>
<div class="btnView"><a rel="imageGroup" href="../g2/images/8.jpg">View</a></div>
</div>
</div>



<div class="clearFloats"></div>
</div>

 

Here's the CSS Code

  1. Copy the CSS code in yellow below.
  2. On your WordPress webpage, scroll down to the bottom and expand the "Scripts-n-Styles" section if not already expanded.
  3. In the Styles section of "Scripts-n-Styles", paste in the yellow copied code below. Scroll down and click on "Update styles" at the bottom.
  4. Updating the page won't really result in a completed page because you'll be missing the JavaScript below which is quite necessary for functionality.
  5. Please ask if there are other kinds of changes you want to make but don't know how to do it.


#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(../g2/thumbnails/bg.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;
text-align:center;
}
.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;
}
.clearFloats {
width: 100%;
height: 0;
clear: both;
}

Scripts needed

  1. Copy the code in yellow below.
  2. On your WordPress webpage, scroll down to the bottom and exand the “Scripts-n-Styles” section if not already expanded.
  3. In the HTML section of “Scripts-n-Styles”, paste in the yellow copied code below into the top box.
  4. Scroll down and click on "Update HTML" at the bottom.

<script src="/jquery/transit.js"></script>

Here's the JavaScript code

  1. Copy the JavaScript code in yellow below.
  2. On your WordPress webpage, scroll down to the bottom and expand the "Scripts-n-Styles" section if not already expanded.
  3. In the Scripts section of "Scripts-n-Styles", paste in the yellow copied code below into the top box.
  4. To change the hover effect, look at your equivalent of line 5 below and change "zoom" to something else such as "shrink", "slideLeft", "slideRight", "slideUp", or "slideDown" - see the above example for how it works.
  5. Click on Update Scripts at bottom then click on Update at top right. Then view your page and hover over and click on your images. They should function like the example gallery above.
  6. Please ask if there are other kinds of changes you want to make but don't know how to do it.

jQuery(document).ready(function($) {
"use strict";
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);
}
});
});