This PHP gallery page is automatically populated from a folder of images.
The slideshow is jQuery Fancybox.
Click on thumbnails to see the Slideshow. Use your mouse wheel to scroll through slides.
Last updated: October 2014 | File count: 32
PHP CODE
Insert the following where you want your gallery to appear. Change path/folder to where your images are located on the server:
<!--begin dynamic gallery-->
<?php
$directory = '../path/your_thumbnails/'; //path to thumbnails
$link = '../path/your_slides/'; //path to full-sized images
$allowed_types = array('jpg','jpeg','gif','png');
$aFiles = array();
$dir_handle = @opendir($directory) or die("There is an error with your image directory!");
while ($file = readdir($dir_handle)) //traverse through directory
{
if($file=='.' || $file == '..') continue; //skip links to parent directories
$file_parts = explode('.',$file); //split file parts and put each into an array
$ext = strtolower(array_pop($file_parts)); //last part is extension
$title = implode('.',$file_parts); //what's left is filename
$title = htmlspecialchars($title); //make the filename html-safe
if(in_array($ext,$allowed_types))
{
$aFiles[] = $file;
}
}
closedir($dir_handle); //close directory
natsort($aFiles); // natural sort filenames
$aFiles = array_reverse($aFiles); //display in reverse order
$i=0; //loop
foreach ($aFiles as $file) { //repeat as before
$file_parts = explode('.',$file);
$ext = strtolower(array_pop($file_parts));
$title = implode('.',$file_parts);
$title = htmlspecialchars($title);
$nomargin='';
if(($i+1)%4==0) $nomargin='nomargin'; //last image on the row has class "nomargin"
echo '
<div class="fancybox thumbs '.$nomargin.'" style="background:url('.$directory.'/'.$file.') no-repeat 50% 50%">
<a rel="group" href="../path/your_slides/'.$file.'" title="'.$title.'">'.$title.'</a>
</div>';
$i++; //increment the image counter
}
?>
<!--end thumbs gallery-->
<!--clear left float-->
<hr class="clearing" />
<p File count:
<?php
$directory = "../path/your_slides/";
if (glob($directory . "*.jpg") != false)
{
$filecount = count(glob($directory . "*.jpg"));
echo $filecount;
}
else
{
echo 0;
}
?></p>
CSS CODE:
/**Begin image gallery styles**/
.nomargin {} /*optionally applied to last image in row*/
.thumbs{ /*divs that hold all the gallery pictures*/
float:left;
margin:9px 14px 9px 14px; /*space between thumbnails*/
border:10px solid #333;
width:140px;
height:99px;
/**for pre-IE8**/
filter:alpha(opacity=70);
/**for other browsers**/
opacity: .70}
.thumbs a{ /* in every .thumbs div there is a hyperlink exactly the size of the container */
width:140px;
height:99px;
text-indent:-99999px; /*move text links off screen*/
display:block;
outline:none;}
/**on mouse over**/
.thumbs:hover {
border:10px solid #666;
/**for pre-IE8**/
filter:alpha(opacity=100);
/**for all other browsers**/
opacity:1.0}
/**float clearing applied at end of gallery**/
.clearing {
display:block;
clear:both;
visibility:hidden;
}
/**end image gallery styles**/