| Quick and Easy Image Gallery |
Here you will find a very simple image gallery which is the exact one used on the site. Step by step installation is included here on this site.
Step One: Insert HTML code directly after the <BODY> tag. Select Text
<div id="imageViewer" style="position: absolute; visibility: hidden; display: none; vertical-align: middle;">
<div style="border: 1px solid #000000; background-color: #FFFFFF; top:-50%; padding: 20px; margin: 20px;">
<table border=0>
<tr><td align="right"><a href="#" onClick="closeImage()">Close Image [X]</a></td></tr>
<tr><td><img id="swapImage" src="bigImage" style="border: 2px solid #000000;" /></td></tr>
</table></div></div>
This code creates the popup window to show the full size picture.
Step Two: Insert PHP code where you want the gallery to appear. Then change the text in the variable $folderDirectory to the folder containing the thumbnails. Do the same with the $fullDir variable except with the folder containing the full size images. Select Text
<table cellspacing=0 cellpadding=0 border=0 align="center"><tr><td>
<?php
// Image Gallery viewer.
// ---------------------
// Read image folder and create gallery
// ---------------------
// Default Values
$thispage=$_SERVER['PHP_SELF'];
$thispage=substr($thispage, strrpos($thispage, "/")+1);
$picsPerPage=20;
$picsPerRow=4;
$maxPages=10;
$folderDirectory="pics/thumbs/";
$fullDir="pics/";
$page=1;
$x=0;
$rowCount=0;
$output="<table><tr>";
// Get Current Page
if ((isset($_GET['page']))&&(ctype_digit($_GET['page'])))
{
$page=$_GET['page'];
}
if ($page < 1)
{
$page=1;
}
if ($handle = opendir($folderDirectory)) {
while (false !== ($file = readdir($handle)))
{
if (($file!="..")&&($file!="."))
{
$ext=substr($file, strrpos($file, "."));
if (($ext==".gif")||($ext==".jpg")||($ext==".jpeg"))
{
$files[$x]=$file;
$x++;
}
}
}
closedir($handle);
}
sort($files);
$fileCount=count($files);
$start=($page*$picsPerPage)-$picsPerPage;
$stop=$page*$picsPerPage;
for ($x=$start; $x<$stop; $x++)
{
if ($x >= $fileCount)
{
break;
}
if ($rowCount>=$picsPerRow)
{
$output.="</tr><tr>";
$rowCount=0;
}
$output.="<td><a href=\"#\" onClick=\"showPic('{$fullDir}{$files[$x]}')\"><img src=\"{$folderDirectory}{$files[$x]}\" class=\"pic\"></a></td>";
$rowCount++;
}
$dStart=$start+1;
$pages=ceil($fileCount/$picsPerPage);
$output.="</tr></table>";
$startpage=1;
$startPages=$maxPages/2;
if ($page>$startPages)
{
$startPage=$page-$startPages;
}
for ($i=$startPage; $i<=$pages; $i++)
{
if ($i>$maxPages)
{
break;
}
if ($page==$i)
{
$pageList.="<b>{$i}</b> ";
}
else
{
$pageList.="<a href=\"{$thispage}?page={$i}\">{$i}</a> ";
}
}
$output="<b>{$fileCount}</b> images found. Displaying <b>{$dStart}</b> to <b>{$stop}</b><br />
Page <b>{$page}</b> of <b>{$pages}</b> - {$pageList}<br />{$output}";
echo $output;
?>
</td></tr></table>
Step Three: Insert Javascript code directly before the </head> tag. Select Text
<script>
function showPic(imageName) {
document.getElementById('imageViewer').style.visibility='visible';
document.getElementById('imageViewer').style.display='block';
document.getElementById('swapImage').src=imageName;
}
function closeImage() {
document.getElementById('imageViewer').style.visibility='hidden';
document.getElementById('imageViewer').style.display='none';
}
</script>
Step Four: Upload your thumbnails and images to the appropriate folders. Please note that the thumbnail and the main image while located in different folders, must have the same name.
