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-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Photogallery with left and right sliding main image

This example features:

Customize this #galleryHeader with your own font/text/image
thumbnails top | thumbnails left | thumbnails right | thumbnails bottom
<
>
This caption will be replaced by the alt text of clicked thumbnail image
This is a really long caption under the photo. Don't make it too long otherwise it starts bleeding UP into your photo. This is a really long caption under the photo. Don't make it too long otherwise it starts bleeding UP into your photo.
As you can see, it's best that all photos are the same height.
Caption 3
Caption 4
Caption 5
Caption 6
Caption 7
Caption 8
Caption 9
Caption 10
Caption 11
Caption 12
Caption 13
Caption 14
Caption 15
Caption 16
Caption 17
Caption 18
Caption 19
Caption 20


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 between 600px and 800px depending on how you place your thumbnails. For example,
    • With thumbnails on the left or right of the main image, your main photo dimensions will probably need to be less wide.
    • With thumbnails above or below the main image, your main photo dimensions will probably need to be more wide
  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=75px and height=75px
  7. Move both folders image and thumbnails into your project folder
  8. Copy and paste the codes below

Scripts needed (copy and paste inside <head>)


<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/photogallery2.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
selectedThumbnailFrameColor="#ff0";//What color for highlighting chosen thumbnail?
photoWidth = 600;//How wide is the widest photo in pixels?
shiftTime = 1000;//How much time in milliseconds to shift to new photo?
});
//-->
</script>

Here's the HTML Code to be pasted inside the <body> tag

VERY IMPORTANT - Be sure to change the HTML code below with


<div id="galleryBox">
<div id="galleryHeader">Customize this #galleryHeader with your own font/text/image </div>
<div id="allPhotos">
<div id="photoBox">
<div class="galleryLargeImageBox"><img src="images/1.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/2.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/3.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/4.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/5.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/6.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/7.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/8.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/9.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/10.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/11.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/12.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/13.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/14.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/15.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/16.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/17.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/18.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/19.jpg"></div>
<div class="galleryLargeImageBox"><img src="images/20.jpg"></div>
</div>
<div id="arrowLeftBox" class="arrowBox"> < </div>
<div id="arrowRightBox" class="arrowBox"> > </div>
<div id="captionBox">This caption will be replaced by the <br>
alternate text of clicked thumbnail image</div>
</div>
<div id="thumbnailFrame">
<div><img src="thumbnails/1.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t1" ></div>
<div><img src="thumbnails/2.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t2" ></div>
<div><img src="thumbnails/3.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t3" ></div>
<div><img src="thumbnails/4.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t4" ></div>
<div><img src="thumbnails/5.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t5" ></div>
<div><img src="thumbnails/6.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t6" ></div>
<div><img src="thumbnails/7.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t7" ></div>
<div><img src="thumbnails/8.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t8" ></div>
<div><img src="thumbnails/9.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t9" ></div>
<div><img src="thumbnails/10.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t10" ></div>
<div><img src="thumbnails/11.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t11" ></div>
<div><img src="thumbnails/12.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t12" ></div>
<div><img src="thumbnails/13.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t13" ></div>
<div><img src="thumbnails/14.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t14" ></div>
<div><img src="thumbnails/15.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t15" ></div>
<div><img src="thumbnails/16.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t16" ></div>
<div><img src="thumbnails/17.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t17" ></div>
<div><img src="thumbnails/18.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t18" ></div>
<div><img src="thumbnails/19.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t19" ></div>
<div><img src="thumbnails/20.jpg" alt="Change this caption in HTML code" class="thumbnailImage" id="t20" ></div>
</div>
</div>

Here's the CSS Code


*:focus {
outline:0;
}
* {
box-sizing:border-box;
}
#galleryBox {
position:absolute;
height:600px;
background-color:#000;
color:#FFF;
width:100%;
top:0px;
left:0px;
}
#galleryHeader {
position:absolute;
width:100%;
height:30px;
z-index:400;
left: 0;
top: 0px;
text-align: center;
display: block;
padding-top: 20px;
}
#allPhotos{
width:600px;/*this should match the widest photo width*/
height:500px;/*= the height of the large photos photo + caption box height*/
position:absolute;
top:80px;
left:200px;
overflow: hidden;
border: 1px dotted #FFF;
z-index:4;
}
#photoBox{
width:12200px;/*= the number of thumbnails x width of widest photo*/
height:450px;/*= the height of the large photos photo*/
position:absolute;
top:0px;
left:0px;
z-index:5;
}
.galleryLargeImageBox {
text-align: center;
float: left;
height: 450px;
width: 600px;/*this should match the widest photo width*/
background-color: #000;
vertical-align: middle;
}
#captionBox {
padding: 10px;
font-size:0.8em;
position: absolute;
bottom: 0px;
left:0;
z-index: 999;
text-align: center;
width: 100%;
height:auto;
}
.thumbnailImage {
float: left;
border: 1px dotted #FFF;
padding: 1px;
}
#thumbnailFrame {
position:absolute;
width:157px;
height:503px;
left: 12px;
top: 80px;
cursor: pointer;
z-index:7;
}
.arrowBox {
padding-top:225px;/*this should half of the large image height*/
height: 225px;/*this should half of the large image height*/
position: absolute;
z-index: 10;
width: 25px;
top: 0px;
cursor: pointer;
font-family: Verdana, Geneva, sans-serif;
font-size: 30px;
padding-right: 5px;
padding-left: 5px;
}
#arrowLeftBox {
left:0px;
}
#arrowRightBox {
right:0px;
}