Useful Stuff About:
Autoplaying Photogallery with no thumbnails
Here's a very simple autoplaying photogallery with next and prev navigation. Features include:
- Photos automatically fade out/in to next image in a custom set time of your choice
- Pause play button visible only when hovered at bottom middle of each photo
- Left and right arrow buttons
- Border around large image animates to resize to photos with recommended maximum dimensions of 800x600
- Captions displayed
- All large images are preloaded to eliminate download time prior to displaying
- Dynamic dots that indicate which photo of the entire set is being displayed
- Customizable dynamic dots - size, colors - these dots are just Option + 8
Customize this header 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
- 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)
- Move both folders image and thumbnails into your project folder
- Copy and paste the codes below
Scripts needed (copy and paste inside <head>)
You must edit the following for the script
- numPics=20 is the default number of photos, change the number to your total number
- change the captions in the caption array
- change the autoPlayTime in milliseconds to the time you want each photo to be displayed 5000ms=5s, 4000ms=4s, etc.
- change the default dotColor and dotSelectedColor to match your design
<script type="text/javascript">
numPics=20,
captionArray=[
"Caption 1", "Caption 2", "Caption 3", "Caption 4", "Caption 5",
"Caption 6", "Caption 7", "Caption 8", "Caption 9", "Caption 10",
"Caption 11", "Caption 12", "Caption 13", "Caption 14", "Caption 15",
"Caption 16", "Caption 17", "Caption 18", "Caption 19", "Caption 20"],
dotColor="rgba(153,153,153,1)",
dotSelectedColor="rgba(0,153,0,1)";
autoPlayTime=5000;
</script>
<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/photogallery4.js"></script>
<link href="path/to/your/styles.css" rel="stylesheet" type="text/css"><!--adjust as needed-->
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 initial image on line 4
- The proper file path to the play/pause/left/right imageSprite on line 5, 7 and 8
<div id="galleryBox">
<div id="galleryHeader">Customize this header with your own font/text/image</div>
<div id="photoFrame">
<div id="photoBox"><img src="projectX/photogallery/images/1.jpg" class="mainImage"></div><!--1st image to be shown-->
<div id="pausePlay"><img src="projectX/photogallery/images/autoplayButtons.png" width="85" height="85" /></div>
<div id="dots"></div>
<div id="arrowLeftBox" class="arrowBox"> <img src="projectX/photogallery/images/autoplayButtons.png" width="85" height="85" /></div>
<div id="arrowRightBox" class="arrowBox"> <img src="projectX/photogallery/images/autoplayButtons.png" width="85" height="85" /> </div>
<div id="captionBox">This caption will be replaced by the <br>
elements in the captionArray in javascript</div>
</div>
</div>
Here's the CSS Code
*:focus {
outline:0;
}
#galleryBox {
position:absolute;
height:650px;
color:#000;
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: 5;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
#photoBox img {
position: absolute;
top: 0px;
left: 0px;
}
.arrowBox {
position: absolute;
z-index: 10;
width: 35px;
top: 0px;
cursor: pointer;
overflow:hidden;
height:35px;
margin-top:225px;
}
#arrowLeftBox {
left:-40px;
}
#arrowRightBox {
right:-40px;
}
.arrowBox img{
margin-top:-50px;
}
#arrowRightBox img{
margin-left:-50px;
}
#pausePlay {
height: 45px;
width: 45px;
overflow: hidden;
z-index: 600;
position: relative;
margin-top: -50px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
cursor:pointer;
}
#pausePlay img{
margin-left: -50px;
}
#dots {
height:10px;
position:relative;
margin-top:10px;
z-index: 501;
}
#dots div{
font-size:20px;
color:rgba(153,153,153,1);
float:left;
margin:0;
padding:0;
}
#captionBox {
position: relative;
padding: 10px;
font-size:0.8em;
z-index: 500;
margin-top:10px;
}