<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Dark Crimson Blog &#187; JavaScript</title>
	<atom:link href="http://blog.darkcrimson.com/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.darkcrimson.com</link>
	<description>The Blog of Ben Lister</description>
	<lastBuildDate>Fri, 13 Aug 2010 02:18:06 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Modal Kombat! A Lightbox Comparison</title>
		<link>http://blog.darkcrimson.com/2008/04/modal-kombat-a-lightbox-comparison/</link>
		<comments>http://blog.darkcrimson.com/2008/04/modal-kombat-a-lightbox-comparison/#comments</comments>
		<pubDate>Tue, 08 Apr 2008 18:10:20 +0000</pubDate>
		<dc:creator>Ben Lister</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Lightbox]]></category>
		<category><![CDATA[Modal]]></category>
		<category><![CDATA[Prototype]]></category>

		<guid isPermaLink="false">http://blog.darkcrimson.com/?p=3</guid>
		<description><![CDATA[JavaScript Frameworks have gained  wide acceptance among developers since the &#34;Web 2.0&#34; movement and have, in many ways, changed how we use the web.  One of the greatest outcomes of this has been the reduction in external popup  windows in favor of unobtrusive, JavaScript-based &#34;Modal Window&#34; and  &#34;Lightbox&#34; solutions. At work, [...]]]></description>
			<content:encoded><![CDATA[<p>JavaScript Frameworks have gained  wide acceptance among developers since the &quot;Web 2.0&quot; movement and have, in many ways, changed how we use the web.  One of the greatest outcomes of this has been the reduction in external popup  windows in favor of unobtrusive, JavaScript-based &quot;Modal Window&quot; and  &quot;Lightbox&quot; solutions. At work,  clients frequently ask us to incorporate content and image overlay solutions into their  projects and after experimenting with, and customizing a wide variety of  different scripts, I decided to write a comparison of several of the most popular Light Box  solutions. <span id="more-3"></span></p>
<p>For this comparison, I have evaluated the Light Boxes based on coding  techniques, ease of use / customization, community support and frequency of  updates. Additionally, I have listed specifications for file size and framework  dependency / version for each along with my rating on a 1-10 scale.</p>
<p><strong>The Scripts chosen for this comparison are as follows:</strong></p>
<ul class="in_post">
<li><a href="#lb2">Lightbox 2 </a>&nbsp;&nbsp;</li>
<li><a href="#lv">Lightview</a>&nbsp;&nbsp;</li>
<li><a href="#lb">Litebox</a>&nbsp;&nbsp;</li>
<li><a href="#tb">Thickbox</a>&nbsp;&nbsp;</li>
<li><a href="#mb">Modalbox</a>&nbsp;&nbsp;</li>
<li><a href="#sb">Slimbox</a>&nbsp;&nbsp;</li>
<li><a href="#mb2">Multibox</a>&nbsp;&nbsp;</li>
<li><a href="#be">jQuery Lightbox Plugin (balupton edition)</a>&nbsp;&nbsp;
  </li>
</ul>
<p>&nbsp;</p>
<h3 class="blog_ttl" ><a href="http://www.huddletogether.com/projects/lightbox2/" name="lb2" target="_blank">Lightbox 2</a></h3>
<hr />
<p>The original Lightbox is considered by many to be the first  modal window widely available to developers. The latest release, version 2 ,  like its predecessors, is based on the Prototype framework and uses  Scriptaculous effects. This script is very stable, has seen frequent bug fixes  and off-shoots throughout its existence and has a very active user-driven  support forum. The JavaScript file itself is very nicely documented and offers  many configurable options.</p>
<p>Although Lightbox 2 offers the advantage of a large following and easy to configure (and understand) code it does have limitations. The script is called by using the <a href="http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/a_rel.html" target="_blank"><em>rel</em></a> attribute which limits its functionality for non-basic methods such as Flash and image maps. Additionally, this script, unlike most others in this comparison, is only capable of displaying images. <strong>Update:</strong> after some poking around, I found a lightbox clone which appears to be nearily identical to Lightbox 2, but with the ability to display Flash movies natively. For more information, <a href="http://www.codefidelity.com/blog/?page_id=7" target="_blank">visit this link. </a></p>
<table width="500" cellspacing="0" cellpadding="0" border="0">
<tr style="background: #000;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Framework Dependency: </strong></td>
<td style="padding: 4px; width: 240px">Prototype  v1.6.0.2+ / Scriptaculous</td>
</tr>
<tr style="background: #444;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Total package size: </strong></td>
<td style="padding: 4px; width: 240px">26k</td>
</tr>
<tr style="background: #777;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>License: </strong></td>
<td style="padding: 4px; width: 240px">Creative Commons Attribution 2.5 </td>
</tr>
<tr>
<tr style="background: #999;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>My Rating:</strong></td>
<td style="padding: 4px; width: 240px">7/10</td>
</tr>
</table>
<div style="padding:8px;background:#000;color:#fff; width:90%; border:1px dotted #777; font-size:14px;margin-top:20px;"><strong>Summary: </strong>A well-developed and document script; useful for smaller applications, can only be used for images. Has led the way for many developer off-shoots.</div>
<p>&nbsp;</p>
<h3 class="blog_ttl" ><a href="http://www.nickstakenburg.com/projects/lightview/" name="lv" target="_blank">Lightview</a></h3>
<hr />
<p>Lightview is a somewhat unique take on the standard  Lightbox. Smartly written, with an image-free, fully adjustable, rounded corner  solution (which works on browsers across the board), Lightbox is a very  aesthetically pleasing and also very powerful solution. Unlike the standard  Lightbox, and many of it&#8217;s clones, Lightview&#8217;s content box scrolls with the  page so that you are never left wondering where the content is. In addition to  images, Lightview also offers the ability to display Flash, Quicktime, AJAX calls, inline  content and even full web sites in an i-frame. Lightview features a very neat  image gallery option which can be used as a timed (configurable) slide show,  which resizes the content box to the dimensions of each image. Another great  thing, which I consider a big advantage over most of the competition, is that  the Lightview window is called through the class attribute. </p>
<p>One major issue that I have found with Lightview is that, beyond the configuration settings, the script comes pre-compressed with no original source code attached. This causes major headaches when trying to change anything not in the settings or CSS. I encountered this limitation when developing the <a href="http://www.darkcrimson.com" target="_blank">new version of my site</a> in the portfolio section when I wanted to add two simple hyperlinks to the Lightview window. Although I was able to add the links, I had to place the links in the <em>title </em>attribute, which does not validate as XHTML.</p>
<table width="500" cellspacing="0" cellpadding="0" border="0">
<tr style="background: #000;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Framework Dependency: </strong></td>
<td style="padding: 4px; width: 240px">Prototype 1.6+ / Scriptaculous</td>
</tr>
<tr style="background: #444;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Total package size: </strong></td>
<td style="padding: 4px; width: 240px">~43k</td>
</tr>
<tr style="background: #777;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>License:</strong></td>
<td style="padding: 4px; width: 240px">Creative Commons Attribution-Noncommercial-No Derivative Works </td>
</tr>
<tr>
<tr style="background: #999;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>My Rating:</strong></td>
<td style="padding: 4px; width: 240px">9/10</td>
</tr>
</table>
<div style="padding:8px;background:#000;color:#fff; width:90%; border:1px dotted #777; font-size:14px;margin-top:20px;"><strong>Summary: </strong>Tons of features: Flash, Quicktime, Inline, AJAX, Images. Cool slide show feature. No uncompressed JS distributed which limits or prevents major customizations.</div>
<p>&nbsp;</p>
<h3 class="blog_ttl" ><a href="http://www.doknowevil.net/litebox/" name="lb" target="_blank">Litebox</a></h3>
<hr />
<p>Litebox is basically a compact version of Lightbox. Although listed below as ~23k, which is a mere 3k less than the original Lightbox, the true saving is with the compact, 4k Prototype.lite and moo fx libraries used instead of the conventional 120k+ standard Prototype library and somewhat bulky Scriptaculous files. Litebox is a great, lightweight solution but unlike its older, and slightly pudgy sibling, Lightbox 2, this script does not seem to be frequently updated. The last updated date from the Litebox JS file is July, 2006 compared to March 2008 (at the time of this comparison) with Lightbox 2.</p>
<table width="500" cellspacing="0" cellpadding="0" border="0">
<tr style="background: #000;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Framework Dependency: </strong></td>
<td style="padding: 4px; width: 240px">Prototype.lite/ moo fx</td>
</tr>
<tr style="background: #444;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Total package size: </strong></td>
<td style="padding: 4px; width: 240px">~23k</td>
</tr>
<tr style="background: #777;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>License:</strong></td>
<td style="padding: 4px; width: 240px">Creative Commons Attribution 2.5 </td>
</tr>
<tr>
<tr style="background: #999;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>My Rating:</strong></td>
<td style="padding: 4px; width: 240px">7.5/10</td>
</tr>
</table>
<div style="padding:8px;background:#000;color:#fff; width:90%; border:1px dotted #777; font-size:14px;margin-top:20px;"><strong>Summary: </strong>Very lightweight solution. Suitable for sites where load time is essential. Suffers from lack of updates and like Lightbox2, can only be used for images. </div>
<p>&nbsp;</p>
<h3 class="blog_ttl" ><a href="http://jquery.com/demo/thickbox/" name="tb" target="_blank">Thickbox</a></h3>
<hr />
<p>Thickbox was written in the lightweight jQuery framework and  weighs in at an amazing 10k compressed and only 15k uncompressed. Additionally,  the developer wrote the script to run with the compressed version of jQuery  which only adds 20k instead of the 120k+ with Prototype. The script does not  have the community-driven support forums that the previous three scripts have  but the author states that you may email him with detailed questions or bugs.  Thickbox does not offer a lot of the customization options seen in Lightbox,  Lightview etc&#8230; But does provide both an uncompressed and compressed version  for developers to extend at will. The &quot;out of the box&quot; appearance for  Thickbox is not as aesthetically pleasing as some of it&#8217;s alternatives but  keeping with its easily extendable theme, images and CSS can be added as  desired to alter the look. One annoyance that I found was, when activated, the  mouse scroll wheel becomes inoperative which requires you to use the browser&#8217;s  side scroll bar.</p>
<p>Thickbox offers quite a few features for such a small package including inline content, i-frame as well as both single and multiple image support. The author claims that both Flash and PDF files can work with this script but notes that these media types are untested. </p>
<table width="500" cellspacing="0" cellpadding="0" border="0">
<tr style="background: #000;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Framework Dependency: </strong></td>
<td style="padding: 4px; width: 240px">jQuery 1.1.2</td>
</tr>
<tr style="background: #444;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Total package size: </strong></td>
<td style="padding: 4px; width: 240px">~15k/~10k</td>
</tr>
<tr style="background: #777;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>License:</strong></td>
<td style="padding: 4px; width: 240px">MIT/GNU </td>
</tr>
<tr>
<tr style="background: #999;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>My Rating:</strong></td>
<td style="padding: 4px; width: 240px">8.5/10</td>
</tr>
</table>
<div style="padding:8px;background:#000;color:#fff; width:90%; border:1px dotted #777; font-size:14px;margin-top:20px;"><strong>Summary: </strong>Extremely small, has compressed / uncompressed, easy to extend, lots of features for such a small package, smooth </div>
<p>&nbsp;</p>
<h3 class="blog_ttl" ><a href="http://www.wildbit.com/labs/modalbox/" name="mb" target="_blank">Modalbox </a></h3>
<hr />
<p>Modalbox is a very powerful tool which allows the developer to not only show single page content or images like many other modal windows but perform complex tasks with AJAX call backs which allows the end user to perform multiple tasks with few clicks and no browser refreshes. Unlike similar scripts, Modalbox uses AJAX instead of deprecated i-frames and even supports scrolling. The project is supported in <a href="http://code.google.com/" target="_blank">Google Code</a> and has a Wiki as well as detailed information about uses, bugs, etc&#8230;</p>
<p>I have used this for multiple client projects and  have  have received positive feedback with not hitches during the development process. One potential issue with Modbalbox is that it relies on Prototype and Scriptaculous which can be a little heavy for large scale projects but for those cases, there is a mootools clone called <a href="http://www.e-magine.ro/web-dev-and-design/36/moodalbox/" target="_blank">MOOdalBox</a> which has the same Google Code backing and support. </p>
<table width="500" cellspacing="0" cellpadding="0" border="0">
<tr style="background: #000;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Framework Dependency: </strong></td>
<td style="padding: 4px; width: 240px">Prototype / Scriptaculous (or mootools)</td>
</tr>
<tr style="background: #444;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Total package size: </strong></td>
<td style="padding: 4px; width: 240px">~32k</td>
</tr>
<tr style="background: #777;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>License:</strong></td>
<td style="padding: 4px; width: 240px">MIT </td>
</tr>
<tr>
<tr style="background: #999;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>My Rating:</strong></td>
<td style="padding: 4px; width: 240px">9.5/10</td>
</tr>
</table>
<div style="padding:8px;background:#000;color:#fff; width:90%; border:1px dotted #777; font-size:14px;margin-top:20px;"><strong>Summary:</strong>Summary: Easy to use and customize very powerful and well-written code. Versions for Prototype and Mootools. Lots of cool AJAX stuff. </div>
<p>&nbsp;</p>
<h3 class="blog_ttl" ><a href="http://www.digitalia.be/software/slimbox" name="sb" target="_blank">Slimbox</a></h3>
<hr />
<p>Slimbox is a mootools clone of Lightbox 2. The entire script plus images and CSS is amazingly only 13k uncompressed. This project has support forums and the homepage for the project allows visitors to post comments in which the author often responds to questions. After playing around with this script, I was impressed with the small file size but found the overall package to be somewhat buggy, particularly with the dark page cover when scrolling.</p>
<table width="500" cellspacing="0" cellpadding="0" border="0">
<tr style="background: #000;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Framework Dependency: </strong></td>
<td style="padding: 4px; width: 240px">Mootools 1.1+</td>
</tr>
<tr style="background: #444;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Total package size: </strong></td>
<td style="padding: 4px; width: 240px">~13k</td>
</tr>
<tr style="background: #777;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>License:</strong></td>
<td style="padding: 4px; width: 240px">MIT</td>
</tr>
<tr>
<tr style="background: #999;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>My Rating:</strong></td>
<td style="padding: 4px; width: 240px">6/10</td>
</tr>
</table>
<div style="padding:8px;background:#000;color:#fff; width:90%; border:1px dotted #777; font-size:14px;margin-top:20px;"><strong>Summary: </strong>A big punch in a small package. Buggy when scrolling but at 13k, this is the IKEA of Lightboxes; nice looking but has </div>
<p>&nbsp;</p>
<h3 class="blog_ttl" ><a href="http://www.phatfusion.net/multibox/" name="mb2" target="_blank">Multibox</a></h3>
<hr />
<p>Multibox is a versatile Lightbox that is able to display a  large variety of different media types including images, audio (Real Player,  MP3), video (Windows Media Player and QuickTime, FLV), as well as the standard  image and content (AJAX  and inline). The default design is pleasant enough that most developers won&#8217;t  need to do aesthetic modifications but doing so would be fairly easy due to the  way the script was written. </p>
<p>The code is fairly straightforward but is not as well  structured as some of the other options; one thing that caught my eye was the  use of JavaScript to print the actual HTML code for the box. In other scripts,  this is done dynamically at the savings of dozens of lines of code. It also  appears that there is no form of support (or update log) for this script so it  looks like bug fixes could be an issue.</p>
<table width="500" cellspacing="0" cellpadding="0" border="0">
<tr style="background: #000;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Framework Dependency: </strong></td>
<td style="padding: 4px; width: 240px">Mootools 1.1+</td>
</tr>
<tr style="background: #444;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Total package size: </strong></td>
<td style="padding: 4px; width: 240px">~30k</td>
</tr>
<tr style="background: #777;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>License:</strong></td>
<td style="padding: 4px; width: 240px">MIT</td>
</tr>
<tr>
<tr style="background: #999;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>My Rating:</strong></td>
<td style="padding: 4px; width: 240px">9/10</td>
</tr>
</table>
<div style="padding:8px;background:#000;color:#fff; width:90%; border:1px dotted #777; font-size:14px;margin-top:20px;"><strong>Summary: </strong>One of the best looking and smoothest working in the comparison. Lacks support, suffers from inefficient code, large file size. If file size doesn&#8217;t matter and you know that your users have up to date browsers, go for it!</div>
<p>&nbsp;</p>
<h3 class="blog_ttl" ><a href="http://plugins.jquery.com/project/jquerylightbox_bal" name="be" target="_blank">jQuery Lightbox Plugin (balupton edition) 1.0</a></h3>
<hr />
<p>This jQuery plugin, based on Lightbox2 delivers unusually  smooth scrolling (far better than Lightbox2) as well as many efficiency  benefits and a small file size. Unlike many of the other scripts in this  comparison, this plugin requires no configuration and a smart automatic URL  detection which means that only one file has to be included in the display  file. The jQuery Lightbox Plugin can be used manually or automatically to  generate Lightboxes which means that it can be set, like many others with the  <em>rel</em> attribute or with on event such as <em>onclick</em>.  This is a huge advantage and makes The jQuery Lightbox Plugin potentially the  most versatile in this comparison. Additionally, most media types can be used  without modification including Qucktime, Flash and other embedded content  types.</p>
<p>The only real downside that I found with this script was the lack of clear documentation. Although the instructions are fairly clear, it takes some digging around to find the information you are looking for. Luckily, this script is listed on the <a href="http://plugins.jquery.com/" target="_blank">jQuery plugin site</a> which includes support request and bug report sections as well as a log of changes.</p>
<table width="500" cellspacing="0" cellpadding="0" border="0">
<tr style="background: #000;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Framework Dependency: </strong></td>
<td style="padding: 4px; width: 240px">jQuery 1.2.1+</td>
</tr>
<tr style="background: #444;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>Total package size: </strong></td>
<td style="padding: 4px; width: 240px">~15k</td>
</tr>
<tr style="background: #777;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>License:</strong></td>
<td style="padding: 4px; width: 240px">GNU Affero General Public License</td>
</tr>
<tr>
<tr style="background: #999;color:#fff;">
<td style="padding: 4px; width: 185px"><strong>My Rating:</strong></td>
<td style="padding: 4px; width: 240px">9.5/10</td>
</tr>
</table>
<div style="padding:8px;background:#000;color:#fff; width:90%; border:1px dotted #777; font-size:14px;margin-top:20px;">
 Summary: The smoothest and best overall Lightbox clone in  the comparison. Could benefit from more documentation on the site, but it&rsquo;s so  easy to use, that its hard to complain.
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3 class="blog_ttl" >Other considerations and Conclusions</h3>
<p class="blog_ttl" >One additional script that was too task specific to include in this comparison but I wanted to include a link. <a href="http://dev.visualdrugs.net/mootools/gmapsoverlay/" target="_blank">GMapsOverlay</a> is a moo-tools based Lightbox that is used specificially to display configurable Google Maps. </p>
<p>Although I have listed the file sizes for the scripts evaluated in this comparison, some of which are more attractive than others, further compression can be applied to most of these scripts using applications such as: <a href="http://www.dojotoolkit.org/docs/shrinksafe" target="_blank">DoJo Toolkit&#8217;s ShrinkSafe</a> or <a href="http://dean.edwards.name/packer/" target="_blank">Packer.</a></p>
<p>So, after reading all of this, which one of these Lightboxes is right for you? That depends&mdash;I typically use Prototype because I have worked with it in the past quite often&mdash;but, there are many alternatives and clones using other JavaScript Frameworks or none at all so it depends on your specific need. Keeping that in mind, it is possible to <a href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries" target="_blank">use multiple frameworks together</a>. </p></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.darkcrimson.com/2008/04/modal-kombat-a-lightbox-comparison/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

