How to

How to:

I assume that you know how to use LightBox 2.0 and you are able to configure the Carousel. I tested it with Chrome 0.2, Firefox 3, IE 7, and Opera 9. Please report any error.

Notice that I'm using LightBox 2.04 and I made a minor change in the lightbox.js: I need a reference to the main instance of the Lightbox class in order to call the start() method to show an image. I replaced the very last line of lightbox.js with this two lines:

var mainLightbox = null;
document.observe('dom:loaded', function () { mainLightbox = new Lightbox(); });

I hope that in LightBox 2.05 the main instance of Lightbox class will be available without tweaks.

Step 1

Create your LightBox anchors as usual: single images or sets.

If you want to hide them, simply put them in a div whose css style has "display: none". Hide them now.

Step 2

Assign an id attribute to each lightboxed anchor:

<a id="anchor1_id" href="flowers/DCP_0730.jpg" rel="lightbox[set1]"><img src="flowers/thumb_DCP_0730.jpg" alt="photo1" /></a>
<a id="anchor2_id" href="flowers/DCP_0731.jpg" rel="lightbox[set1]"><img src="flowers/thumb_DCP_0731.jpg" alt="photo1" /></a>
<a id="anchor3_id" href="flowers/DCP_0732.jpg" rel="lightbox[set1]"><img src="flowers/thumb_DCP_0732.jpg" alt="photo1" /></a>

Step 3

You can make an image inside the Carousel behave like an anchor for LightBox using it's id.

In the .xml Carousel configuration file you should link each image to a javascript call that simulates the click on a specific anchor passed as parameter:

<photo href="javascript:aclick('anchor1_id')" target="_self">flowers/DCP_0730.jpg</photo>
<photo href="javascript:aclick('anchor2_id')" target="_self">flowers/DCP_0731.jpg</photo>
<photo href="javascript:aclick('anchor3_id')" target="_self">flowers/DCP_0732.jpg</photo>

Function aclick() should be defined (e.g., after the body tag of the page) as follows:

function aclick(anchor_id) {
    var a = document.getElementById(anchor_id);
    mainLightbox.start(a);
}

The start() method of the Lightbox class let the Lightbox popup as if the user clicked on the anchor provided as parameter.

---

Remarks:

1. As already mentioned, if you don't want to see the html lightbox anchors in your page simply put them in a hidden div (use css). This way you can make a full window Carousel work with LightBox. Remember that in this case you don't need nice thumbnails inside the anchors: even simple text will be ok.
2. For the sake of clarity: LightBox does not interact with the Carousel at all. Indeed not even the Carousel interact with LightBox, it just call a js function. The js function acts as a bridge between the Carousel and LightBox. It's up to you to give correct ids to anchors and ensure that the Carousel call the js function with a proper parameter so that everything works fine.
3. By default LightBox hides Flash objects (all objects and embed tags actually) while it shows images. It does this because otherwise objects would render over the lightboxed images. With flash objects you can avoid this: you can set the "wmode" to "opaque" (or "transparent") instead of "window" (the default). Now, in order to prevent LightBox to hide objects you have to hack the file lightbox.js: you should comment the first line of the start() method (line 205 in lightbox.js version 2.04) and the list line of the end() method (line 441 in lightbox.js version 2.04). You can download my version of lightbox.js. I hope that in future versions of LightBox there will be a way to control this behavior without tweaks.

Enjoy,
  Saverio