CODEWITHSUNDEEP
phpsqlimage
uneducatedguy
uneducatedguy

Reputation: 1361

Displaying images from sql in php with next/prev buttons

How can I alter this code so that It only displays one image at a time, with a next and previous button in order to browse through the images.

I used the code from this website 

$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>";

If no one is willing to help, can they point me in the direction of a tutorial or a website that may have the answers. I am new to php so all help is much appreciated.

Upvotes: 1

Views: 1637

Answers (2)

lusketeer
lusketeer

Reputation: 1930

Image crop. You can pass the parameters in the url to get your desired output image size like this image.php?src=img/random.jpg&w=300&h=200

<?php
header("Content-type: image/jpeg");
$image = imagecreatefromjpeg($_GET['src']);

$thumb_width = $_GET['w'];
$thumb_height = $_GET['h'];

$width = imagesx($image);
$height = imagesy($image);

$original_aspect = $width / $height;
$thumb_aspect = $thumb_width / $thumb_height;

if($original_aspect >= $thumb_aspect) {
   // If image is wider than thumbnail (in aspect ratio sense)
   $new_height = $thumb_height;
   $new_width = $width / ($height / $thumb_height);
} else {
   // If the thumbnail is wider than the image
   $new_width = $thumb_width;
   $new_height = $height / ($width / $thumb_width);
}

$thumb = imagecreatetruecolor($thumb_width, $thumb_height);

// Resize and crop
imagecopyresampled($thumb,
                   $image,
                   0 - ($new_width - $thumb_width) / 2, // Center the image horizontally
                   0 - ($new_height - $thumb_height) / 2, // Center the image vertically
                   0, 0,
                   $new_width, $new_height,
                   $width, $height);
imagejpeg($thumb);
?>

In terms of putting one image on the page at a time and browse through them use previous and next button. That would require some javascript to achieve that.

There are many nice gallery that would display the image one at a time, and they already take care of the image resize issue. Take a look at HERE

Upvotes: 0

elo
elo

Reputation: 615

$page = $_GET['page'];    
$sql = "select * from people LIMIT $page,1";
while(...){
  ...
  $next_page = $page+1;
  $prev_page = $page-1;

  $next_btn = "<a href='script.php?page=".$next_page."'>Next</a>";
}

Here is a basic implementation, do not forget about negative/maximum verifications and mysql injection !

Upvotes: 1

Related Questions