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:

Autoplaying Photogallery with thumbnails

Here's a very simple autoplaying photogallery with thumbnail navigation. Features include:

Customize this #galleryHeader with your own font/text/image
thumbnails top | thumbnails left | thumbnails right | thumbnails bottom
This caption will be replaced by the
elements in the captionArray in javascript

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
  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. Move both folders image and thumbnails into your project folder
  6. Copy and paste the codes below

Scripts needed (copy and paste inside <head>)

You must edit the following for the script

<link href="projectX/styles/pX-styles.css" rel="stylesheet">
<!--adjust as needed-->
<script type="text/javascript">
//change the following according to what YOU want for your photogallery
numPics=20,//total number of pbhotos
captionArray=[//change each of the following captions
"Caption 1",
"Caption 2",
"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"
thumbnailFrameColor="#f00";//what color do you want each non-current thumbnail to have?
adjustHorizontally = 0;//shift the large image from center to the right with + numbers and left with - numbers
adjustVertically = -100;//shift the large image from center down with + numbers and up with - numbers
galleryFadeTime = 250;//how much time for one photo fade out and next to fade in
initiallyHidePausePlay = false;
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>


Here's the HTML Code

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="photoFrame">
<div id="photoBox"><img src="projectX/photogallery/images/1.jpg" class="mainImage"></div>
<!--1st image to be shown-->
<div id="pausePlay"><img src="projectX/photogallery/images/autoplayButtons.png" width="85" height="85" /></div>
<div id="captionBox">
because this caption will be replaced by the <br>
elements THAT YOU MODIFY in the captionArray in head of your HTML page.</p>
<p>You can move and resize the allThumbnails holder div to any location.</p>
<p>Your large photos will automatically center themselves vertically and horizontally<br>
through the script. Just make sure the first large image shows up properly.
<p>In the &lt;head&gt; of your HTML, change the captions and many variables to fit your design</p>
<div id="allThumbnailsHolder">
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/1.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/2.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/3.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/4.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/5.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/6.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/7.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/8.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/9.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/10.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/11.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/12.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/13.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/14.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/15.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/16.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/17.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/18.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/19.jpg"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/20.jpg"></div>

Here's the CSS Code

*:focus {
* {
#galleryBox {
position: relative;
height: 600px;
color: #FFF;
width: 100%;
margin: 0 auto;
#galleryHeader {
left: 0;
top: 0px;
display: block;
padding-top: 20px;
#photoFrame {
position: absolute;
z-index: 400;
left: 205px;
top: 80px;
border-style: dotted;
border-width: 1px;
border-color: #FFF;
text-align: center;
width: 90%;
height: auto;
#photoBox {
position: relative;
z-index: 5;
width: 600px;
height: auto;
margin:0 auto;
#photoBox img {
position: absolute;
top: 0px;
left: 0px;
z-index: 5;
#pausePlay {
height: 45px;
width: 45px;
overflow: hidden;
z-index: 600;
position: relative;
margin-top: -100px;/*places image on bottom middle of large image*/
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
#pausePlay img{/*to show pause instead of play first*/
margin-left: -45px;
#captionBox {
position: relative;
z-index: 500;
.thumbnailImage {
float: left;
padding: 1px;
.thumbnailImage img {
#allThumbnailsHolder {
position: absolute;
left: 7px;
top: 80px;
cursor: pointer;