After you unzip THESE files and put the ppgallery directory in your root folder, Put this red code in your head:
<link href="ppgallery/css/ppgallery.css" rel="stylesheet" type="text/css" />Put this blue code in the Div where you want the thumbnails to appear:
<ul id="gallery">
<li><a href="images/001.jpg"><img class="img" src="images/001.jpg" width="80" height="80"></a></li>
<li><a href="images/002.jpg"><img class="img" src="images/002.jpg" width="80" height="80"></a></li>
<li><a href="images/003.jpg"><img class="img" src="images/003.jpg" width="80" height="80"></a></li>
<li><a href="images/004.jpg"><img class="img" src="images/004.jpg" width="80" height="80"></a></li>
<li><a href="images/005.jpg"><img class="img" src="images/005.jpg" width="80" height="80"></a></li>
</ul>
You can change the way the thumbnails look in ppgallery/css/ppgallery.css
body, html{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#xofpp, #closeBoxpp, #playpp, #stoppp, #imageTitlepp{
cursor:pointer;
margin:0 10px;
color:white;
float:left;
}
#nextButtonBoxpp, #previousButtonBoxpp, #xofpp{
cursor:pointer;
margin:0 10px;
color:white;
float:right;
}
#gallery, #gallery ul{
list-style:none;
margin:0 auto;
padding:0;
width:600px; <<<<<<<< width of the space occupied by gallery
}
#gallery li{
margin:10px 10px; <<<<<<<< Space around the thumbnails
padding:5px; <<<<<<<< padding around the thumbnails
float:left;
list-style:none;
cursor:pointer;
height:100px;
}
#gallery img{
border:2px white solid; <<<<<<<< border around thumbnails
}