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 simple thumbnails

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

Customize this header with your own font/text/image
thumbnails top | thumbnails left | thumbnails right | thumbnails bottom
This caption will be replaced by the
alternate (Alt) text of clicked thumbnail image
1Change this caption in HTML code
2Change this caption in HTML code
3Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code
Change this caption in HTML code

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 a projectX/photogallery 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/photogallery1.js"></script>
<script type="text/javascript">
selectedThumbnailFrameColor="#ff0";//What color for highlighting chosen thumbnail?
nonSelectedThumbnailFrameColor="#000";//What color for frame around NON selected thumbnails?
//How much do you want to adjust main image horizontally from center?
adjustHorizontally = 0;//Negative values move left. Positive values move right.
easing = "easeOut";//Change this if you want a different easing for the large image animation
</script>


Here's the HTML Code

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


<div id="galleryHolder">
<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" alt=""></div>
<!--1st image to be shown-->
<div id="captionBox">This caption will be replaced by the <br>
alternate (alt) text of clicked thumbnail image</div>
</div>
<div id="thumbnailFrame">
<div><img src="projectX/photogallery/thumbnails/1.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/2.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/3.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/4.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/5.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/6.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/7.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/8.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/9.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/10.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/11.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/12.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/13.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/14.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/15.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/16.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/17.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/18.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/19.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
<div><img src="projectX/photogallery/thumbnails/20.jpg" alt="Change this caption in HTML code" class="thumbnailImage"></div>
</div>
</div>
</div>

Here's the CSS Code


*:focus {
outline:0;
}
* {
box-sizing:border-box;
}
#galleryBox {
position:absolute;
height:660px;
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;
}
#photoFrame {
position: absolute;
z-index: 400;
left: 205px;
top: 80px;
padding: 5px;
border: dotted 1px #FFF;
text-align: center;
width: 663px;
height: 500px;
}
#photoBox {
position: relative;
z-index: 500;
}
#photoBox img {
position: absolute;
top: 0px;
left: 0px;
}
#captionBox {
position: relative;
padding: 10px;
font-size:0.8em;
z-index: 501;
text-align:center;
width:100%;
height:auto;
}
.thumbnailImage {
float: left;
border: 1px dotted #FFF;
padding: 1px;
}
#thumbnailFrame {
position:absolute;
width:155px;
height:493px;
z-index:400;
left: 7px;
top: 80px;
cursor: pointer;
}