YUI Based Lightbox - Revisited
YUI Lightbox
YUI Lightbox with Dependencies
Download YUI 2.3.0
Run Online demo
Note: This script has been updaed
In the previous article of YUI based lightbox, I've shown you how easily one can create a lightbox using YUI's Dialog class. Although the lightbox we created in the previous article has the basic skeleton of a lightbox, it still lacks some crucial features and it looks quite ugly. Luckily YAHOO released YUI 2.3.0 not long ago, which included an eye candy skin (sam) that is more attractive than one bundled by default. We will use the new skin for the revised lightbox. Since we don't need all the features provided by the Dialog class (e.g., submitting data), I replaced the Dialog class with Panel for the container class of the new lightbox.
A picture is worth a thousand words, so here is a screen shot of our new lightbox:
I might have mentioned this before, but I couldn't address enough the helpfulness of a JavaScript framework in dealing with cross-browser compatibility issues. By using a framework, the new lightbox is compatible with majority A-Graded browsers and it was created with minimal effort. Once again, it has been tested in the following browsers: Firefox 2.0.0.6, Netscape 8.1, IE 6, IE 7, Mozilla 1.7.13, Opera 9.21.
The lightbox incorporated many new features, along with old features such as drag and drop, it has an image preloader, it can scale large images to fit the window, it has a maximum button that allows you to inflate scaled images. You can even double click on the title bar to switch between maximized and scaled mode (for images that are larger than browser's window area). You can also hide the lightbox conveniently by clicking on the image.
Note: This version of lightbox is specifically designed for viewing images. If you need to place HTML contents, check my previous article.
Step 0: Dependencies
YUI 2.3.0 or greater. Download
Step 1: Installation
Include the following files to your HTML page, keep the JavaScript files in that order:
- [path-to-yui]/yahoo-dom-event/yahoo-dom-event.js
- [path-to-yui]/dragdrop/dragdrop-min.js
- [path-to-yui]/container/container-min.js
- [path-to-lightbox]/Lightbox.js
- [path-to-yui]/assets/skins/sam/container.css
Step 2: Create a data source
The data source is simply a JavaScript object that consists of many tuples, and each tuple contains information of the image which we are going to attach a lightbox to. A tutple has the following format:
imageId : {url: pathToImage, title: titleOfTheImage}
URL specifies the location of the actual image. The title is an optional attribute. Here is an example of data source:
var dataSource = {
image1:{url:"photos/rocks.jpg", title: 'Rocks'},
image2:{url:"http://thecodecentral.com/yui.jpg"}
};
Step 3: Create the corresponding HTML markup:
<img src="photos/rocks-small.jpg" id="image1"/> <img src="http://thecodecentral.com/yui-small.jpg" id="image2"/>
Above HTML code creates two thumbnail images of the original images. Note that each image has an ID attribute, which is corresponding to the ID attribute in the data source we created earlier. This ID has to be unique, or otherwise the lightbox won't be able to locate this image.
Step 4: Instantiate a Lightbox Object
var lightbox = new YAHOO.com.thecodecentral.Lightbox({
imageBase:'js/lightbox',
dataSource: dataSource
});
Call the Lightbox's constructor to create a new instance. The constructor takes a configuration object, which contains two attributes:
imageBaseis the path to the images that are needed to render the Lightbox class. Normally this is the same as the location where the lightbox.js resides. You must not add any tailing slash to this attribute.dataSourceis discussed here.
You are done! That's all you need to do for our lightbox to function.
The Complete Source Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/container.css" />
<script type="text/javascript" src="js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/yui/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="js/yui/container/container-min.js"></script>
<script type="text/javascript" src="js/lightbox/Lightbox.js"></script>
<script type="text/javascript">
//defer the instantiation of Lightbox. Call when the page has finished loading.
init = function(){
//creating a data source object
var dataSource = {
image1:{url:"photos/rocks.jpg", title: 'Rocks'},
image2:{url:"http://thecodecentral.com/yui.jpg"}
};
//Instantiate a Lightbox object
var lightbox = new YAHOO.com.thecodecentral.Lightbox({
imageBase:'js/lightbox',
dataSource: dataSource
});
}
YAHOO.util.Event.on(window, 'load', init);
</script>
</head>
<body>
<img src="photos/rocks-small.jpg" id="image1"/>
<img src="http://thecodecentral.com/yui-small.jpg" id="image2"/>
</body>
</html>
A few things to keep in mind if you have problems:
- When instantiating a Lightbox class, please remember that not to add any tailing slash to the
imageBaseattribute. - The order of which the JavaScript files are included matters.
- It is always a good idea to defer the instantiation by attaching the instantiation scrip to browser's onload event. That's exactly what this line does:
YAHOO.util.Event.on(window, 'load', init);. - This lightbox class is still in beta. Although I have tried my best effort to make it bug free, it is practically impossible to do so.
- I check comments regularly. Bug report, feature request or suggestions are welcome. Just post them in the comment section.
Related Readings
What's Next
More interesting posts ...
Leave a Comment
If you would like to make a comment, please fill out the form below.
If you want to post source code, please wrap it with <pre> and </pre>
Loading ...
[...] Improved YUI Based Lightbox [...]
[...] con casi todos los frameworks del famoso lightbox, pero aún no habÃa nada sobre Yahoo UI!. Con YUI Lightbox añadimos este framework a la lista de versiones de Lightbox.[Demo][Descargar] Compártelo # [...]
i couldn't get it to work ...
may be i'm messing something up somewhere ...
hehe ...
its really a great application...
To subcorpus:
There isn't enough information to help you. Mind posting your markup/script or a URL to a functional example?
[...] YUI kutuphanesini kullanarak Lightbox efekti [...]
[...] shows how you can make a lightbox using YUI’s Dialog class. It has many features. Check it out at http://thecodecentral.com/2007/08/17/yui-based-lightbox-revisit [...]
[...] User Interface Javascript Kütüphanesi ile ??k Lightbox uygulamalar? geli?tirebilirsiniz. Code Central taraf?ndan yay?nlanan YUI Lightbox, geli?mi? birkaç özelli?e sahip. Mesela sürükle-b?rak [...]
Dragging the image to the left outside of the viewport and releasing mouse button while the mouse pointer was no longer over the browser, left the image inaccessible.
To George:
Thank you for reporting this. I'll fix it in the next release.
Bug:
Using FF2.0.0.6 with cookies disabled.
What Happened:
I clicked on the "Run Online Demo" link above. I then clicked on the mountain-lake image. My browser window was big enough to hold the largest of the image panels. However, vertical and horizontal scroll bars appeared.
What I expected:
The scroll bars should not appear unless the panel is too big.
Ciao!
Instead of loading 4 YUI files (1 css & 3 JS files) totalling 136 KB
container.css = 4 KB
yahoo-dom-event.js = 36 KB
dragdrop-min.js = 23 KB
container-min.js = 77 KB
TOTAL = 136 KB
just need to load 2 YUI files (1 css & 1 JS file) totalling 100 KB
container.css = 4 KB
utilities.js = 96 KB
TOTAL = 100 KB
and let Yahoo! serve them up...
Result:
1) 2 less HTTP requests
2) Smaller filesize (by 36 KB)
3) Yahoo! serves up the files gzipped, with good cache-control, using their state-of-the-art network, for free.
Are you sure that the YUI download you specified contains all the necessary files? I can't find any file called "Lightbox.js" in it.
So I tried using Slowhandz's approach but it doesn't work.
Any ideas?
Robert W.
You have to follow the link that says
YUI Lightbox
or
YUI Lightbox with Dependencies.
YUI alone does not contain Lightbox.js, instead it contains files that are needed by Lightbox.js to work. Check "The Complete Source Code" section in this post to see what are the files you need to include.
I haven't teseted Slowhandz's suggestion, but in theory it should work. utilities.js, which is a aggregate file of "the Yahoo Global Object, Dom Collection, Event Utility, Element Utility, Connection Manager, Drag & Drop Utility and Animation Utility."
So instead of including yahoo-dom-event.js, dragdrop-min.js, container-min.js, you can just include "utilities.js".
For more information, please visit: http://developer.yahoo.com/yui/articles/hosting/.
Edit: Sorry a mistake, you need container-min.js.
This lightbox jizzunk doesn't seem to work on http://emily.cowsandmilk.net/galleries.php?category=Oil
I'm using Blueprint to do the css for the grid and I think they're fighting like crazy or something...
never mind, I'm stupid, forgot the container css
Is there a simple way to generalize this to display non-photo data? I want to display some text within a lightbox, but this seems strongly bound to displaying only photos.
To David:
Glad to see another functional YUI based gallery. It looks really nice.
To hmartin:
My previous article on YUI Lightbox talked about this and one of the online examples demonstrated exactly what you need.
http://thecodecentral.com/2007/07/13/creating-lightbox-with-yahoo-user-interface-library
Hello,
We have created one site northernbeaches.tv and it having right hand side images and left hand side flash. but when I click on image then lightbox works properly but the problem is that partial image goes behind that flash object.
I have tested this with FireFox2.0 and for internet explorer 6.0 it working. I have another operating system linux+FF2.0 it also working but on Windows+FF2.0 it doesnt work. if he you help me then it will be best for me.
Thanking You.
Hi,
In my gallery I have only one image per page that is attached to the YUI Lightbox. It would be great if that lightbox image can be preloaded in the background (the full size image) to be ready to popup immediately after he clicks on the smaller image. It may be a useful feature and just perfect for me :)
Here is an example of my gallery page:
http://www.monetalia.com/paintings/monet-impression-sunrise.aspx
Thanks,
Milan
Whoops didn't see the new comment :( This is for Manish Runwal:
Try to add this parameter to your flash object:
wmode="transparent"
You can use this for reference (a random clip I grabbed from YouTube):
To Milan Jaukovic:
Thanks for the suggestion. I'll consider to add this as an optional feature in the next release. Remember this lightbox is still in beta, so be patient.
Cheer!
Horizontal Scroll - HELP?!?!?!
It seems i have finally found my long awaited solution to HORIZONTAL SCROLL issues with your version of the Lightbox feature. I use Lightbox V2.03 (huddletogether.com/projects/lightbox2/) because I like there image sets and transitions. However, my site uses a horizontal scroll navigation and the script im using doesnt include the overlay when u scroll to the right. I noticed your script accomplished this and i was wondering if you could point me to the code that displays the overlay when the lightbox is activated or more importantly, how to get my lightbox js script to display the overlay like yours.
Here is my test site: http://stu21o.com/v3s (there are 3 projects now for testing but there will be about 20)
Thank you so much for your time and possible solutions!
Sorry Levi, I don't have the code which displays the overlay since YUI's Panel class has taken care of it. What I did in my code was simply invoke buildMask method of the Panel class. If you still want to know more about how it works, I suggest you take a look at the source code, which can be found here.
Good luck!
Hi. Is it possible to instantiate multiple lightboxes in the same page? For example, I need to create a page dynamically with multiple sets of unrelated photos. I have tried this, but it seems that only the last instantiation of lightbox is effective (clicking on the photos of the previous sets results in the screen being masked, but no image and overlay container appear). If it can be done, would you mind responding with a little sample code. Thanks in advance.
Thanks for bringing this up. The problem is caused by multiple lightboxes using the same ID. I've changed the lightbox code slightly which allows you to specify the ID of the lightbox. Providing two unique IDs for each instantiation of the lgithbox, the code should work.
Download Modified Code
Sample code for instantiation:
var lightbox1 = new YAHOO.com.thecodecentral.Lightbox({ id: 'lightbox1', imageBase:'js/lightbox', dataSource: dataSource }); var lightbox2 = new YAHOO.com.thecodecentral.Lightbox({ id: 'lightbox2', imageBase:'js/lightbox', dataSource: dataSource });Hi. Thanks for your quick response. The enhancements work nicely. :)
Hi. I've a question by licence. Could I use this gallery also at commercial projects?
Yes, for more information about the license, please see http://creativecommons.org/licenses/by-sa/3.0/, and it can be found on top section of Lightbox.js.
Muy interesante la modificación sobre lightbox, hemos incluido una versión modificada.
Muchas gracias por el desarrollo.
http://www.profesionalnet.net
Hi!
Great script! Thank you for sharing.
Just a quick question. Is there a way to include a navigation between the images? That would be cool.
Unfortunately, this feature currently is not implemented. I'll put up a newer version of lightbox with navigation along other bug fixes after I finish the project I am doing right now.
[...] previous YUI implementation of the lightbox, which was released for beta evaluation, now has nearly gone gold. This page will be devoted for [...]
[...] Code Central has shown us how easily one can create a lightbox using YUI’s Dialog class. The lightbox incorporated many new features, along with old features such as drop and drag, it has an image preloader, it can scale large images to fit the window, it has a maximum button that allows you to inflate scaled images. You can even double click on the title bar to switch between maximized and scaled mode (for images that are larger than browser’s window area). You can also hide the lightbox conveniently by clicking on the image. [...]
[...] http://thecodecentral.com/2007/08/17/yui-based-lightbox-revisit [...]
This is my favorite lightbox. I think it has the most elegant implementation of all the options out there. I do have a tip/suggestion.
I sometimes need to call images with querystrings (eg Server-side resizing):
var lightboxSource = {
image1:{url:"/myimage.asp?img=123&width=300", title: 'Some Title'}};
If you care about document standards, you know that & needs to become %26
The problem is, when you Escape these characters, Lightbox will break. To fix this, you can UnEscape this string in Lightbox.js.
Around line: 110 in Lightbox.js you find:
image.src = r[o.imgId].url;
Change this to:
image.src = unescape(r[o.imgId].url);
Now you can use Lightbox, QueryStrings AND stay XHTML compliant.
Thank you for the tip, and be sure to checkout the latest version of this script at http://thecodecentral.com/2008/01/01/yui-based-lightbox-final. :)
[...] User Interface Javascript Kütüphanesi ile ??k Lightbox uygulamalar? geli?tirebilirsiniz. Code Central taraf?ndan yay?nlanan YUI Lightbox, geli?mi? birkaç özelli?e sahip. Mesela sürükle-b?rak [...]
[...] YUI based Lightbox for image gallery [...]
[...] YUI Based Lightbox - YUI Based Lightbox in Cool AJAX sites - a YUI based image gallery script. [...]
Hi folks!
It's great gallery! Thank you!
But I've a problem using it...
On my localhost everything works fine: as with Firefox and IE...
But on my web site IE drops an error: YAHOO udentified...
Maybe you could give me a solution , how to fix it?
website: http://www.tamsink.lt
Thank you in advance!
[...] YUI Lightbox | More Details [...]
[...] YUI Lightbox | ????????? [...]
[...] Slimbox, Smoothbox, SubModal, Suckerfish HoverLightbox Redux, SWFbox, Thickbox, TinyBox, YUI based lightbox [...]
[...] Â YUI Lightbox | detaylar [...]
It is a nice script. So I have added it in http://www.downloadjavascripts.com. Take care and keep generating nice stuff !!!!
How to use this script on wordpress ? For example, I want to make a gallery page, I want to create a dynamic gallery page
[...] YUI based lightbox [...]
beautiful !
[...] (Web Sitesi) (Download) 6-) YUI LightBox                        (Web Sitesi) (Download) 7-) SmoothBox                          (Web Sitesi) [...]