[PHP & JavaScript] Image Gallery v2.0
This is a modification of my original image gallery script. To use this script, just save it to a file index.php and place it in a directory containing images and you have yourself an image gallery.
Example to call script
Place index.php in folder http://yoursite.com/images/folder1
an example link
HTML Code:
<a href="http://yoursite.com/images/folder1">Image Slideshow</a>
There are four definitions that can be configured
IMAGE_WIDTH - This sets the width of the image to be displayed in pixels
THUMBNAIL_SIZE - this sets the width of thumbnails in pixels
THUMB_MAX_HEIGHT - This sets the max height of the thumbnail window, if height exceeds max height then a scrollbar will be added
THUMB_COLS - This sets the number of columns to use in the thumbnail section
PHP Code:
<?php
//************************************************************//
// //
// PHP Slideshow v2.0 //
// Author: Brian Mahler //
// Copyright (c) 2006 Brian Mahler //
// //
// This script is free to use and modify to your needs as //
// long as this copyright notice remains. //
// //
//************************************************************//
//
// CSS to position and change appearance
// Modify these settings to change the appearance of the page
//
?>
<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>PHP Slideshow v2.0 by Brian Mahler</title>
<style type="text/css">
body{
background-color:#eee;
text-align:center;
}
a:link, a:active, a:visited{
text-decoration:none;
color: #000;
}
a:hover{
color: #bbb;
}
table#images{ /* Includes PageNav,ImageNav and Image */
margin:auto;
}
td#copy{
font-family: times;
font-size:8pt;
}
Table#nav{ /* Navigation table */
}
img#view{
}
img.navpic{
cursor:pointer;
}
</style>
<?php
//
// Configuration Settings
//
define('IMAGE_WIDTH',480); //Width of image in pixels
define('THUMBNAIL_SIZE',60); //Width of thumbnails in pixels
define('THUMB_MAX_HEIGHT',360); //Max height of the thumbnails window in pixels
define('THUMB_COLS',4); //Sets the number of Columns to use in the thumbnails
//---------------------------------------------Do not Edit below this line----------------------------------------------
// Unless you have knowledge of PHP
//Get the path to the current directory
$z = split('/', $_SERVER['SCRIPT_FILENAME']);
$thisname = $z[count($z)-1];
$path = str_replace($thisname, '', $_SERVER['SCRIPT_FILENAME']);
//Define allowed file extensions
$allowed = array('jpg','gif','png');
//Read through the directory and find all files with proper file extensions
$dir = dir($path);
while ($file = $dir->read()) {
if (($file != '.') && ($file != 'CVS') && ($file != '..')) {
$file_size = filesize($path . $file);
$file_extension = file_ext($file);
if(!is_dir($path . $file) && isset($file_extension) && in_array($file_extension, $allowed)) {
$images[] = array('name' => $file,
'size' => $file_size);
}
}
}
?>
<script type="text/javascript">
//The array to hold all the images
var photos = new Array();
//Preload images function
function loadimages(){
<?php
$count = count($images);
for($i=1;$i<=$count;$i++){
echo 'photos[' . $i . ']= new Image()' . "\n";
echo 'photos[' . $i . '].src="' . $images[$i-1]['name'] . '"' . "\n";
}
?>
}
//Javascript to display the images
function showit(step){
document.images.view.src=photos[step].src
}
window.onload = loadimages();
</script>
<?php
//Check for images present in the directory
if ($count < 1){
die('<center>No images present in current directory</center>');
}
//Create the image navigation table
$image_nav = '<div style="overflow:auto;max-height:' . THUMB_MAX_HEIGHT . 'px;"><table id="nav"><tr>';
for ($x=1; $x<=$count; $x++){
if ($x <= $count){
$url = $images[$x -1]['name'];
$image_nav .= '<td align="center" valign="center">';
if ($x%THUMB_COLS==0){
$image_nav .= '<a onclick="showit(' . $x . ')"><img class="navpic" src="' . $url . '" alt="' . $x . '" border="0" width="' . THUMBNAIL_SIZE . 'px" /></a></td></tr><tr>' ;
}else{
$image_nav .= '<a onclick="showit(' . $x . ')"><img class="navpic" src="' . $url . '" alt="' . $x . '" border="0" width="' . THUMBNAIL_SIZE . 'px" /></a></td>';
}
}
}
$image_nav .= '</tr></table></div>';
//The image to be shown
$image = '<img id="view" src="' . $images[0]['name'] . '" width="' . IMAGE_WIDTH . '">';
//This script is free to use and modify to your needs, I just ask that you do not remove this copyright notice
$copy = 'PHP Slideshow v2 ©2006 Brian Mahler';
//Display all elements
?>
<table id="images" border="0" cellpadding="2px">
<tr><td align="left" valign="top"> <?php echo $image_nav; ?></td><td id="pic" align="left" valign="top" style="padding:2px;"><?php echo $image; ?></td></tr>
<tr><td colspan="2" id="copy" align="center"><?php echo $copy; ?></td></tr>
</table>
<?php
//function to get file extension of files
function file_ext($file) {
$extension = split("[.]", $file);
$ext_file = $extension[count($extension)-1];
return strtolower($ext_file);
}
?>
</body>
</html>
Re: [PHP & JavaScript] Image Gallery v2.0
Thanks and what are the technical requirements for it?
Re: [PHP & JavaScript] Image Gallery v2.0
Looks like a piece of code ripped from the site.
It was easier to make an example with Java script and show a working example.
