Page 1 of 1

How to make a thumbnail link to a larger image??

Posted: Sun Aug 12, 2012 11:50 am
by midnite
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

Code: Select all

//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

Code: Select all

$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.

Re: How to make a thumbnail link to a larger image??

Posted: Sun Aug 12, 2012 5:49 pm
by requinix
Write a query using a JOIN that gets all the information you need: thumbnail information and the larger image information. Then all you need to do is add the link into the HTML you output.