Suggest lightbox script that works with <img src="script.php" />?

Question

I have a PHP script which dynamically generats images on each request. These images are not saved on server. to do this, I use the following html

<img src="script.php?parameter1=foo&parameter2=bar" width="50" height="50" />

This fires off an request to script.php; which dynamically creates the images based on parameters & just echo image data in following format:

$img = customFunction_generate_report_image($_POST['parameter1'],$_POST['parameter2']);
header('Content-type: image/png');
echo $img;

This works & displays image in browser as expected. Now, I want to implement a lightbox so, when the user clicks on the image in broswer. the image expands & gets displayed in lightbox.

Normally, I use Colorbox for lightbox but I think it expects as <img src="foo.png" and moreover, it seem to make addititonal request to server.

I want a method using which existing image in dom can be used for lightbox. Any pointer on how to accomplish this would appreciated.

Thanks

Solution 1

You can do that with colorbox. If you are already using that elsewhere in your site, mine as well keep with it. And it can work without making another request to the server for the image (the first time the colorbox is opened, however, it does make a request for the overlay.png file). There is an option to use photos with a .php extension, but I have had more success just using the inline:true option, which tells colorbox to pull the content from what's already there.

In your case, there is a little more work involved. Normally you could do it with just the one tag, but you have a small image in the page content, then also need a larger size in the modal window. So you need the thumbnail image tag itself, and also a larger image tag that colorbox will use. But as long as both src attributes are the same, there should be no problem with multiple requests. Your thumbnail image tag would include a reference to the colorbox image tag, which I've done here with data-cb:

<img src="script.php?parameter1=foo&parameter2=bar" width="50" height="50" data-cb="img1-colorbox">

And then for the colorbox content (can be anywhere in the page, as it is not visible outside of the colorbox):

<div class="colorboxContent"> <!-- this class is given the rule "display:none" -->
    <img id="img1-colorbox" src="script.php?parameter1=foo&parameter2=bar">
</div>

Should you need html to go with the image, then you only need to wrap that <img> tag with a <div> and move the id into that wrapper. And the js for the colorbox:

$(document).ready(function() {
    $("[data-cb]").colorbox({
        inline:true, 
        href:function() { return "#" + $(this).data("cb") }
    });
});

Solution 2

I've always found FancyBox to be a really nice lightbox, with good docs too.

It will cope with your situation just fine.