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

[midnit]

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.

[maxudaskin]

echo '<a href="large_image.php?i=' . $info['image_id'] . '"'>;
echo "<p><img src=".$info['thumb_path']."></p>";
echo '</a>';

 

And in large_image.php, query the database for the image with an id of $_GET['i']

[scootstah]

Well, you're going to have to link them in the database. Here's an example database structure:

images
id | title      | description | name       | path
0  | some image | some desc   | image1.jpg | images/

images_thumbnails
id | image_id | name             | path
0  | 0        | image1_thumb.jpg | images/thumbs/

 

You can optionally use a foreign key on images_thumbnails.image_id to point to images.id.

 

Now you have the data available to make a link. Just use a JOIN to get both rows, so that you have the thumbnail ID. Something like:

SELECT i.id, i.title, i.description, i.name, i.path,
       t.id AS thumb_id, t.name AS thumb_name, t.path AS thumb_path
LEFT JOIN images_thumbnails AS t ON t.image_id = i.id
FROM images AS i;

[maxudaskin]

Check out Lightbox 2. It's free, requires no PHP, and will make your website look awesome!

[midnit]

Hi maxudaskin,

 

Thanks for your help, I'm currently learning from your tip and I'm also in the middle of the testing. So what i did was, I've deleted the thumbs table and created a new table 'images' with the following columns: id, title, thumb_path, image_path.

 

So to output the thumb I'll use the same code, to output the large image I'm going to try something like:

 

//page containing the connection details
require_once 'includes/config.php'; 

$link = mysqli_connect(
		$config['db_host'],
		$config['db_user'],
		$config['db_pass'],
		$config['db_name']);

if (mysqli_connect_errno()) {
    exit('Sorry, there has been an error. Please try again later.');
}

//if its set (from the index.php)
if(isset($_GET['id'])) {

$id = $_GET['id'];
$sql2 = "SELECT image_path FROM images WHERE id = '$id'";
$result2 = mysqli_query($link, $sql2);

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

$info = mysqli_fetch_assoc($result2);

echo "<img src=".$info['image_path'].">";

}

?>

 

But right now I'm still changing some bits of the code, so please bear with me, I'll let you know the result.

 

And once again thanks for the help.

[scootstah]

Check out Lightbox 2. It's free, requires no PHP, and will make your website look awesome!

 

This doesn't solve anything. You still need to determine which large image is associated with which small image.

[midnit]

Hi scootstah,

 

You are right just tested the code, and it does not display anything, i thought that by having the code above i was already determining which large image to associate with the thumbnail?

 

Could you clear my vision a bit, and perhaps explain how can i do that.

 

Also I'm sure Lightbox 2 must be amazing but I just want to learn this way first before I go the easy way, don't take me wrong though.

Thanks for the help.

[maxudaskin]

Check out Lightbox 2. It's free, requires no PHP, and will make your website look awesome!

 

This doesn't solve anything. You still need to determine which large image is associated with which small image.

 

Negative. It automatically makes a thumbnail using javascript.

[scootstah]

Check out Lightbox 2. It's free, requires no PHP, and will make your website look awesome!

 

This doesn't solve anything. You still need to determine which large image is associated with which small image.

 

Negative. It automatically makes a thumbnail using javascript.

 

Then it's not a thumbnail, it's just a scaled image.

[midnit]

maxudaskin my friend you are the man!!!!!!!!!!! thank you so much it works!!!!!!!! so many hours living as a blind and then bang!!!!

 

Ok so this is what i ended up doing. I went back and created two tables again so the first table stores the thumb_id, thumb_title, thumb_path and the second table stores the image_id and the image_path

 

this is the code that retrieves all the thumbnails (if any) stored in the server folder using the path stored in the db:

 

//retrieves data from mysql
$data = "SELECT * FROM thumbs";
$output = mysqli_query($link, $data);

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

while($info = mysqli_fetch_assoc($output)) {

echo '<h3>'.$info['thumb_title'].'</h3>';
echo '<p><a href="large_image.php?id='.$info['thumb_id'].'">';
echo '<img src='.$info['thumb_path'].'></a></p>';
}

 

and this is the code i've used in the 'large_image.php':

 

<?php
require_once 'includes/config.php'; 

$link = mysqli_connect(
		$config['db_host'],
		$config['db_user'],
		$config['db_pass'],
		$config['db_name']);

if (mysqli_connect_errno()) {
    exit('Sorry, there has been an error. Please try again later.');
}

if(isset($_GET['id'])) {

$id = ($_GET['id']);
$sql2 = "SELECT * FROM images WHERE image_id = '$id'";
$result2 = mysqli_query($link, $sql2);

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

$info = mysqli_fetch_assoc($result2);

echo '<p><a href="index.php"><img src='.$info['image_path'].'></a></p>';

}

?>

 

As you can see, if there is any thumbnail in the server will be displayed as a link to a larger version of the same, once on the 'large_image.php' the user can click on the image to go back to the index.php and choose another image. Of course there is still a lot to do, style, arrange and make better but its a start.

 

Thank you for your help maxudaskin it would've taken me longer without your help.

 

 

[maxudaskin]

It wasn't me. You did the work. I only gave you the spark.

[scootstah]

maxudaskin my friend you are the man!!!!!!!!!!! thank you so much it works!!!!!!!! so many hours living as a blind and then bang!!!!

 

Ok so this is what i ended up doing. I went back and created two tables again so the first table stores the thumb_id, thumb_title, thumb_path and the second table stores the image_id and the image_path

 

this is the code that retrieves all the thumbnails (if any) stored in the server folder using the path stored in the db:

 

//retrieves data from mysql
$data = "SELECT * FROM thumbs";
$output = mysqli_query($link, $data);

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

while($info = mysqli_fetch_assoc($output)) {

echo '<h3>'.$info['thumb_title'].'</h3>';
echo '<p><a href="large_image.php?id='.$info['thumb_id'].'">';
echo '<img src='.$info['thumb_path'].'></a></p>';
}

 

and this is the code i've used in the 'large_image.php':

 

<?php
require_once 'includes/config.php'; 

$link = mysqli_connect(
		$config['db_host'],
		$config['db_user'],
		$config['db_pass'],
		$config['db_name']);

if (mysqli_connect_errno()) {
    exit('Sorry, there has been an error. Please try again later.');
}

if(isset($_GET['id'])) {

$id = ($_GET['id']);
$sql2 = "SELECT * FROM images WHERE image_id = '$id'";
$result2 = mysqli_query($link, $sql2);

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

$info = mysqli_fetch_assoc($result2);

echo '<p><a href="index.php"><img src='.$info['image_path'].'></a></p>';

}

?>

 

As you can see, if there is any thumbnail in the server will be displayed as a link to a larger version of the same, once on the 'large_image.php' the user can click on the image to go back to the index.php and choose another image. Of course there is still a lot to do, style, arrange and make better but its a start.

 

Thank you for your help maxudaskin it would've taken me longer without your help.

 

 

 

I may be wrong, but I believe this code will rely on the fact that thumb_id and image_id remain the same. If you are AUTO_INCREMENT'ing both fields, that may quickly become troublesome.