Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile PHP Thumbnail Links

    Hi,


    Just a quick overview - I am creating a basic gallery that displays thumbnail 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";
    };
    }
    ?>


    This code searches the folder and displays the thumbnails so I just need to know what code to put in there somewhere so the thumbnails can link to the larger images.


    Any help would be appreciated as I'm very new to this and thanks!

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    Look at how I've done it on this Example page.

    http://www.myphotowizard.net/Example...mon/index.html

    Notice that the img tags have a class, which makes the coding easier. Also the function called by clicking the thumb has size information, which you may not need, but can get with the 'getimagesize function of php.

    You can make an album just like it at the 'Make an old fashioned thumbnail album' page.
    Last edited by DrDOS; 07-10-2013 at 04:31 PM.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi DrDOS,

    The problem is I have to do it all in PHP and not HTML. Would it be possible to do this with the code i already have by adding some "a href" code onto it somehow or what would be another solution?

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    Quote Originally Posted by Spray76 View Post
    Hi DrDOS,

    The problem is I have to do it all in PHP and not HTML. Would it be possible to do this with the code i already have by adding some "a href" code onto it somehow or what would be another solution?
    You mean you can't change any of the HTML on the page, you have to use it 'as is' ? In that case you can use the 'window.open' method of javascript, slower and not as neat, but it still works.
    PHP Code:
    echo "<img style='vertical-align: middle; float: right'; title='$curimg'; src='images/gallery/flowers/thumbs/$curimg'; onclick="window.open('bunch of stuff goes here');"/><br>\n"
    You can find a good description of it at the w3schools.

    On second thought it occurs to me that if you have php you can echo in the div and big image tags required, and all the javascript too, so that your page will have everything needed for the modal window method to work.
    Last edited by DrDOS; 07-10-2013 at 04:59 PM.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #5
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can change the HTML just I cant use fully HTML as in using something like this -

    <a href="images/gallery/flowers/01-Flowers.jpg" rel="lightbox[gallery]" title="01-Flowers"><img src="images/gallery/flowers/thumbs/01-Flowers.jpg" alt="Alt Tag Info" /></a>
    <a href="images/gallery/flowers/02-Flowers.jpg" rel="lightbox[gallery]" title="02-Flowers"><img src="images/gallery/flowers/thumbs/02-Flowers.jpg" alt="Alt Tag Info" /></a>
    <a href="images/gallery/flowers/03-Flowers.jpg" rel="lightbox[gallery]" title="03-Flowers"><img src="images/gallery/flowers/thumbs/03-Flowers.jpg" alt="Alt Tag Info" /></a>
    <a href="images/gallery/flowers/04-Flowers.jpg" rel="lightbox[gallery]" title="04-Flowers"><img src="images/gallery/flowers/thumbs/04-Flowers.jpg" alt="Alt Tag Info" /></a>
    <a href="images/gallery/flowers/05-Flowers.jpg" rel="lightbox[gallery]" title="05-Flowers"><img src="images/gallery/flowers/thumbs/05-Flowers.jpg" alt="Alt Tag Info" /></a>

    That would solve the problem and link the thumbnails to the larger images, just I have to use PHP to do it instead

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    Quote Originally Posted by Spray76 View Post
    Can change the HTML just I cant use fully HTML as in using something like this -

    <a href="images/gallery/flowers/01-Flowers.jpg" rel="lightbox[gallery]" title="01-Flowers"><img src="images/gallery/flowers/thumbs/01-Flowers.jpg" alt="Alt Tag Info" /></a>
    <a href="images/gallery/flowers/02-Flowers.jpg" rel="lightbox[gallery]" title="02-Flowers"><img src="images/gallery/flowers/thumbs/02-Flowers.jpg" alt="Alt Tag Info" /></a>
    <a href="images/gallery/flowers/03-Flowers.jpg" rel="lightbox[gallery]" title="03-Flowers"><img src="images/gallery/flowers/thumbs/03-Flowers.jpg" alt="Alt Tag Info" /></a>
    <a href="images/gallery/flowers/04-Flowers.jpg" rel="lightbox[gallery]" title="04-Flowers"><img src="images/gallery/flowers/thumbs/04-Flowers.jpg" alt="Alt Tag Info" /></a>
    <a href="images/gallery/flowers/05-Flowers.jpg" rel="lightbox[gallery]" title="05-Flowers"><img src="images/gallery/flowers/thumbs/05-Flowers.jpg" alt="Alt Tag Info" /></a>

    That would solve the problem and link the thumbnails to the larger images, just I have to use PHP to do it instead
    You like that buggy lightbox thing? I find it slow and awkward, and it uses divs in a strange way that interferes with the rest of the page.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #7
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have to use it so yeah its decent lol.

    But do you see what Im saying? Need to do it in PHP instead of just HTML.

    Ive put a href in so its now-


    <?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";
    };
    }
    ?>


    Just when i click on any of the images they all direct to 01-Flowers.jpg. Any ideas on how i can get each thumbnail to displays it corresponding larger image?

  • #8
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    PHP Code:
    echo "<a href='images/gallery/flowers/$curimg'><img style='vertical-align: middle; float: right'; title='$curimg'; src='images/gallery/flowers/thumbs/$curimg'; /></a> 
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •