Useful Stuff About:
Photogallery with simple sliding thumbnails
Here's a very simple photogallery with sliding thumbnail navigation. Features include:
- Thumbnails that slide hroizontally with different speeds depending on location of mouse. 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
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/12.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/13.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/14.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/15.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/16.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/17.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/18.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/19.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/20.jpg)
![1Change this caption in HTML code 1Change this caption in HTML code](photogalleries/thumbnails/1.jpg)
![2Change this caption in HTML code 2Change this caption in HTML code](photogalleries/thumbnails/2.jpg)
![3Change this caption in HTML code 3Change this caption in HTML code](photogalleries/thumbnails/3.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/4.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/5.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/6.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/7.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/8.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/9.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/10.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/11.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/12.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/13.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/14.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/15.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/16.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/17.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/18.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/19.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/20.jpg)
![1Change this caption in HTML code 1Change this caption in HTML code](photogalleries/thumbnails/1.jpg)
![2Change this caption in HTML code 2Change this caption in HTML code](photogalleries/thumbnails/2.jpg)
![3Change this caption in HTML code 3Change this caption in HTML code](photogalleries/thumbnails/3.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/4.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/5.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/6.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/7.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/8.jpg)
![Change this caption in HTML code Change this caption in HTML code](photogalleries/thumbnails/9.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/photogallery9.js"></script>
<script type="text/javascript">
totalPics=20;//How many unique photos do you have?
wrapPics=9;//How many thumbnails are visible at the beginning? 5, 7 or 9 recommended
speed=2;//What's the fastest thumbnail speed you want? 1.0 or higher
selectedThumbnailFrameColor="#ff0";//What color for highlighting chosen thumbnail?
adjustHorizontally = 0;//Horizontal adjustment from center of large image. Neg moves left, pos move right
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
- Start with the last 5, 7, or 9 thumbnails
- Then add ALL thumbanils
- Then finish the list of thumbnails with the first 5, 7, or 9 thumbnails
- The captions will taken from each thumbnail "alt" tag entry so change
- Adding or removing similar lines of code 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">
<!--add the last 5, 7, or 9 thumbnails-->
<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 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 class="thumbnailImage"><img src="projectX/photogallery/thumbnails/1.jpg" alt="1Change this caption in HTML code"></div>
<!--add the first 5, 7, or 9 -->
<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>
</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 {
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;
}