JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Photogallery with no thumbnails

Here's a very simple photogallery with next and prev navigation. Features include:

Customize this #galleryHeader 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

  1. Duplicate your photos so that you'll always have copies of your original photos
  2. Crop and/or resize your duplicated photos with a maximum width between 600px and 800px
  3. Rename your photos in a sequence 1.jpg, 2.jpg, 3.jpg, 4.jpg, ...
  4. Move your photos in a folder labeled "images" (required by script)
  5. Move both folders image and thumbnails into your project folder
  6. Copy and paste the codes below

Scripts needed (copy and paste inside <head>)

You must edit the following for the script


<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="http://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script src="http://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script src="http://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script src="http://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


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