Useful Stuff About:
Photogallery with no thumbnails
Here's a very simple photogallery with next and prev navigation. Features include:
- 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 #galleryHeader with your own font/text/image



This caption will be replaced by the
elements in the captionArray in javascript
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 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)";
</script>
<script src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/photogallery3.js"></script>
<link href="projectX/styles/pX-styles.css" rel="stylesheet"><!--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 left right imageSprite on line 6 and 7
<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/photogalleries/images/1.jpg" class="mainImage"></div><!--1st image to be shown-->
<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;
}
#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;
}