Snap Builder HTML5 CSS3 Free Public Codes Library


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Image Galleria</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
/* Default styles incase you don't have an external css.
Make sure you take out the external css ref if you do not
use one, otherwise Netscape returns 404! */

/* Only IE, Opera, and NS 6+ will import styles via this
command (and it MUST appear before any other styles), so
put styles in this file that break NS 4.x, like a border for
your images.  If this file does not exist, all browsers ignore it.
Sample contents for imported css:
.photo img { border: 1px solid #f5deb3 }
.photo { text-align: left; width: 500px } */
@import url(../styleie.css);

body { background-color: rgb(80,80,80) }
body, p, td { color: rgb(180,180,180); font: 12px verdana, arial, sans-serif }

a:link, a:active, a:visited { color: #f5deb3; text-decoration: none; font-size: 12px }
a:hover { text-decoration: underline }

.fulltitle { margin-bottom: 0px; padding-bottom: 0px }
.series { margin-top: 0px; padding-top: 0px }

/* heading size fixes for Netscape */
h1, h2, h3, h4, h5, h6 { text-align: center; font-weight: bold }
h1 { font-size: 150% }
h2 { font-size: 135% }
h3 { font-size: 125% }
-->
</style>

<!--link rel="stylesheet" href="../style.css" type="text/css"-->

</head>

<body>

<div align="center">

<h2>Image Gallery</h2>

<p>My most favorite pictures ever.</p>

<?
//error_reporting (E_ALL);
/************************************************************
PHP Image Gallery by "sasha" (sasha@bittersweet2.com)
Last edited November 4, 2002
Based on the Image Galleria, originally written by DrTebi

This is a fairly simple script for displaying thumbnail
images that link to a full size image with optional captions.

Instructions
1.  Create thumbnails of your full size images, this script
does not create them for you.  The thumbnail image's
name must match the full size image's name exactly.
2.  Create two separate directories:  one to contain the
thumbnails and one to contain the full size images.
3.  Create a 3rd directory if you wish to have captions
appear below your full size image names.  The name of the
plain text file should match your images name like this:
your_image_name.jpg.inc.  Don't worry if there isn't a
caption file for every image, since the script will ignore
it if there isn't one.
4.  All of the editable configuration variables are listed
at the beginning of the script and can be moved to an
external configuration file if desired.

-sasha
************************************************************/

/********** editable variables **********/

// thumbnails title
$thumb_title = 1;  // set to 1 if you want the image filename below the thumb, 0 otherwise

// full size images title
$full_title = 1;  // set to 1 if you want the image filename below the the full size image, 0 otherwise

// how many thumbnails should appear per row?
$cols = 3;  // 3 looks the best, but you may want more or less, depending on the size of your thumbnails

// how many thumbnails per page?
$max_thumbs = 0;  // a multiple of $cols looks the best, or 0 for all thumbnails on one page

// thumbnail directory name
$thumbs_dir = "thumbs";  // just make sure your directory name is inside double quotes

// full size image directory name
$full_dir = "images";  // just make sure your directory name is inside double quotes

// captions directory name
$captions_dir = "captions";  // if you don't want captions at all, don't worry about this

// extension name
$ext = "php";  // just incase you are using a different extension name for your script; if your server is not set for "index.$ext to be the index page, put "0".

// captions extension
$cext = "inc";  // use whatever you're comfortable with

// show random option for single page view
$showrand = 0;  // to turn it off, switch 1 to 0

// print footer options
$print_footer = "print_footer"; // put in the name of the function you use to print the footer of your page.  if you don't use one, just leave it as it is.

/********** end editable variables **********/

// figure out this script's name
$self = $HTTP_SERVER_VARS['PHP_SELF'];

if (basename($self) == "index.$ext") {
$self = str_replace(basename($self), "", $self);
}

// do you have an existing function to close your page?  if not, use this default...
if (!function_exists($print_footer)) {
function print_gallery_footer() {
?>

</body>
</html>
<?
}
$print_footer = 'print_gallery_footer';
}

// our error function, cleanly exits the script on user errors
function imgerror($error) {
global $print_footer;
print "<p><b>$error</b></p>nn";
$print_footer();
exit();
}

// get image size function
function gallery_imgsize($image) {
$size = GetImageSize($image);
return "width=$size[0] height=$size[1]";
}

// check for directories
if(!is_dir($thumbs_dir)) {
imgerror('Directory "'.$thumbs_dir.'" does not exist.');
}
if(!is_dir($full_dir)) {
imgerror('Directory "'.$full_dir.'" does not exist.');
}

// get contents of $thumbs_dir
$dir = @opendir($thumbs_dir) or imgerror('Can't open ' . $thumbs_dir . ' directory');
$thumbs = array();
while($thumb = readdir($dir)) {
if(preg_match('/(jpg$|jpeg$|gif$|tif$|bmp$|png$)/', $thumb))
array_push($thumbs, $thumb);
}

sort($thumbs);

// lowest displayed image in the array
// use http_get_vars incase register_globals is off in php.ini
if (!isset($HTTP_GET_VARS['i'])) {
$i = 0;
}
else {
$i = $HTTP_GET_VARS['i'];
}

// check to see if all thumbs are meant to be displayed on one page
if ($max_thumbs == 0) {
$max_thumbs = sizeof($thumbs);
$mt_check = 1;
}
else {
$mt_check = 0;
}

// thumbnail view
if (is_numeric($i)) {
// check to see which thumbnail to start with
if (!$mt_check && $i > 0) {
$start = $max_thumbs * ($i - 1);
}
else {
$start = 0;
}
// are they looking for thumbs pages that don't exist?
if ($start > sizeof($thumbs)) {
print '<a href="' . $self . '">index</a>' . "nn";
imgerror('Sorry, there are no images to display on this page');
}
?>

<table width="80%" cellspacing=0 cellpadding=10 border=0>
<tr>
<?
// loop through $thumbs and display $max_thumbs per page
for($count = 1; $count <= $max_thumbs; $start++) {
// break if past max_thumbs
if ($start >= sizeof($thumbs)) {
break;
}

// print new row after predefined number of thumbnails
if(($count % $cols == 1) && $count != 1 && $cols > 1) {
print "</tr>nn<tr>n";
}
else if ($cols == 1) {
print "</tr>nn<tr>n";
}

// open cell
print '<td align="center" width="' . (floor(100 / $cols)) . '%">';

// insert thumb
print '<a href="' . $self . '?i=' . rawurlencode("$thumbs[$start]") . '"><img src="' . $thumbs_dir . '/' . rawurlencode("$thumbs[$start]") . '" ';
print gallery_imgsize("$thumbs_dir/$thumbs[$start]");

// alt information
print ' alt="Link to full sized version of ' . $thumbs[$start] . '"></a>';

// image title
if($thumb_title) {
$title = explode(".", str_replace("_", " ", ucfirst($thumbs[$start])));
print "n" . '<br>' . $title[0];
}

// close cell
// supress line break for screen readers, but force a line break for lynx
print '<br style="visibility: hidden; volume: silent"></td>' . "n";
$count++;
}
?>
</tr>
</table>
<?
// thumbs page nav
if (!$mt_check) {
print "n<p>";
// how many total thumbs pages, including a "remainder" page if needed
$pages = ceil(sizeof($thumbs) / $max_thumbs);
for ($count = 1; $count <= $pages; $count++) {
if ($count == 1) {
if ($count == $i || $i == 0) {
print $count;
}
else {
print "<a href="$self">$count</a>";
}
}
else {
if ($count == $i) {
print " | $count</a>";
}
else {
print " | <a href="$self?i=$count">$count</a>";
}
}
}
print '</p>';
}
}

// single image view
else if (file_exists("$full_dir/$i")) {
// find where it is in the array
$key = array_search($i, $thumbs);
if (is_null($key)) {
$key = -1;
}

// navigation
print '<p>';
// previous
if($key >= 1) {
print '<a href="' . $self . '?i=' . rawurlencode($thumbs[$key - 1]) . '"> previous</a> | ';
}
else {
print ' previous | ';
}
// index
print '<a href="' . $self . '">index</a>';
// random
if ($showrand != 0) {
$random = array_rand($thumbs, 2);
print ' | <a href="' . $self . '?i=' . rawurlencode($thumbs[$random[0]]) . '">random</a>';
}
// next
if($key != (sizeof($thumbs) - 1)) {
print ' | <a href="' . $self . '?i=' . rawurlencode($thumbs[$key + 1]) . '">next </a>';
}
else {
print ' | next ';
}
print "</p>nn";
// image
print '<img src="' . $full_dir . '/' . rawurlencode($i) . '" ';
print gallery_imgsize("$full_dir/$i");

// alt information
print ' alt="';
if(!$full_title) {
print $i;
}
print "" border=0>nn";

if($full_title) {
$title = explode(".", str_replace("_", " ", ucfirst($i)));
print "<div class="fulltitle">$title[0]</div>nn";
}

// numerically show what image it is in the series; hide this if image isn't in the series
if ($key >= 0) {
// add 1 so that the first image is image 1 in the series, not 0
print '<div class="series">' . ($key + 1) . ' of ' . sizeof($thumbs) . "</div>nn";
}

// caption (optional)
if (file_exists("$captions_dir/$i.$cext")) {
print '<div class="caption">';
require("$captions_dir/$i.$cext");
print '</div>';
}
}

// no image found
else {
?><p><a href="<?=$self?>">index</a></p>

<?
imgerror('Sorry, that image does not exist...');
}
?>

<p><a href="../">Back to main image gallery</a></p>

</div>

</body>
</html>
Code Snippet </> Info
