Useful Stuff About:
Photogallery with simple sliding thumbnails
Here's a very simple photogallery with sliding thumbnail navigation. Features include:
- Thumbnails that slide hroizontally. Choose a thumbnail location below with the green links below to see possible top or bottom.
- Border around large image animates to resize to photos with recommended maximum dimensions of 800x600
- Captions displayed from the Alt tag entry for each photo
- All large images are preloaded to eliminate download time prior to displaying
Customize #galleryHeader with your own font/text/image
![1Change this caption in HTML code](photogalleries/thumbnails/1.jpg)
![2Change this caption in HTML code](photogalleries/thumbnails/2.jpg)
![3Change this caption in HTML code](photogalleries/thumbnails/3.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/4.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/5.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/6.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/7.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/8.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/9.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/10.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/11.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/12.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/13.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/14.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/15.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/16.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/17.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/18.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/19.jpg)
![Change this caption in HTML code](photogalleries/thumbnails/20.jpg)
![](photogalleries/images/1.jpg)
This caption will be replaced by the
alternate (Alt) text of clicked thumbnail image
alternate (Alt) text of clicked thumbnail image
Preparing your photos to match what the script is expecting to find
- Duplicate your photos so that you'll always have copies of your original photos!!!!!!!
- Crop and/or resize your duplicated photos with a maximum width between 600px and 800px depending on your website design.
- Rename your photos in a sequence 1.jpg, 2.jpg, 3.jpg, 4.jpg, ...
- Move your photos in a folder labeled "images" (required by script)
- Duplicate your images folder and rename the duplicated folder "thumbnails" (required by script)
- Crop and/or resize your thumbnail photos to have the SAME dimensions with a maximum dimensions of width=100px and height=75px
- Move both folders image and thumbnails into a projectX/photogallery folder
- Copy and paste the codes below
Scripts needed (copy and paste inside <head>)
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script type="text/javascript" src="https://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
- A more suitable header for line 2
- The proper file path to the thumbnails on lines 10-29 and the initial image on line 4
- The correct caption for each for on lines 10-29
- Adding or removing similar lines of code like lines 10-29 for more or less photos
<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;
}