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
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;
}