Useful Stuff About:

Autoplaying Photogallery with no thumbnails

Photogallery V1 |

Photogallery V2 |

Photogallery V3 |

Photogallery V4 |

Photogallery V5 |

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

This caption will be replaced by the
elements in the captionArray in javascript

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