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"> <link rel="stylesheet" type="text/css" href="[PATH_TO_LIGHTBOX]/lightbox/lightbox.css">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"> <link rel="stylesheet" type="text/css" href="[PATH_TO_LIGHTBOX]/lightbox/lightbox.css">
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!
Loading ...
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
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.
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":http://test.thecodecentral.com/demos/lightboxfinal/custom.html
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.
http://www.codehouse.com/javascript/articles/external/
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!
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!
<pre>
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);
}
You are great! Let me buy you a beer!!!
Thanks a lot!
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:
<pre>.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;}
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.
http://www.rrussellbuilders.com/content/Homes_Now_Available_GALLERY.aspx
Am I doing something wrong or is this a bug?
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 <a href="http://thecodecentral.com/wp-content/uploads/2008/04/lightbox-final-rc4.zip">this version</a> of the code to see if it fixes the problem.
Also see:
http://thecodecentral.com/2008/01/01/yui-based-lightbox-final#change_log
How can implement login panel in Light box if any can suggest me so please me link.
thanks
I've run into a sad bug. I set up a gallery and downloaded YUI today and Chrome and FF read it perfectly but my IE7 won't touch it. Only shows thumbnails, but doesn't offer to click them (i.e. the thumbnails aren't clickable.)
However, the demo here at codecentral works fine on my IE7. Any help guys? Thanks!
here's where I'm using it:
http://www.TropicalPunch.tv/gallery
http://www.tropicalpunch.tv/gallery/backup/
If anyone knows what's wrong, please advice. I need helps.
In the last line of your datasource, you need to remove the comma. So change this line from
<pre>
audience10:{url:"http://www.TropicalPunch.tv/gallery/photos/audience/10.jpg"},
I've written another post relating to YUI lightbox which has several examples might get you start.
"http://thecodecentral.com/2007/07/13/creating-lightbox-with-yahoo-user-interface-library":http://thecodecentral.com/2007/07/13/creating-lightbox-with-yahoo-user-interface-library
Take a look at the source code of each "example":http://test.thecodecentral.com/demos/lightbox/lightbox.html.
Thank you for the great code that is easy to use without knowing a lot of details about YUI.
I was able to make it working the way I want, except positioning the image to the different place (slightly to the righ, but ideally to insert it inside existing element) on the screen. Can you help please pointing me to the function that I can change it.
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 sectio...
I like your code very much and decided to give it a try in my project.
If I would like to set "onclick='lightbox.show();'" for my hyperlink text field (ie. without the imageID, as the hyperlink text itself is the image file name. eg. ABC123.jpg),
how do I write the dataSource?
I hear from you soon. :)
var dataSource = {
image1:{url:"photos/1.jpg", title:"hi", text: "shot"},
image2:{url:"photos/2.jpg", title: "tes"}
//...and so on
};
One more question, I was trying to include the line
into my page header in (ASP Maker) project where the js file is placed in the lightbox folder in my project folder. I got IE error that "Object doesn't support this property or method".
It works fine while I tried to include JQuery's js files.
Did I miss something?
I hear form you soon.
script type="text/javascript" src="lightbox/Lightbox-min.js"></script
(with opening & closing angle brackets)
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
})
Other than that it's a good job, but I'll have to fix the lack of graceful degradation before I can use it in my code.
For example: example.com/foo.html#bottom
would show the top of foo.html even if there's an anchor named "bottom" near the bottom of the page.
I can stop this behavior by removing the script tag for Lightbox-min.js
Note: even if my code doesn't *call* any lightbox functions, this scrolling-to-top behavior still occurs.
Is anyone else seeing this? Is there a fix?
How can I do that?
That IS possible ;-)
for example
http://www.partygek.nl/agenda/2009-06-28/latinvillage/
click the thumbnail
This script is great. Just put the ID on the img tag. Now you can make an A tag and a IMG tag inside. Just make sure the A tag has a onclick that returns false. And ofcourse the href points to your source image and the src points to your thumbnail. You still need to specify the thumbnail in the datasource.
One small problem I found:
I'm using a few other YUI components, including Yui Menu. However, I'm *not* using the Menu's default Sam skin, and I do *not* include class="yui-skin-sam" in the body tag, only in the div surrounding the Lightbox.
Anyway, when I close a Lightbox, the script is somehow applying the .yui-skin-sam class and its styling to my Menu's custom skin.
There is probably a better way to fix this, but I found the easiest way was just to remove the css file:
/YUI_VERSION/build/assets/skins/sam/skin.css. This file actually contains yui-skin-sam styles for *every* yui component in the library. The only style Lightbox needs, however, is Yui Container, which is in the file
/YUI_VERSION/build/container/assets/skins/sam/container.css.
Thank u.
Got a question .. is it possibile to dock the control bar directly under the image?
Its seems your script breaks down the PrototypeJS framework. I use PrototypeJS a lot (also with YUI).
So I've checked out your source and I noticed this line:
var $ = YAHOO.util.Dom.get;
Any PrototypeJS programmer knows $ is used within PrototypeJS :( ...
Could you rename your $ vars (I'm also talking about the $E var).
I altered the code something like
var $Evt = YAHOO.util.Event;
var $get = YAHOO.util.Dom.get;
as a hack ;-)
Keep upt the good work.
greets
Its seems your script breaks down the PrototypeJS framework. I use PrototypeJS a lot (also with YUI).
So I've checked out your source and I noticed this line:
var $ = YAHOO.util.Dom.get;
Any PrototypeJS programmer knows $ is used within PrototypeJS :( ...
Could you rename your $ vars (I'm also talking about the $E var).
I altered the code something like
var $Evt = YAHOO.util.Event;
var $get = YAHOO.util.Dom.get;
as a hack ;-) But I was hoping you could make a permanent version.
Keep upt the good work.
greets