YUI PhotoViewer - A LightBox application made with Yahoo User Interface YUI

There are a number of Lightbox applications out there based on jQuery, prototype and scriptaculous. But I wasn't able to find a similar product built on the YUI library, which in my opinion, is by far the best out there. So I started out creating a simple Lightbox. Right now there are gallery and standard modes plus an option to load photos from an external XML file. You can chose modal or not and there is a dragable option. This is just a BETA version, I am going to need help and time to get this compatible with all platforms/browsers.

See the demos here, here and here.
The current theme is "Default Theme", you can switch it by clicking here.

Releases

10/13/2007 - Version 0.93 BETA released.
10/2/2007 - Version 0.92 BETA released.
9/30/2007 - Version 0.9 BETA released. Major changes made, especially to the way galleries are configurated. See updated docs.
9/29/2007 - Version 0.8 BETA released
9/29/2007 - Version 0.7 BETA released
9/28/2007 - Version 0.6 BETA released
9/27/2007 - Version 0.1 pre BETA released

Known bugs

9/27/2007 - [FIXED] IE7 has numerous sizing issues. From what I can tell it arbitrarily mis-calculates the offsetHeight of the detailsHeight object (the description).
9/27/2007 - [FIXED] When YAHOO.lightBox.config.window.modal is set to false, the documents body overflow needs to stay default. Right now it is getting set to "hidden".
9/28/2007 - [FIXED] FIxed lightbox loading sequence. When the image loads, the loading screen gets removed, not just covered
9/28/2007 - [FIXED] Need to add scroll top to the image positioning.
9/28/2007 - No support for IE6 (working on this)

* Submit bugs by posting a comment to the article

Enhancements

9/27/2007 - [FIXED] Need to add different easing methods, all that are supplied by YUIs animation library. First round idea is to apply the same easing globally. YAHOO.lightBox.config.easing.default then later it can be more flexible
9/27/2007 - [FIXED] Use YUIs connection services to load the lightbox vs. using images in the current document.
9/27/2007 - [FIXED] Add a loading screen to the initial opening of the lightbox.
9/28/2007 - [FIXED] Allow for multiple gallerys, logically grouped by parent div's.
9/28/2007 - [FIXED] Allow for multiple url's, if a url is passed in it will override the config url.
9/28/2007 - [FIXED] Clicking on a thumbnail while that galleries lightbox is active will swap the current photo, not open another lightbox. Only one lightbox per gallery will be open.
9/28/2007 - [FIXED] Have an option to use a "fixed" version that resides in it's relative position in the DOM.
9/28/2007 - Need to create an example theme and document the CSS.
9/30/2007 - [FIXED] Add CSS selector for details div. Add class in configDisplay method.
9/30/2007 - [FIXED] Add next, prev and close as public methods to the start object.
9/30/2007 - Start on alternate content methods for remote load [swf, iframe and HTML].
9/30/2007 - [FIXED] RE-write documentation (it's crap).
10/1/2007 - [FIXED] Created first theme "Minimal Black".
10/2/2007 - Make an available "min" version for better performance.
10/2/2007 - Quick start feature added. No need to set up a config file. If a config is not setup, it uses defaul settings: create a gallery in lightbox mode for each div with the class lightBoxContainer.
10/13/2007 - Added slideshow mode and also paging buttons. Fixed loader positioning

* Submit enhancements by posting a comment to the article

Download

Download the ZIP file here. (v0.93 BETA)

Installation

Link the lightBox.css file, found in the assets directory. You will need 3 files from the YUI 2.3.1 library, they are found in the ZIP file. Be sure to add them first, into the head of you document. To run the examples on this site, simply extract the files to you web root.

<link rel="stylesheet" type="text/css" href="assets/css/lightBox.css" />
<script type="text/javascript" src="yui-2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui-2.3.1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="yui-2.3.1/build/animation/animation-min.js"></script>
<script type="text/javascript" src="yui-2.3.1/build/connection/connection-min.js"></script>

Then link the lightBox.config.js file, this is the file you can modify to change configuration.

<script type="text/javascript" src="assets/dom/lightBox.config.js"></script>
<script type="text/javascript" src="assets/dom/lightBox.js"></script>

Now for the mark up. All you images need to go into a DIV container with the class "lightBoxContainer". Place you images in this container and wrap them in an anchor tag. Make syre the href has a "void(0)" or "javascript:;". Check the documentation section for the mark-up properties and thier meanings.

<div class="lightBoxContainer">
	<a href="javascript:;">
		<img
			src="[Path to thumbnail]"
			longdesc="[Path to zoomed sized photo]"
			title="[Image title]"
			alt="[Image Description]"
			class="lightBox" />
	</a>
</div>