PHP and JavaScript Popup Image

Snippet Code

This uses JavaScript a PHP to create a pop up box to display a larger version of an image.

view_images.php




<?php

//Get all the images in the database (use a WHERE clause to limit what it finds)

$sql = mysql_query("SELECT * FROM database_name");

//Start A counter we will start at 1

$i = 1;

//Get all the returned results, save them in an array, and loop throught the array

//to display all the returned results

while($row = mysql_fetch_array($sql)){

    //Create a list from the returned image file, and make a $width and $height variable

    list($width, $height) = getimagesize("url/to/large/image/".$row['img_file_name']);

    //Add 30 to the returned width and height so it will fit in the popup window

    //If it still doesn't fit, change the two thirtys to a larger number.

    $width += 30;

    $height += 30;

    //Use javascript to make the popup

    //Everytime the script runs through, $i will change so we can have dynamic popup window sizes

    echo "

    <script type="text/javascript">

        function load".$i."(){

            var load = window.open('url/to/large/image/".$row['img_file_name']."', ' ', 'scrollbars=no,menubar=no,height=".$height.",width=".$width.",resizable=no,toolbar=no,location=no,status=no');

        }

    </script>";

    //This will display our thumbnail on the screen and make a link to the popup function

    //that was just created in the above javascript.

    echo'

    <p>

        <a href="javascript:load'.$i.'()">

        <img src="url/to/thumb/image/'.$row['img_file_name'].'" />

        </a>

    </p>';

    //Add one to $i

    $i++;

}

?>