</p> <p><a href="http://feedads.g.doubleclick.net/~a/WDl-HU0-fuZuzVaguybHrqUyAqI/0/da"><img src="http://feedads.g.doubleclick.net/~a/WDl-HU0-fuZuzVaguybHrqUyAqI/0/di" border="0" ismap="true"></img></a><br/><br /> <a href="http://feedads.g.doubleclick.net/~a/WDl-HU0-fuZuzVaguybHrqUyAqI/1/da"><img src="http://feedads.g.doubleclick.net/~a/WDl-HU0-fuZuzVaguybHrqUyAqI/1/di" border="0" ismap="true"></img></a></p> <p>Eversince, <a href="http://www.lokeshdhakar.com/">Lokesh Dhakar</a> created the first lightbox application, photo galleries and popup windows advanced to new era. And there was a time that lightboxes become a default component for every web sites. Aside from their libraries and codebase, all of them has similar properties like ability to show single image or group of images with next and previous buttons for navigation, captions and different transition effects mostly depending on mighty <a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_self">jQuery easing plugin</a>. </p> <p>Opens on the very top of the page texts with a transparent overlay background. In addition to images, also they can display inline elements, iframes, use ajax for its contents, flash or other video types. Many of them have slick css implementation for their user interfaces. So this helps to change their interfaces according to your website easily. In this post I want to propose to you a roundup with 15 of the best and most popular jQuery Lightbox Scripts.</p> <h2>CeeBox</h2> <p><img src="http://farm5.static.flickr.com/4064/4224386051_227c9e13d9.jpg" alt="CeeBox" width="500" height="403" style="float:left; margin-right:14px;" /><a href="http://catcubed.com/2008/12/23/ceebox-a-thickboxvideobox-mashup/" target="_blank">CeeBox</a> is a very customizable and extensive lightbox clone. In addition to images, it can display iframes, inline element, ajax, flash and videos. Note that, it need swfobject plugin to display flash.</p> <div></div> <h2>ColorBox</h2> <p><img src="http://farm5.static.flickr.com/4017/4225155628_81ddb5555c.jpg" alt="ColorBox" width="500" height="323" style="float:left; margin-right:14px;" /><a href="http://colorpowered.com/colorbox/" target="_blank">ColorBox</a> is very customizable like CeeBox and have a set of transition effects. It can display most of the content types. It also has different built-in themes both for overlay background and lightbox interface.</p> <div></div> <h2>Faceboox</h2> <p><img src="http://farm3.static.flickr.com/2749/4224386203_69de38308e.jpg" alt="FaceBox" width="500" height="379" style="float:left; margin-right:14px;" /><a href="http://famspam.com/facebox" target="_blank">Facebox</a> is facebook’s lightbox clone. It only display single images without captions, ajax and inline content.</p> <div></div> <h2>FancyZoom</h2> <p><img src="http://farm5.static.flickr.com/4005/4225155758_4cfaa1109b.jpg" alt="Fancy Zoom" width="500" height="382" style="float:left; margin-right:14px;" /><a href="http://orderedlist.com/articles/fancyzoom-meet-jquery" target="_blank">Fancy Zoom for jQuery</a>: original <a href="http://www.cabel.name/2008/02/fancyzoom-10.html" target="_blank">Cabel Sasser’s FancyZoom</a> replica for jQuery. It can display single image, flash and inline content.</p> <div></div> <h2>FancyBox</h2> <p><img src="http://farm5.static.flickr.com/4043/4224386289_0792274c64.jpg" alt="FancyBox" width="500" height="331" style="float:left; margin-right:14px;" /><a href="http://fancy.klade.lv/" target="_blank">FancyBox</a> is a simple gallery plugin for jQuery. It display most content types but lacks flash and video support. It also has different transition effects.</p> <div></div> <h2>Greybox Redux</h2> <p><img src="http://farm3.static.flickr.com/2594/4225155864_ac42140663.jpg" alt="Greybox Redux" width="500" height="386" style="float:left; margin-right:14px;" /><a href="http://jquery.com/demo/grey/" target="_blank">Greybox Redux</a> is simplified version of original <a href="http://amix.dk/greybox/demo.html" target="_blank">Greybox</a>. It can only display iframe content.</p> <div></div> <h2>ImageBox</h2> <p><img src="http://farm3.static.flickr.com/2624/4224386427_03b3a2bb46.jpg" alt="Imagebox" width="500" height="381" style="float:left; margin-right:14px;" /><a href="http://www.intelliance.fr/jquery/imagebox/" target="_blank">Imagebox</a> specialized for image displaying. It only supports single and group of images.</p> <div></div> <h2>jQuery Lightbox</h2> <p><img src="http://farm3.static.flickr.com/2516/4224386479_c0efea7a2d.jpg" alt="jQuery Lightbox" width="500" height="391" style="float:left; margin-right:14px;" />Like to Imagebox, <a href="http://leandrovieira.com/projects/jquery/lightbox/" target="_blank">jQuery Lightbox</a> is also only-show-image type lightbox clone. Its user interface and usage is very similar to Lokesh Dhakar’s Lightbox2.</p> <div></div> <h2>nyroModal</h2> <p><img src="http://farm3.static.flickr.com/2659/4224386529_20d805286c.jpg" alt="nyroModal" width="500" height="376" style="float:left; margin-right:14px;" /><a href="http://nyromodal.nyrodev.com/" target="_blank">nyroModal</a> is one of the most extend-able lightbox clone. It display of the content types and also it allows form submits via its modal without extra plugins.</p> <div></div> <h2>piroBox</h2> <p><img src="http://farm5.static.flickr.com/4010/4224386577_7182dbb31d.jpg" alt="piroBox" width="500" height="341" style="float:left; margin-right:14px;" /><a href="http://www.pirolab.it/pirobox/" target="_blank">piroBox</a> is differs from the other lightboxes with ability to add link to current image file for. Also it has an auto slideshow option. It only supports single and group of images with 3 different built-in themes. Lacks closing the lightbox when clicking on the background overlay.</p> <div></div> <h2>prettyPhoto</h2> <p><img src="http://farm3.static.flickr.com/2520/4225156144_06c6530e12.jpg" alt="prettyPhoto" width="500" height="422" style="float:left; margin-right:14px;" /><a href="http://www.no-margin-for-errors.com/projects/prettyPhoto/" target="_blank">prettyPhoto</a> can display all content I mentioned at the intro paragraph. It has 5 different built-in themes but these themes slightly changes the lightbox interface.</p> <div></div> <h2>Sexy Lightbox2</h2> <p><img src="http://farm5.static.flickr.com/4062/4225156204_fddd72fa7b.jpg" alt="Sexy Lightbox2" width="500" height="420" style="float:left; margin-right:14px;" /><a href="http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2" target="_blank">Sexy Lightbox2</a> has both jQuery and MooTools based versions. It has 2 different built-in themes as black and white. And opens lightbox with a slide down effect with easing.</p> <div></div> <h2>Slightly ThickerBox</h2> <p><img src="http://farm3.static.flickr.com/2645/4224386751_a5253b9288.jpg" alt="Slightly Thickerbox" width="500" height="398" style="float:left; margin-right:14px;" /><a href="http://www.jasons-toolbox.com/SlightlyThickerbox/">Slightly ThickerBox</a> is a modification of <a href="http://codylindley.com/">Cody Lindley’s</a> Thickbox script. It can display images and ajax content.</p> <div></div> <h2>Thickbox</h2> <p><img src="http://farm3.static.flickr.com/2540/4225156346_17cfce18f9.jpg" alt="Thickbox" width="471" height="400" style="float:left; margin-right:14px;" /><a href="http://jquery.com/demo/thickbox/">Thickbox</a> is one of the oldest jQuery based lightbox. Its development team discontinued the plugin’s maintenance.</p> <div></div> <h2>TopUp</h2> <p><img src="http://farm3.static.flickr.com/2650/4224386885_ee73226f87.jpg" alt="topup" width="500" height="349" style="float:left; margin-right:14px;" />Depended on both jQuery and jQuery UI. <a href="http://gettopup.com/">TopUp</a> has different built-in themes. In addition to most content types, it can also display flv videos.</p> <div></div> <div></div> <div> <a href="http://feeds.feedburner.com/~ff/Woork?a=7VJQZ-NeqVE:IxtpKOkba-k:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/Woork?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Woork?a=7VJQZ-NeqVE:IxtpKOkba-k:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/Woork?i=7VJQZ-NeqVE:IxtpKOkba-k:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Woork?a=7VJQZ-NeqVE:IxtpKOkba-k:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Woork?i=7VJQZ-NeqVE:IxtpKOkba-k:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Woork?a=7VJQZ-NeqVE:IxtpKOkba-k:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Woork?i=7VJQZ-NeqVE:IxtpKOkba-k:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Woork?a=7VJQZ-NeqVE:IxtpKOkba-k:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/Woork?d=qj6IDK7rITs" border="0"></img></a> </div> <p><img src="http://feeds.feedburner.com/~r/Woork/~4/7VJQZ-NeqVE" height="1" width="1" /><br /> <a href="http://feedproxy.google.com/~r/Woork/~3/7VJQZ-NeqVE/">Original Post</a><br />
Close Bar
