Question

I am wanting to alter the following php code so that it resizes and displays images one at a time, with a ‘next’ and ‘previous’ button, in order to browse through the photos. I don’t want any image gallery or lightbox solutions, rather the photos to just show on the page. I’m new to php so If someone can help out or point me in the right direction all help is appreciated.

$sql = "select * from people";
$result = mysql_query($sql) or die ("Could not access DB: " .  mysql_error());
while ($row = mysql_fetch_assoc($result))
{
    echo "<div class=\"picture\">";
    echo "<p>";

// Note that we are building our src string using the filename from the database
    echo "<img src=\"images/" . $row['filename'] . "\" alt=\"\" /><br />";
    echo $row['fname'] . " " . $row['lname'] . "<br />";
    echo "</p>";
    echo "</div>";

source of above code

Answer 1

You can scale them in the browser using width and height attributes (or just one will maintain aspect ratio) however this is bad for many reasons including bandwidth, page performance and image quality.

You can re-size the images using libraries such as GD or Imagick

A quick sample with IMagick:

$hThumb = new Imagick($path_to_file); // Source file
$hThumb->thumbnailImage($x, $y); // You can use 300, 0 to do 300 width and maintain aspect ratio.
$hThumb->stripImage();  // remove meta data
$hThumb->writeImage($path_to_thumb); // write the image to disk

Note

Be sure to have permissions to read/write. You can verify this permissions by using is_readable and is_writable.

Loading

It’s recommended to load the images using AJAX which is quite easy if using JQuery or a similar library.

$('#nextBtn').click(function() {
    var index = 0; // Store this in your image ID tag perhaps
                   // e.g. $('#theImage').attr('id').replace('image', '')
                   // where ID is imageX
    $.ajax({
       url: 'getImages.php?index=' + index,
       type: "GET",
       success: function(data) {
           var result = $.parseJSON(data);
           if (result.success) {
              // Set your image src with the new path. 
              // Use result.image_data.src etc...
           }
       }
    });
});

The PHP would be relatively simple too, a structure similar to this:

 <?php
    $return = array('success' => false, 'image_data' => array());
    if (isset($_GET['index']) && is_numeric($_GET['index')) {
       // Fetch your image
       $return = array(
           'success' => true,
           'image_data' => array(
              'src' => $src, 
              'title' => $title,
              'index' => $index
           )
        );

    }

    echo json_encode($return);
 ?>

** Another note **

As stated by kgb you should resize these on upload, however, they may not be user submitted so you can also check if the thumbs exist on output and generate any as required. Certainly don’t generate them for every view though.