Question

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'] . '&photo=' . $thumb['id'];

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

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

Answer 1

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.