YUI Based Lightbox - Final
Download Latest Source Code | change log
Download YUI
Thumbnail-less demonstration
Thumbnail-enabled demonstration
Create your own
My previous YUI implementation of the lightbox, which was released for beta evaluation, now has nearly gone gold. This page will be devoted for upcoming updates and bug fixes. So if you've found any bugs, feel free to report them in the comment section of this post.
Also, I would like to thank many who reported bugs and gave feedbacks after the release of previous image lightbox. As many have requested, I implemented navigation for the new lightbox. In addition to the navigation, numerous new features have been added and bugs have been fixed.
What's New
The most significant change in this version of the lightbox is that image thumbnails are no longer required for creating lightbox instance. That implies that you can create an image gallery without the presence of image thumbnails. The more exciting aspect of this new feature is that you can virtually grab any image from the internet and include it in your gallery. Test-drive this new feature.
Below is the detailed list:
- Ability to view full size and auto-fit version of the image
- Settings for changing background mask opacity and color
- keyboard shortcuts
- Tooltip panel for displaying extra information
- Navigation control toolbar
- Image transition effect
- External stylesheet for styling
Bug Fixes
- Fixed image goes outside of viewport bug
- Removed extra scrollbar when the image can be fit into the viewport
The lightbox has been tested in Firefox 2.0.0.6, IE 7, Opera 9.21.
Installation
Download the latest lightbox source and unpack it to your project directory.
Include the following files to your page:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/assets/skins/sam/skin.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/utilities/utilities.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/container/container-min.js"></script> <link rel="stylesheet" type="text/css" href="[PATH_TO_LIGHTBOX]/lightbox/lightbox.css"> <script type="text/javascript" src="[PATH_TO_LIGHTBOX]/lightbox/Lightbox-min.js"></script>If you prefer to serve above files locally, you can download YUI from here.
JavaScript Code
First, create a data source object to represent the photo gallery:
var dataSource = {
image1:{url:"photos/1.jpg", title:"hi", text: "shot"},
image2:{url:"photos/2.jpg", title: "tes"}
image3:{url:"photos/3.jpg"}
//...and so on
};
If you need to add more images to the gallery, simply add more tuples to the data source. For each tuples, attributes title and text are optional.
After data source object has been created, you can instantiate an instance of the lightbox:
var lightbox = new YAHOO.com.thecodecentral.Lightbox(dataSource);
To show the lightbox, simply call
lightbox.show(); or lightbox.show(imageId);
That's all.
Putting Everything Together
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/assets/skins/sam/skin.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/utilities/utilities.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/container/container-min.js"></script>
<link rel="stylesheet" type="text/css" href="[PATH_TO_LIGHTBOX]/lightbox/lightbox.css">
<script type="text/javascript" src="[PATH_TO_LIGHTBOX]/lightbox/Lightbox-min.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/2.jpg", title:"hi", text: "shot"},
image2:{url:"photos/4.jpg", title: "tes"}
//and so on
};
//Instantiate a Lightbox object
var lightbox = new YAHOO.com.thecodecentral.Lightbox(dataSource);
}
YAHOO.util.Event.on(window, 'load', init);
</script>
Optional Settings
If you are not happy with the default settings that bundled with the lightbox, feel free to modify them at your will. Here's a list of settings you can modify:
| Name | Default Value | Description |
|---|---|---|
| id | tcc_showImgPanel | Set HTML ID attribute of the lightbox. Used only when create multiple instances of lightbox |
| maskOpacity | Set by YUI | Opacity of the background mask |
| maskBgColor | Set by YUI | Color of the background mask |
| modal | true | Set this to true will block user inputs to other elements below the mask |
| hasThumbnails | true | If set to true, the lightbox will attach click event to images which IDs are specified in the data source |
| ctrlVisible | true | Visibility of the control panel |
| ctrlOpacity | .5 | Control panel's opacity |
| effect | true | Fade in effect between images |
| effectDuration | 1 | Effect duration in second |
| tooltip | true | Visibility of the tooltip |
| tooltipOpacity | .9 | Opacity of the tooltip |
Example:
//Instantiate a Lightbox object
var lightbox = new YAHOO.com.thecodecentral.Lightbox(dataSource, {
id: 'showtcc',
maskOpacity: .8,
maskBgColor: '#000',
modal: true,
hasThumbnails: true,
ctrlVisible: true,
ctrlOpacity: .5,
effect: true,
effectDuration: 1,
tooltip: true,
tooltipOpacity: .9
})
Styling the Lightbox
You can style the lightbox by editing lightbox.css, which can be found under the lightbox distribution. If you are a CSS guru, things would be self-explanatory.
Image Preloading
Since RC2, you are given the ability to preload images before bringing up the lightbox. Preloading images is easy, simple call preloadAll() method on the lightbox instance:
lightbox.preloadAll();
If you want to be notified during the preloading process, you can subscribe to the following events:
- preloadStartEvent - fired before preloading of single image
- preloadCompleteEvent - fired after preloading of single image
- preloadCompleteEvent - fired when all images have been preloaded
You don't need to to subscribe to all them, just the ones you are interested at. Here's a code snip on how:
lightbox.lightboxPanel.preloadStartEvent.subscribe(function(e, info){
//Do something, e.g., update UI for preloading progress
alert(info.imageId + info.ds.url);
});
lightbox.lightboxPanel.preloadCompleteEvent.subscribe(function(e, info){
//Do something, e.g., update UI for preloading progress
alert(info.imageId + info.ds.url);
});
lightbox.lightboxPanel.preloadAllCompleteEvent.subscribe(function(e, numPreloaded){
//Do something, e.g., update UI for preloading progress
alert(numPreloaded + ' images preloaded');
});
Inside of the event handler, you can access information about current image through the second argument of the handler:
For preloadStartEvent and preloadCompleteEvent, this argument is an associative array with two attributes:
imageId: the image ID you specified in the data source
ds: the data source tuple associated with this image ID
For preloadCompleteEvent, this argument is the number of images that preloaded.
You can find more information on YUI's event framework here. I've also compiled a list of YUI's event handlers.
Change Log
lightbox-final-RC4.zip (4/19/2008)
Bug Fix: When creating multiple instances of the lightbox, the toolbar of all instances use the same ID.
RC4 forces each instance of the lightbox uses a unique ID for its toolbar.
--------------------------------------------------------------------------------------------------
lightbox-final-RC3.zip (1/7/2008)
Bug Fix: Updated help file. Removed Ctrl + Click shortcut in help file, replaced by Space bar
--------------------------------------------------------------------------------------------------
lightbox-final-RC2.zip (1/4/2008)
Bug Fix: Change variable name "pagepageScrollTopValue" to "pageScrollTopValue"
Enhancement: Added preload all images feature
--------------------------------------------------------------------------------------------------
lightbox-final-RC1.zip (1/1/2008)
Initial release
Thank you for visiting and Happy New Year!
Related Links
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 ...
Thanks a lot for making this available. I really like the aesthetics you're going for a lot more than in some other solutions I've seen.
You may be pleased to know that it seems to work pretty well in Safari. I found a bug however, that was only exposed after trying it with the latest and greatest WebKit from Apple. Am I right in assuming that every instance of "pagepage" in the script should actually be "page" ? I did this global replace and things were a lot better.
One thing I'd like to be able to do is to preload images before showing any UI. In other words I'd like to be able to have the images loading in the background before the user clicks any thumbnail. Is this possible?
Thanks again,
Daniel
Thank you for your generous support.
Indeed the variable name "pagepage" is a bug. I wasn't aware of how it got into the source, probably due to some mindless copy and paste.
I changed the "pagepage" to "page", as well updated the source code for background preloading. Please check updated documentation for more detail. Thanks.
Wow! I'm really impressed. Thanks for making these changes so quickly. You're doing a great job.
Impressive work. My only issue with this is that it is a bit heavy and could have been implemented more elegantly with pure DOM manipulation so I really do not see its advantage over something lightweight like lightbox JS. Also, I couldn't get the image resizing to work, no matter how many times I try to do control click
@Dennison
The manual is a little bit outdated, the keyboard shortcut for resizing is Space Bar/Up Arrow. I'll update the manual/screenshots soon.
Speaking of advantages, the biggest one is the ability to display full size and best fit version of a image, which is my initial motivation of making this lightbox. On top of that, I added thumbnail-less feature. With this feature, you can easily create a photo gallery by feeding the lightbox a image source. Test it here
The end product of this is similar to those XML flash gallery, but the difference is without security restriction. So you can grab some random images from the internet and create a slide show from them. Also this lightbox is highly configurable. For each instance of the lightbox, you can change many attributes such as maskBgColor on the fly.
I am not saying this is lightbox is superior than others, but just pointing out the unique features. Hopefully it helps.
Great Effort! would like to request a small feature - the picture should resize and recenter if the size of the browser window changes
This looks great, but I'm looking for help with one more feature. I'd like to use your code in a widget that's hosted within an iframe on a page I don't fully control. I'd like the image to fill the entire window rather than only the iframe document. What kind of changes would be necessary? I thought just turning all the document.createElement methods to parent.document.createElement would do the trick, but no luck.
Actually, I think I figured it out. Rather than directly call the YUI files in my iframe with and tags, I used the DHTML loading ideas here to add the files into parent.document:
http://www.codehouse.com/javascript/articles/external/
thank you
Hi, I was exactly looking for a lightbox like yours, working without thumbnails. But unfortunately I can't make it work.
http://www.zerosetteaccordions.com/photogallery.php
lightbox is not defined
onclick(click clientX=0, clientY=0)
I've used exactly your code and correctly included
Lightbox-min.js and lightbox.css.
Can you please give me a hint what I'm missing??
Thank you so much!
@Edith:
Two things:
1) Move the variable lightbox out of the init function, so it can be seen by rest of the code.
2) Instead of Lightbox.show(), try lightbox.show().
Cheer!
var lightbox; var init = function(){ var dataSource = { image1:{url:"http://www.zerosetteaccordions.com/assets/images/corporate_folder.gif", title:"hi", text: "shot"}, image2:{url:"http://www.zerosetteaccordions.com/assets/images/cdummy_catalogue.jpg", title: "tes"} //and so on }; //Instantiate a Lightbox object lightbox = new YAHOO.com.thecodecentral.Lightbox(dataSource); }@cuong:
You are great! Let me buy you a beer!!!
Thanks a lot!
Nice work guys. I reckon this deserves its own project on Google Code or the like for future updates.
For those using YUI's Font package, you can modify the following lines of the stylesheet to conform the font size percentages and predefined font degradation path:
.yui-skin-sam .tcc_imageTooltip .bd { background-color: #e4e4e4; border: 5px solid #666; font-size: 93%; font-family:Verdana} .yui-skin-sam .tcc_imageHelPanel .bd { background-color: #e4e4e4; border: 5px solid #666; font-size: 93%; font-family:Verdana} .yui-skin-sam .tcc_lightboxLoader a{color: #666;font-size: 100%;text-decoration: none;}IM trying to use your lighbox-mini browser
its working when i am using a page on my server
my question is --- how can i call the light box mini-browser
when i am on any page (not in my server), so i will have the backgrouon page = the web site page not mine and in the ligth box browser - my page -- that i already figer how to change the src of the light box
how it will work ?
i am calling a js file that located in my web site (i click a favorit link that open the js file,
then in the js file i am loading the yui js file and calling the mini-browser
at this point - its faild calling the mini-browser
, i tryied to call different yui function like the 'hello world msg' and it working
please let me know what i am doing wrong
thank you.
[...] YUI based Lightbox : Yahoo! User Interface Library (YUI) based Lightbox effects written by thecodecentral.com link [...]
I love your YUI lightbox but I am having trouble with multiple instances on the same page. In the following example, note that only the third (and last) instance of the lightbox displays the navigational controls... even though ctrlVisible is "true" for all instances:
http://www.rrussellbuilders.com/content/Homes_Now_Available_GALLERY.aspx
Am I doing something wrong or is this a bug?
Hi Neil,
Sorry for the delay as I've been really busy lately.
I checked your site and ran roughly through my code, that problem was all the controls were using the same ID. Please download this version of the code to see if it fixes the problem.
Also see:
http://thecodecentral.com/2008/01/01/yui-based-lightbox-final#change_log
[...] Vielleicht hilft dir da aber auch der Abschnitt "Image Preloading" in dem Artikel YUI Based Lightbox - Final weiter. mfg Maik __________________ Beantwortete Fragen bzw. gel?ste Themen bitte als erledigt [...]
[...] YUI based Lightbox Yahoo! User Interface Library (YUI) based Lightbox effects written by thecodecentral.com [...]