«

YUI Based Lightbox – Revisited

Posted on August 17, 2007
Filed Under Javascript | 104 Comments     


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:

Lightbox Demo Screen Shot

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:

  • imageBase is 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.
  • dataSource is discussed here.

You are done! That's all you need to do for our lightbox to function.

Run Online demo

The Complete Source Code

<html>
<head>
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/container.css" />






</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 imageBase attribute.
  • 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

If you find this post useful, consider donating a few bucks to help the server running cost.

Go to Top

More interesting posts ...

Subscribe to keep track of your comment.
104 Comments so far
  1. [...] Improved YUI Based Lightbox [...]
  2. [...] 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 # [...]
  3. subcorpus August 25, 2007 2:42 pm
    i couldn't get it to work ...
    may be i'm messing something up somewhere ...
    hehe ...
  4. önder August 25, 2007 4:18 pm
    its really a great application...
  5. Cuong August 25, 2007 4:36 pm
    To subcorpus:

    There isn't enough information to help you. Mind posting your markup/script or a URL to a functional example?
  6. GfxDizayn » YUI Tabanl? LightBox August 28, 2007 2:54 am
    [...] YUI kutuphanesini kullanarak Lightbox efekti [...]
  7. [...] 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 [...]
  8. teknoloji » YUI ?le Lightbox August 28, 2007 11:29 am
    [...] 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 [...]
  9. George August 28, 2007 3:26 pm
    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.
  10. Cuong August 29, 2007 9:58 am
    To George:

    Thank you for reporting this. I'll fix it in the next release.
  11. The Doctor What August 29, 2007 11:48 am
    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!
  12. Slowhandz August 29, 2007 5:56 pm
    Instead of loading 4 YUI files (1 css &amp; 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 &amp; 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.


  13. Robert Werner August 30, 2007 11:57 am
    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.
  14. Cuong August 30, 2007 4:58 pm
    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.
  15. David Hall September 2, 2007 5:44 am
    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...
  16. David Hall September 2, 2007 5:48 am
    never mind, I'm stupid, forgot the container css
  17. hmartin September 2, 2007 11:32 am
    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.
  18. Cuong September 2, 2007 1:13 pm
    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
  19. Manish Runwal October 9, 2007 5:54 pm
    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.
  20. Milan Jaukovic October 10, 2007 11:09 am
    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
  21. Cuong October 10, 2007 11:14 am
    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):

    <pre>
    <object width="425" height="353">
    <param name="movie" value="http://www.youtube.com/v/JgXn0rMRr9g&rel=1"></param>
    <param name="wmode" value="transparent"></param>
    <embed src="http://www.youtube.com/v/JgXn0rMRr9g&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="353"></embed>
    </object>


    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!
  22. Levi Bahn October 27, 2007 3:56 pm
    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!
  23. Cuong October 29, 2007 6:05 pm
    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":http://developer.yahoo.com/yui/docs/Panel.js.html.

    Good luck!
  24. Dugald Morrow November 5, 2007 2:37 am
    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.
  25. Cuong November 5, 2007 11:35 pm
    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":http://thecodecentral.com/wp-content/uploads/2007/11/lightbox.js

    Sample code for instantiation:
    <pre>
    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
    });
  26. Dugald Morrow November 8, 2007 2:28 am
    Hi. Thanks for your quick response. The enhancements work nicely. :)
  27. Kamil November 25, 2007 8:17 am
    Hi. I've a question by licence. Could I use this gallery also at commercial projects?
  28. Cuong November 26, 2007 12:06 pm
    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.
  29. ProfesionalNet Diseño Web December 5, 2007 9:05 am
    Muy interesante la modificación sobre lightbox, hemos incluido una versión modificada.
    Muchas gracias por el desarrollo.
    http://www.profesionalnet.net
  30. Christoph December 6, 2007 7:40 am
    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.
  31. Cuong December 13, 2007 10:14 am
    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.
  32. YUI Based Lightbox - Final : Code Central February 21, 2008 9:28 pm
    [...] previous YUI implementation of the lightbox, which was released for beta evaluation, now has nearly gone gold. This page will be devoted for [...]
  33. [...] 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. [...]
  34. Altre nuove risorse « Grafica March 10, 2008 3:05 pm
    [...] http://thecodecentral.com/2007/08/17/yui-based-lightbox-revisit [...]
  35. Garth Brown March 12, 2008 7:11 am
    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&amp;width=300", title: 'Some Title'}};


    If you care about document standards, you know that &amp; 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.
  36. Cuong March 12, 2008 11:18 pm
    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. :)
  37. [...] 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 [...]
  38. [...] YUI based Lightbox for image gallery [...]
  39. [...] YUI Based Lightbox - YUI Based Lightbox in Cool AJAX sites - a YUI based image gallery script. [...]
  40. Kuzma May 22, 2008 11:49 am
    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: www.tamsink.lt
    Thank you in advance!
  41. [...] YUI Lightbox | More Details [...]
  42. [...] YUI Lightbox | ????????? [...]
  43. Nono Martínez » Clones de Lightbox June 25, 2008 11:12 pm
    [...] Slimbox, Smoothbox, SubModal, Suckerfish HoverLightbox Redux, SWFbox, Thickbox, TinyBox, YUI based lightbox [...]
  44. Deep July 4, 2008 7:43 am
    It is a nice script. So I have added it in http://www.downloadjavascripts.com. Take care and keep generating nice stuff !!!!
  45. IMFreakz July 6, 2008 5:40 pm
    How to use this script on wordpress ? For example, I want to make a gallery page, I want to create a dynamic gallery page
  46. Javascript???????? » ????? July 13, 2008 3:32 am
    [...] YUI based lightbox [...]
  47. aurelien July 21, 2008 5:31 am
    beautiful !
  48. [...] (Web Sitesi) (Download) 6-) YUI LightBox                         (Web Sitesi) (Download) 7-) SmoothBox                           (Web Sitesi) [...]
  49. [...] ?????YUI Based Lightbox Posted in AjaxLightbox | Leave a Comment [...]
  50. sandra October 14, 2008 1:33 am
    iDIKb2 gjsRt3i9fkls03GsAc
  51. Gisheperie December 19, 2008 10:10 am
    ?????????!!!? ??? ????? ?????????? ????? ?????????? ?????! ????? ?????????? ??? ??????????.
  52. liaigucrarie December 20, 2008 1:50 am
    ?????? ????????????, ???? ?? ???????
  53. [...] Name:YUI based lightbox [...]
  54. [...] The code central nos deja una bonita alternativa par crear fácilmente lightbox usando Yahoo UI. Para este lightbox se han incorporado muchas características nuevas que lo harán aun mas agradable, entre ellas un preloader de imagen, la opción de escalar imágenes grandes para encuadrarlo a la ventana de browser, se ha agregado un botón de maximizar imágenes escaladas, también permite ocultar el lightbox convenientemente clickeando en la imagen, y varias opciones mas a descubrir. [...]
  55. nemetc February 25, 2009 10:50 pm
    Very qualitative scripts
  56. revues casinos February 26, 2009 1:13 pm
    <strong>revues casinos...</strong>

    Jansen angler Carty ...
  57. Alexwebmaster March 3, 2009 12:24 am
    Hello webmaster
    I would like to share with you a link to your site
    write me here preonrelt@mail.ru
  58. Hectic Capiznon Bloggers 2009 March 3, 2009 11:53 pm
    hi this is a very informative site and I like it..

    more power ...
  59. links for 2009-03-09 : Eggplantia5 March 9, 2009 4:00 am
    [...] YUI Based Lightbox - Revisited | Code Central (tags: lightbox yui webdev js modal design library layout scripts gallery ajax tutorial css webdesign programming html) [...]
  60. links for 2009-03-15 « Amy G. Dala March 15, 2009 6:06 am
    [...] YUI Based Lightbox - Revisited | Code Central (tags: javascript yui development) [...]
  61. links for 2009-03-16 « Amy G. Dala March 16, 2009 6:02 am
    [...] YUI Based Lightbox - Revisited | Code Central (tags: javascript yui development) [...]
  62. [...] [upmod] [downmod] YUI Based Lightbox - Revisited : Code Central (thecodecentral.com) 0 points posted 10 months, 1 week ago by jeethu tags yui webdev ajax [...]
  63. mvega June 16, 2009 3:30 pm
    Hi,

    Currently I have implemented a dojox.Gallery. I was wondering if it is possible to display this gallery into yui lightbox.

    Cheers
  64. ??????????? August 23, 2009 7:18 am
    ????????????? ??????, ???????. ?? ? ?????, ??? ??????? ???-???? ????. :-)
  65. Randy Cleanse August 31, 2009 6:05 am
    Thanks for the post - very helpful information. Keep up the good work.
  66. sandrar September 10, 2009 2:50 pm
    Hi! I was surfing and found your blog post... nice! I love your blog. :) Cheers! Sandra. R.
  67. [...] También es bueno ver este post de planetOzh donde tenemos una comparativa de estos script. Awesome Box Control.Modal Facebox Fancy Zoom FancyBox Greybox Greybox Redux Highslide iBox Imagebox jQuery lightBox plugin Leightbox LightBox Gone Wild Lightbox+ Lightbox2 Lightview LightWindow Litebox Lytebox Milkbox ModalBox MOOdalbox Multibox nyroModal prettyPhoto Prototype Window RoeBox Shadow Box Slightbox Slightly ThickerBox Slimbox Smoothbox SubModal Suckerfish HoverLightbox Redux SWFbox Thickbox TinyBox YUI based lightbox [...]
  68. Vorwahl September 27, 2009 12:52 am
    So nice and great. Really thx. But I cannot agree with this
  69. Wanita November 19, 2009 6:38 am
    Thanks for the post - very helpful information. This is information i need..
  70. tempo dulu November 24, 2009 11:05 pm
    pretty nice...
  71. cerita dewasa November 25, 2009 1:34 pm
    I came across your site while searching on MSN and have now added you to my rss reader. I Just though i should say “keep up the good work” and pass on congratulations on a job well done ! I am really looking forward to seeing more from you in the future.
  72. cewek bugil November 25, 2009 1:34 pm
    Nice info, Useful for my job...this has made my life (my projects) goes a lot easier. Keep up the good work, thanks very much... :)
  73. foto bugil November 26, 2009 8:22 am
    How to use this script on wordpress or drupal ? thanks b4...
  74. video bokep November 26, 2009 10:11 am
    Hii.. Could I use this gallery also at commercial projects?
  75. Cerita Seks November 26, 2009 7:09 pm
    Nice script, useful for me.. thanks dude...
  76. Cerita Panas November 26, 2009 7:12 pm
    Thanks for share...

    Just a quick question. Is there a way to include a navigation between the images?
  77. Diseño web November 30, 2009 5:37 am
    La verdad, es bastante util el lightbox, añadido a favoritos
  78. Artis Telanjang December 2, 2009 4:01 am
    Some trouble... On my localhost everything works fine: as with Firefox and IE... But on my web site IE drops an error: YAHOO udentified...
  79. Berufsbekleidung December 6, 2009 11:01 am
    Hi, thank you so much for this post.
  80. video bokep December 6, 2009 8:23 pm
    Wow - I found this through google and read several of your other posts - added ya to my G Reader, Keep up the good work. Looking forward to reading more each day.
  81. Cerita Dewasa December 9, 2009 12:47 pm
    Thanks for the post - very helpful information. I like your work..
  82. Cerita Dewasa Sex December 9, 2009 12:54 pm
    I love this post..
  83. video bokep December 9, 2009 7:52 pm
    Hi,

    Currently I have implemented a dojox.Gallery. I was wondering if it is possible to display this gallery into yui lightbox.

    Cheers
  84. memek tante December 9, 2009 8:00 pm
    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.
  85. bugil December 9, 2009 8:02 pm
    i couldn't get it to work ...
    may be i'm messing something up somewhere ...
  86. mike_kiriloff December 13, 2009 5:15 am
    Maybe somebody knows where i can find and buy normal and high-quality secateurs online?

    Thank you;)
  87. tworzenie-stron-www December 14, 2009 10:33 am
    sieć ani chybi jest największym wynalazkiem dwudziestego wieku. Na początku puder on podać służbą specjalnym Stanów Zjednoczonych do <a href="http://www.techdesign.pl" rel="nofollow">tworzenie stron www</a> wymiany poufnych informacji, lecz szybko okazało się, że prawdopodobnie dysponować inne wykorzystanie. Tworzenie stron www stało się powszechniejsze i ludzie mający admitancja aż do Internetu, który z powodu kiedy niekiedy się upowszechnił, mogli zamieszczać
  88. Cerita Dewasa 2010 December 15, 2009 9:11 am
    About comment Garth Brown i agree, The problem is, when you Escape these characters, Lightbox will break. To fix this, you can UnEscape this string in Lightbox.js, this is great..Thanks for share..
  89. How to Create a YUI Based Lightbox « Jbloo December 15, 2009 1:19 pm
    [...] 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. [...]
  90. Koleksi Video Panas December 21, 2009 11:27 am
    I have implemented a dojox.Gallery. I was wondering if it is possible to display this gallery into yui lightbox. Thanks for share...
  91. Koleksi Foto Bugil December 21, 2009 11:42 am
    Thanks for share...
  92. Cewek Telanjang December 24, 2009 3:30 am
    Beautuful codes... useful for me, thanks
  93. Duffurippibia January 2, 2010 5:47 am
    Today i watching picture from <a href="http://bestfilms.000space.com/3d-film/" rel="nofollow">here</a>.
    this is wondeful film.
    Who are watching this?
  94. kumpulan informasi January 4, 2010 7:10 pm
    Beautuful codes... useful for me
  95. [...] YUI Lightbox [...]
  96. bokep smu January 6, 2010 4:14 am
    GREAT, nice info... useful for me, thanks...
  97. pligg.com January 6, 2010 5:50 am
    <strong>YUI Based Lightbox – Revisited | Code Central...</strong>

    - Revisited A stylish lightbox that makes use of the new features in the Yahoo user interface....
  98. sinnlos January 14, 2010 3:41 pm
    Yeah yeah yeah
  99. kumpulan informasi January 19, 2010 2:07 am
    thanks for sharing ;)
  100. celebs gosip January 19, 2010 2:08 am
    thanks for this tips. i like it
  101. cerita dewasa January 19, 2010 2:09 am
    Wow - I found this through google and read several of your other posts - added ya to my G Reader, Keep up the good work. Looking forward to reading more each day.
  102. [...] YUI Based Lightbox [...]
  103. Bali Accommodations February 18, 2010 7:29 pm
    Great post! I will definitely integrate this one into my site soon. Thanks for sharing your knowledge.
  104. 40种Lightbox效果收集 - Loo Design March 11, 2010 5:42 pm
    [...] YUI based lightbox 上一篇: Business Cards 1# 标签: Freebie, javascript, lightbox, web design 本文链接: http://loodesign.com/freebie-share/40-lightbox-javascript-collection/ 版权所有: Loo Design, 转载请注明本文出处。 [...]
Code Central Special

Polls

  • Your opinion about the design of this site:

    View Results

    Loading ... Loading ...