We all like Lightbox, so here is a port of the Lightbox 2 project to YUI. For those of you who have never heard of Lightbox, it's a way to show a modal overlay with the content on the same page you're currently on rather than having to navigate to a separate page. Currently I support everything the Lightbox 2 project supports (which includes single images and grouped images and the ability to rotate through them). In the future, I expect
Example
Click on one of the images below to see Lightbox in action.
<link rel="stylesheet" href="/media/system/js/yui3-gallery/gallery-lightbox/assets/skins/sam/gallery-lightbox-skin.css" type="text/css" />
<ul class="demo">
<li><a rel="lightbox[boston]" title="This is a caption, just set the 'title' attribute of the link." href="/images/yui-gallery-lightbox/race.jpg"><img src="/images/yui-gallery-lightbox/race_thumb.jpg" /></a></li>
<li><a rel="lightbox[boston]" title="Notice that Lightbox resizes when it switches images." href="/images/yui-gallery-lightbox/wide.jpg"><img src="/images/yui-gallery-lightbox/wide_thumb.jpg" /></a></li>
<li><a rel="lightbox[boston]" title="Go Red Sox! :)" href="/images/yui-gallery-lightbox/stadium.jpg"><img src="/images/yui-gallery-lightbox/stadium_thumb.jpg" /></a></li>
<li><a rel="lightbox[boston]" href="/images/yui-gallery-lightbox/world_series.jpg"><img src="/images/yui-gallery-lightbox/world_series_thumb.jpg" /></a></li>
</ul>
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI({
modules: {
"gallery-lightbox": {
fullpath: "http://projects.sophomoredev.com/media/system/js/yui3-gallery/gallery-lightbox/gallery-lightbox.js",
requires: ["base", "anim", "node"]
}
}
}).use("gallery-lightbox", function (Y) {
// that's it!
Y.Lightbox.init();
});
</script>
Usage
Setting up and using Lightbox is quite simple. You need to download the necessary files, which can be found here or you can pull them from Github.
Included in this download is the main JavaScript file, gallery-lightbox-min.js file as well as the css and images that go with it.
The first step is to get those files and put them in the correct location. From there, you can add the following snippet of code to your page and you're all set:
After this, you just need to add rel="lightbox" to links that you want Lightbox to open. Keep in mind that for now Lightbox will only handle images as of right now (support for arbitrary content is coming).
<a href="/myImage.jpg" rel="lightbox" title="the caption goes here">link for my image</a>
If you want to group related images together, that's simple. You just need to add a grouping to the rel attribute with the grouping in brackets. So rel="lightbox" becomes rel="lightbox[grouping]". Here's an example:
YUI Gallery Lightbox
