Results 1 to 3 of 3

Thread: [PHP & JavaScript] Image Gallery v2.0

  1. #1

    Thread Starter
    Frenzied Member bmahler's Avatar
    Join Date
    Oct 2005
    Location
    Somewhere just west of the Atlantic
    Posts
    1,568

    [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 &copy;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>
    Last edited by bmahler; Jun 25th, 2007 at 07:30 AM.
    Boooya
    • Visual Studio 2008 Professional
    • Don't forget to use [CODE]your code here[/CODE] when posting code
    • Don't forget to rate helpful posts!
    • If you're question was answered please mark your thread [Resolved]


    Code Contributions:
    PHP
    PHP Image Gallery v1.0PHP Image Gallery v2.0
    VB 2005
    Find Computers on a networkSimple License EncryptionSQL Server Database Access dllUse Reflection to Return Crystal ReportDocumentSilently Print PDFGeneric Xml Serailizer


    Useful Links: (more to come)
    MSDN (The first and foremost)MSDN Design Guidelines API Reference • Inno Setup CompilerInno Setup PreprocessorISTool - Fairly easy to use GUI for creating inno setup projects • Connection StringsNAnt -Automated BuildsCruise Control .NET - Frontend for automated builds

  2. #2
    New Member
    Join Date
    Aug 2011
    Posts
    13

    Re: [PHP & JavaScript] Image Gallery v2.0

    Thanks and what are the technical requirements for it?

  3. #3
    New Member faustjonson's Avatar
    Join Date
    Mar 2016
    Location
    USA New York
    Posts
    4

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width