Question

I have to image with the following code:

  echo '<div class="thumb" style="width: '.$array['thumb_width'].'px; height: '.$array['thumb_height'].'px;">
            <a class="lightbox" width="72" height="72" href="showfile.php?image_id='.$array['before_image_id'].'" >
            <img src="showthumbs.php?image_id='.$array['before_image_id'].'"/">
            </a>

            <a class="lightbox" width="72" height="72" href="showfile.php?image_id='.$array['after_image_id'].'" >
            <img src="showthumbs.php?image_id='.$array['after_image_id'].'"/">
            </a>

            </div><p><p/>';

The issue is that it is displayed separately in the lightbox. I want it to show two image side by side in one lightbox.. How do I do this?

Answer 1

There are 2 options, depending on the lightbox you’re using:

1. Some lightboxes (colorbox, DOM window, facybox, thickbox) support loading html pages into an iframe rather than just images. If you can try loading html with the two tags into the lightbox.

2. If you have a lightbox that only supports images (like squarespace’s crappy lightbox) you may have to merge the images together using PHP’s GD library.
   See this question:
   Merge Two images together on Server, then save