Jump to content

PHP Links and Thumbnails


Casedy76

Recommended Posts

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!  :happy-04:  :happy-04:

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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 :shrug:

Edited by TOA
Link to comment
Share on other sites

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?  :confused:

Link to comment
Share on other sites

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 by litebearer
Link to comment
Share on other sites

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 by Casedy76
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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


 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.