single-page image gallery

@themartyJul 24.2006 — #in php you could pass the filename as variable through the url

it's also possible to do this with javascript:

<img src="thumb_pic1.jpg" onClick="document.getElementById('bigPic').src='pic1,jpg';">

<img id="bigPic">

@john_de116Jul 24.2006 — #Use the paging concept.

Or

Do it like this. Save it as a several pages.

Display the $pic2;

<a href="url/pic_form1.php">Back</a>....<a href="url/pic_form3.php">Next</a>

@bokehJul 24.2006 — #Here's something to start you off... Just change the image directory on line 3 to wherever the images are [B]in relation to[/B] the script. Obviously you would need to edit the large images so they are all a similar size:

[code=php]<?php 
 
 $directory = './images/';
 $max_width = 80;
 $max_height = 80;
 
 if(isset($_GET['thumb']))
 {
 // The file
 $filename = $directory.$_GET['thumb'];
 
  // Check if client has a cached copy
  $last_modified = date("D, d M Y H:i:s GMT", filemtime($filename)); // Date last modified
  if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE']))
  { 
   // If file not modified since last viewing don't send it
   if($last_modified == $_SERVER['HTTP_IF_MODIFIED_SINCE'])
   {
   header("HTTP/1.x 304 Not Modified");
   die;
   }
  }
 
  // Set a maximum height and width
  $width = $max_width;
  $height = $max_height;
 
  // Content type
  header('Content-type: image/jpeg');
  header("Last-Modified: $last_modified");
 
  // Get new dimensions
  list($width_orig, $height_orig) = getimagesize($filename);
 
  if ($width && ($width_orig < $height_orig)) {
   $width = ($height / $height_orig) * $width_orig;
  } else {
   $height = ($width / $width_orig) * $height_orig;
  }
 
  // Resample
  $thumb = imagecreatetruecolor($width, $height);
  $image = imagecreatefromjpeg($filename);
  imagecopyresampled($thumb, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);
 
  // Output
  imagejpeg($thumb, null, 100);
  die;
 }
 else
 {
 $thumbs = null;
 $dir = opendir($directory);
 while (false !== ($file = readdir($dir))) 
 {
 if (eregi('.jpg{1}$', $file))
 {
 $width = $max_width;
 $height = $max_height;
 list($width_orig, $height_orig) = @getimagesize($directory.$file);
 if ($width && ($width_orig < $height_orig)) 
 {
 $width = ($height / $height_orig) * $width_orig;
 } 
 else 
 {
 $height = ($width / $width_orig) * $height_orig;
 }
 $thumbs .= '<li><a href="?pic='.$file . '"><img style="margin-top:'.($max_height - $height).'px" src="?thumb=' . $file . '" width="' . round($width) . '" height="' . round($height) . '" alt="" /></a><p><a href="' . $file . '">' . str_ireplace('.jpg', '', $file) . '</a></p></li>'. "n";
 }
 }
 closedir($dir);
 
 
  if(isset($_GET['pic'])){
   $size = getimagesize($directory.$_GET['pic']);
   $pic = '<div id="pic"><img src="' . $directory . $_GET['pic'] . '" '.$size['3'] .' alt="" /></div>';
  }
 
  $height = $max_height + 25;
 
 echo <<<END
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 

 <style type="text/css">
 #pic {
 text-align: center;
 }
 
 ul#gallery {
 margin:0 auto;
 padding:0;
 list-style-type:none;
 width:80%;
 }
 ul#gallery li {
 float: left;
 margin:15px;
 height:{$height}px;
 }
 ul#gallery li img {
 border: 0px;
 }
 ul#gallery li p {
 text-align: center;
 margin:5px 0;
 font-size: 8pt;
 font-family:  verdana, sans-serif;
 }
 ul#gallery li p a {
 text-decoration: none;
 color: #000;
 }
 </style>
 
 <title>Thumbnails</title>
 </head>
 
 <body>
 
 $pic
 <ul id="gallery">
 $thumbs
 </ul>
 
 </body>
 </html>
 END;
 
 }
 
 
 ?>[/code]

single-page image gallery

3 Comments(s) _↴

Also in #PHP _↴

Success!

Social

Version

single-page image gallery

3 Comments(s) ↴

Also in #PHP ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #PHP _↴