We all know how good and how famous lightbox is around the web. Most of us probably have used it or any of its different children (lightbox++, lightbox JS, blah blah, etc…) I had a personal project in mind, an online tool that allow me to search among different providers and view the videos without refreshing pages… lightbox was on my mind. So looking around the net, I found lightbox++, quite good but with some bugs that I had to fix in order to view the videos lightbox style. lightbox++ only allowed me one movie at a time and also, its configuration forced me to have a movie with a .SWF extension, otherwise it won’t work. I builded a solution and I put it the name of lightboxXL. As this is a modification of a library, I DO NOT WANT ANY RECOGNITION for this work, give it to the guys of CONFIDENTIALITY. How it works a) Configure the HEAD section of your HTML page:

<!-- insert the styles of the lightboxXL  -->
<!--  javascript libraries required  -->
<script src="js/prototype.js" type="text/javascript"><!--mce:0--></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"><!--mce:1--></script>
<script src="js/multilightboxXL.js" type="text/javascript"><!--mce:2--></script>

b) LigthboxXL parses the document and gets pre-configured URLs when it is loaded. The configuration of such URLs is quite simple (please view the REL and the TAG attributes):

<!---->
<!---->
<!-- example for single image display  -->
<a class="lightbox" title="Mac Wallpaper" rel="height:400,width:500,type:jpg" href="images/digg_en.jpg"><img src="images/purple_thumb.jpg" border="0" alt="" /></a>
<!--  example for gallery image display  -->
<a title="Mac Wallpaper: Purple" rel="lightbox[papers]" href="images/purple_en.jpg"><img src="images/purple_thumb.jpg" border="0" alt="" /></a>
<a title="Mac Wallpaper: Orange" rel="lightbox[papers]" href="images/orange_en.jpg"><img src="images/orange_thumb.jpg" border="0" alt="" /></a>
<a title="Mac Wallpaper: Granite" rel="lightbox[papers]" href="images/granite_en.jpg"><img src="images/granite_thumb.jpg" border="0" alt="" /></a>
<!--  example displaying a single FLASH movie  -->
<a title="Strongbad: Coloring" rel="lightbox" href="images/sbemail.swf"><img src="images/strongbad_thumb.jpg" border="0" alt="" /><;/a>
<!--  example displaying a gallery FLASH set  -->
</a><a title="Strongbad: Coloring" rel="lightbox[setname]" href="images/sbemail.swf"><img src="images/strongbad_thumb.jpg" border="0" alt="" /></a>
<a title="Strongbad: Coloring" rel="lightbox[setname]" href="images/sbemail2.swf"><img src="images/strongbad_thumb.jpg" border="0" alt="" /></a>

c) TAGs Explained

• TITLE: title of the image or movie
• TAG: here we set IMG or SWF to tell lightboxXL if it is a flash movie or an image
• HEIGHT: height of the image or movie
• WIDTH: width of the image or movie
• REL: this is a MUST if the link is part of a set you do REL=”lightbox[SETNAME]“
• HREF: where is the movie located?

Well, I think all is quite simple, nevertheless the zip file contains an example with all the possibilities.

Download

download: LightboxXL for Prototype (1.79MB) added: 09/12/2009 clicks: 3501

Tweet this!