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
Freestyle Logo

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Photogallery with simple sliding thumbnails

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

Customize #galleryHeader with your own font/text/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
This caption will be replaced by the
alternate (Alt) text of clicked thumbnail image

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 your website design.
  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=100px 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/photogallery7.js"></script>
<script type="text/javascript">
      selectedThumbnailFrameColor="#ff0";//What color for highlighting chosen thumbnail?
      adjustHorizontally = 0;//Horizontal adjustment from center of large image. Neg moves left, pos move right
      thumbnailShiftTime = 750;//how much time to shift thumbnails?
      thumbnailEasing = "easeOutBounce";//what kind of easing for the thumbnail shift
      thumbMiddle = 5;//Which thumbnail is the middle thumbnail? Best choices 5, 7, 9 - ODD numbers
      mainImageFadeTime = 1000;//how much time to fade the main image in and out
</script>


Here's the HTML Code

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


<div id="galleryBox">
<div id="galleryHeader">Customize #galleryHeader with your own font/text/image</div>
<div id="thumbnailFrame">
<div id="allThumbnailsWrapper">
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/1.jpg" alt="1Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/2.jpg" alt="2Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/3.jpg" alt="3Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/4.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/5.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/6.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/7.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/8.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/9.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/10.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/11.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/12.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/13.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/14.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/15.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/16.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/17.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/18.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/19.jpg" alt="Change this caption in HTML code"></div>
<div class="thumbnailImage"><img src="projectX/photogallery/thumbnails/20.jpg" alt="Change this caption in HTML code"></div>
</div>
</div>
<div id="photoFrame">
<div id="photoBox">
<!--1st image to be shown-->
<img src="projectX/photogallery/images/1.jpg" class="mainImage">
</div>
<div id="captionBox">
This caption will be replaced by the <br>alternate (Alt) text of clicked thumbnail image
</div>
</div>
</div>

Here's the CSS Code


*:focus {
outline:0;
}
#galleryBox {
position: relative;
height: auto;
color: #FFF;
width: 980px;
top: 0px;
left: 0px;
margin-right: auto;
margin-left: auto;
min-height: 675px;
padding-bottom: 30px;
}
#galleryHeader {
position: relative;
width: 100%;
height: auto;
z-index: 400;
text-align: center;
display: block;
padding-top: 20px;
margin-right: auto;
margin-left: auto;
padding-bottom: 10px;
}
.thumbnailImage {
float: left;
border-style: dotted;
border-width: 1px;
border-color: #F00;
margin: 1px;
width: 100px;
height: 75px;
cursor: pointer;
background-color:#fff;
}
#thumbnailFrame {
width: 936px;/*7 or 9 times the total width of 1 .thumbnailImage including border and padding */
z-index: 400;
overflow: hidden;/*VERY IMPORTANT to hide most thumbnails*/
margin-left: auto;
margin-right: auto;
}
#allThumbnailsWrapper {
width: 2100px;/*Must be equal or larger than to total number of thumbnails x total width of 1 .thumbnailImage including border and padding*/
left:0;
top:0;
}
#allThumbnailsWrapper, #thumbnailFrame {
position: relative;
height: 79px;/*total height of 1 .thumbnailImage including border and padding*/
}
#photoFrame {
z-index: 400;
padding: 5px;
border: dotted 1px #FFF;
text-align: center;
width: 900px;
height: 500px;
margin-left: auto;
margin-right: auto;
margin-top:10px;
position: relative;
}
#photoBox {
position: relative;
z-index: 500;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
#photoBox img {
position: absolute;
top: 0px;
left: 0px;
}
#captionBox {
position: relative;
padding: 10px;
font-size: 1em;
z-index: 500;
height: auto;
}