Search code examples
phpphoto-gallery

How to opening images on the same page?


I have an album plugin (php) that creates thumbnails for my images in one page and when i click on images opens each image in a new page.
Is there a way to opening images on the same page of thumbnails?

This is my code of thumbnails:

    <div class="thumbs">

        <?php foreach (wppa_get_thumbs() as $tt) :  global $thumb; $thumb = $tt; ?>
                <a href="<?php wppa_photo_page_url(); ?>" class="img"><img src="<?php wppa_thumb_url(); ?>" alt="*" /></a>
        <?php endforeach; ?>

    </div>


and this is the code of specific photo:

<?php } else if (wppa_page('single')) { // if is showing a specific photo ?>
    <a href="<?php wppa_photo_url(); ?>"><img src="<?php wppa_photo_url(); ?>" alt="<?php wppa_photo_name(); ?>" class="big" <?php echo wppa_get_fullsize(); ?> />
    </a><br />
<?php }  ?>

And this is the function that creates links:

// get link to photo
function wppa_photo_page_url($return = FALSE) {
    global $thumb;
    $url = get_permalink()  . wppa_sep() . 'album=' . $_GET['album'] . '&amp;photo=' . $thumb['id'];

    if ($return) {
        return $url;
    } else {
        echo $url;
    }
}

I tried to remove the link code but does not work.


Solution

  • It's actually very easy to do using plain javascript's Image object. You can have a function that does something like this:

    function load_image(image_path)
    {
       var image = new Image();
       image.src = image_path;
       return image;
    }
    

    You can pull the url to the image from the link that they click on.

    Then, append that image to a hidden div you have and make it visible. If you're using jQuery:

    var image = load_image("/path/to/your/image.jpg");
    $(image).appendTo("#your-image-div");
    $("#your-image-div").show();
    

    This is untested, but should work.