...

View Full Version : How to make a thumbnail link to a larger image??



midnite
08-12-2012, 05:42 PM
Hi there guys,

I've got script that takes an image, re-sizes that image to a thumbnail size (150x150px) and stores the path in a database.

uploadimage.php

//writes the information to the database
//the empty quotes below is where the image id will be stored
//$thumb_path is stores the thumbnail path ex. thumbs/.'thumb_'.$image_name
$sql = "INSERT INTO `thumbs` VALUES ('', '$title', '$thumb_path')" ;

//$link stores the database connection
$result = mysqli_query($link, $sql);

if ($result === false) {
exit('Sorry, there has been an error2. Please try again later.');
}

I then can retrieve all the thumbs with the following script:
index.php


$data = "SELECT * FROM thumbs";
$output = mysqli_query($link, $data);

if ($output === false) {
exit('Sorry, there has been an error1. Please try again later.');
}

//this will get and display all the thumbs stored in the database path
while($info = mysqli_fetch_assoc($output)) {

echo '<h3>'.$info['thumb_title'].'</h3>';
echo "<p><img src=".$info['thumb_path']."></p>";
}

I also have another piece of code that re-sizes the image to a larger image (600x600) and I'm also storing the path in a different table which is linked to the 'thumbs' table with a foreign key.

Now what I am struggling with is to make each thumbnail a link to a larger image for example, the index.php page presents me with 4 thumbnails if i click on one of those thumbnails i would like to go to large_image.php(why a page?? well because i would like to display the title and maybe a description of the image) and see the large image of the thumbnail I've just clicked.

If this makes any sense of course.

Any help please, maybe just a little example.

Thanks for the time guys.

Len Whistler
08-13-2012, 12:27 AM
I would create a thumbnails folder inside the images folder and give both images the same name. You do not need to link the images with a foreign key in the database or store the path to the images in the database, php would output the path.

To display the images you would output something like:



<?php
echo "<img src=\"images/['image_name'].jpg\">";
echo "<img src=\"images/thumbnails/['image_name'].jpg\">";
?>


----

minkoko
08-13-2012, 06:44 AM
$data = "SELECT * FROM thumbs";
$output = mysqli_query($link, $data);

if ($output === false) {
exit('Sorry, there has been an error1. Please try again later.');
}

//this will get and display all the thumbs stored in the database path
while($info = mysqli_fetch_assoc($output)) {

echo '<h3>'.$info['thumb_title'].'</h3>';
echo "<p><img src=".$info['thumb_path']."></p>";
}

Like this ?

echo "<p><img src='.$info['thumb_path']. width="150px" height="150"'></p>";

Len Whistler
08-13-2012, 07:08 AM
RE: How to make a thumbnail link to a larger image??


Below is the exact code I use for my site. It uses the GET method to pass on the image id to the next page to display full image plus other info from the database.


<?php
echo "<a href=\"bottles-view.php?id=$row[id]\">
<img class=\"gallery\" src=\"images/thumbs/$row[bottle_image].jpg\" alt=\"$row[brewery]\" title=\"$row[brewery]\" height=\"150\" width=\"65\"></a>
?>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum