This PHP gallery page is dynamically 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.
PHP CODE
<?php
$directory = 'path/thumbnails_folder'; //path to thumbnails
$link = 'path/slides_folder'; //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 files
{
if($file=='.' || $file == '..') continue; //skip links to parent directories
$file_parts = explode('.',$file); //split filenames and put each part in an array
$ext = strtolower(array_pop($file_parts)); //last element is the file extension
$title = implode('.',$file_parts); //what's left is the filename
if(in_array($ext,$allowed_types))
{
$aFiles[] = $file; //filename array
}
}
closedir($dir_handle); //close directory
natsort($aFiles); // natural sort by filename 01, 02, 10, 20
$i=0;
foreach ($aFiles as $file) {
$file_parts = explode('.',$file); //split filenames and put each part in an array
$ext = strtolower(array_pop($file_parts)); //last element is the file extension
$title = implode('.',$file_parts); //what's left is the filename
$title = htmlspecialchars($title); //make it html-safe
echo '
//add fancybox class for viewer
<div class="thumbs fancybox" style="background:url('.$directory.'/'.$file.') no-repeat 50% 50%">
//group linked images into one slideshow
<a rel="group" href="slides/'.$file.'" title="'.$title.'">'.$title.'</a>
</div>';
$i++; //increment the image counter
}
?>
CSS CODE:
/**Begin image gallery styles**/
.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**/