PHP Links and Thumbnails

[Casedy76]

Hi,

 

Just a quick overview - I am creating a basic gallery that displays images that are located in a folder. 

 

The main thing I need help with is how to make it so when a user clicks on the thumbnail, it displays the larger image.

 

The thumbnail images are located in "images/gallery/flowers/thumbs" and the main larger images are located in "images/gallery/flowers"

 

The PHP code i have so far is - 

 

 

<?php

$dirname = "images/gallery/flowers/thumbs";
$images = scandir($dirname);
$ignore = Array(".", "..", ".DS_Store");
foreach($images as $curimg){
if(!in_array($curimg, $ignore)) {
echo "<img style='vertical-align: middle; float: right'; title='$curimg'; src='images/gallery/flowers/thumbs/$curimg'; /><br>\n";
};
}
?>

 

Any help would be appreciated and thanks!   

[applebiz89]

Depends how you want to enlarge the image - you won't be able to do it with just PHP. Look into using the Fancybox or Lightbox plugin - http://fancybox.net/

 

It's as simple as pointing to the larger image and putting a class on your image tag - the plugin will do the rest

[Casedy76]

Hi,

 

Yes it would need to be the lightbox plugin. Just Ive tried linking it into the code but it will only link one image so when i click on the thumbnail of image 2 say it would link it to image 1 still. Would i need to do separate php codes for each image in the folder? 

[TOA]

Hi,

 

Would i need to do separate php codes for each image in the folder? 

 

That or wrap it in a function so it's re-usable. But as far as I can tell that's not what your original question was. Maybe I'm reading it wrong

Edited July 9, 2013 by TOA

[Casedy76]

The problem is the php code I have searches the folder and then displays all the thumbnails. If i wanted to link each thumbnail to its larger image I don't see how this can be done using "a href=" as it would apply to all the images instead of just one.

 

So if i was to do <a href='images/gallery/flowers/01-Flowers.jpg' rel='lightbox[gallery]' > it would make all the thumbnails link to that larger image instead of just the first one. 

 

 

Anybody have any ideas? 

[Casedy76]

Basically I just need to know what code to put at the end of the code i already have so it will link all the thumbnail images to their larger ones when clicked on   if thats possible of course

[litebearer]

hint:

<a href="<?php echo PATH large_image; ?>" target="_blank"><?php echo PATH thumb_image; ?></a>

use  $curimg for both the large image as well as the thumb, simply insert the appropriate path.

Edited July 9, 2013 by litebearer

[Casedy76]

Hi litebearer, 

 

Im new to all this so Im confused what I would have to do with that code. I could barely do the code i already have as I find this so confusing

 

I have this so far which just searches for the images and displays them. How would I edit that so it links all the thumbnails which display to the larger images when clicked on? 

 

 

<?php

$dirname = "images/gallery/flowers/thumbs";
$images = scandir($dirname);
$ignore = Array(".", "..", ".DS_Store");
foreach($images as $curimg){
if(!in_array($curimg, $ignore)) {
echo "<img style='vertical-align: middle; float: right'; title='$curimg'; src='images/gallery/flowers/thumbs/$curimg'; /><br>\n";
};
}
?>

Edited July 10, 2013 by Casedy76

[Casedy76]

I need this done for tomorrow and its bashing my brains out! Any ideas anyone

[mac_gyver]

you are trying to build a link - <a href="some_url">some_content</a> where the some_url is the corresponding url of the large image and the some_content is your <img ...> tag of the thumbnail. your code is already producing the <img ...> tag, just output the <a ...></a> tag/link around it.

[Casedy76]

Mac I still am confused here, you would be a life saver if you could quickly adjust the code I have so it corresponds to what you just said!

[Casedy76]

This is what you meant?

 

 

<?php
$dirname = "images/gallery/flowers/thumbs";
$images = scandir($dirname);
$ignore = Array(".", "..", ".DS_Store");
foreach($images as $curimg){
if(!in_array($curimg, $ignore)) {
echo "<a href='images/gallery/flowers/01-Flowers.jpg'><img style='vertical-align: middle; float: right'; title='$curimg'; src='images/gallery/flowers/thumbs/$curimg'; /></a><br>\n";
};
}
?>

As it works but when i click on say the second or third flower thumbnail it is liked to the first flower image. So say I have 10 flower thumbnail images displayed on the page, when i click on a random one is always displays the larger image of the flower 1 instead of the corresponding flower.

 

Any ideas?

[litebearer]

Replace this

echo "<img style='vertical-align: middle; float: right'; title='$curimg'; src='images/gallery/flowers/thumbs/$curimg'; /><br>\n";

with this

?>
<a href="images/gallery/flowers/<?php ech $curimg; ?>" target="_blank">
<img style="vertical-align: middle; float: right"; title=<?php echo '$curimg; ?> src="images/gallery/flowers/thumbs/<?php ech $curimg; ?>">
<br>\n";
</a>
<?php