<?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>Dottony &#187; Ajax</title>
	<atom:link href="http://www.dottony.com/category/ajax/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.dottony.com</link>
	<description>For Bloggers.Designers.Developers.Geeks</description>
	<lastBuildDate>Thu, 10 Jun 2010 12:54:12 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>30+ Useful Ajax Lightbox and Modal Dialog Solutions</title>
		<link>http://www.dottony.com/30-useful-ajax-lightbox-and-modal-dialog-solutions/</link>
		<comments>http://www.dottony.com/30-useful-ajax-lightbox-and-modal-dialog-solutions/#comments</comments>
		<pubDate>Wed, 17 Jun 2009 08:31:46 +0000</pubDate>
		<dc:creator>dottony</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Web 2.0]]></category>
		<category><![CDATA[Lightbox]]></category>

		<guid isPermaLink="false">http://www.dottony.com/?p=284</guid>
		<description><![CDATA[Modal dialog, windows or a popular term lightbox is an unobtrusive ajax solution for displaying the content inside the page itself, it overcome the constraint of pop up windows which blocked by most of the modern browser. However, the usages of lightbox is more widely apply to preview of images, image gallery and form model. [...]


Related posts:<ol><li><a href='http://www.dottony.com/shortener-shortener-40-url-shortener-at-your-services/' rel='bookmark' title='Permanent Link: Shortener..Shortener&#8230;40+ URL Shortener at Your Services!'>Shortener..Shortener&#8230;40+ URL Shortener at Your Services!</a></li>
<li><a href='http://www.dottony.com/10-tutorials-to-kickstart-your-wordpress-plugins-development/' rel='bookmark' title='Permanent Link: 10 Tutorials To Kickstart Your Wordpress Plugins Development'>10 Tutorials To Kickstart Your Wordpress Plugins Development</a></li>
<li><a href='http://www.dottony.com/60-awesome-sites-for-free-fonts/' rel='bookmark' title='Permanent Link: 60 Awesome Sites for Free Fonts'>60 Awesome Sites for Free Fonts</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Modal dialog, windows or a popular term lightbox is an unobtrusive ajax solution for displaying the content inside the page itself, it overcome the constraint of pop up windows which blocked by most of the modern browser. However, the usages of lightbox is more widely apply to preview of images, image gallery and form model. Since it only loads the relevant content in a box, it increase the loading time and whole user browsing experience. Below shown the details and demonstrate the default outlook of the lightbox.</p>
<h2><a style="text-decoration: none;" href="http://www.huddletogether.com/projects/lightbox2/">1. Lightbox2</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://www.huddletogether.com/projects/lightbox2/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/lightbox2.jpg" alt="lightbox2.jpg" width="480" height="300" /></a></p>
</div>
<p>A popular lightbox solutions that written by Lokesh Dhakar, it is built on prototype and scriptaculous framework. It only supports images and slideshow.</p>
<p><span id="more-284"></span></p>
<h2><a style="text-decoration: none;" href="http://particletree.com/features/lightbox-gone-wild/">2. Lightbox Gone Wild</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://particletree.com/features/lightbox-gone-wild/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/lightbox-gone-wild.jpg" alt="lightbox-gone-wild.jpg" width="480" height="300" /></a></p>
<p>Inspired by lightbox and include the support for form and html. It is based on prototype and scriptaculous.</p>
<h2><a style="text-decoration: none;" href="http://colorpowered.com/colorbox/">3. Colorbox</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://colorpowered.com/colorbox/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/colorbox.jpg" alt="colorbox.jpg" width="480" height="300" /></a></p>
</div>
<p>Lightweight and customizable lightbox plugin through CSS and jQuery. The plugin support images, image group, ajax, inline content and iframe content.</p>
<h2><a style="text-decoration: none;" href="http://fancy.klade.lv/">4. Fancybox</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://fancy.klade.lv/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/fancylightbox.jpg" alt="fancylightbox.jpg" width="480" height="300" /></a></p>
</div>
<p>Display images, html and multimedia content. It is a jQuery based lightbox.</p>
<h2><a style="text-decoration: none;" href="http://leandrovieira.com/projects/jquery/lightbox/">5. jQuery Lightbox Plugin</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://leandrovieira.com/projects/jquery/lightbox/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/jquerylightbox.jpg" alt="jquerylightbox.jpg" width="480" height="300" /></a></p>
</div>
<p>Similar to Lokesh Dhakar lightbox solutions, except it is jQuery based.</p>
<h2><a style="text-decoration: none;" href="http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/">6. prettyPhoto</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/prettyphoto.jpg" alt="prettyphoto.jpg" width="480" height="300" /></a></p>
</div>
<p>Jquery lightbox clone and support more multimedia format.</p>
<h2><a style="text-decoration: none;" href="http://www.doknowevil.net/litebox/">7. Litebox</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://www.doknowevil.net/litebox/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/litebox.jpg" alt="litebox.jpg" width="480" height="300" /></a></p>
</div>
<p>Lightweight lightbox which built on moo.fx and prototype.lite.</p>
<h2><a style="text-decoration: none;" href="http://jquery.com/demo/thickbox/">8. Thickbox</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://jquery.com/demo/thickbox/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/thickbox.jpg" alt="thickbox.jpg" width="480" height="300" /></a></p>
</div>
<p>Similar solutions to lightbox2, but it has more features like display inline content, iframed content or content served through ajax in a hybrid modal. It is build on jQuery.</p>
<h2><a style="text-decoration: none;" href="http://www.jasons-toolbox.com/SlightlyThickerBox/">9. Slightly Thickerbox</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://www.jasons-toolbox.com/SlightlyThickerBox/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/slightlythickerbox.jpg" alt="slightlythickerbox.jpg" width="480" height="100" /></a></p>
</div>
<p>A mod from thickbox which add on next and previous button to form a images gallery.</p>
<h2><a style="text-decoration: none;" href="http://www.digitalia.be/software/slimbox2">10. Slimbox</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://www.digitalia.be/software/slimbox2"><img src="http://www.dottony.com/wp-content/uploads/2009/06/slimbox2.jpg" alt="slimbox2.jpg" width="480" height="300" /></a></p>
</div>
<p>The ultimate lightweight Lightbox clone for jQuery. As stated, slim and slimmer solutions for lightbox.</p>
<h2><a style="text-decoration: none;" href="http://www.nickstakenburg.com/projects/lightview/">11. LightView</a><br />
<a style="text-decoration: none;" href="http://www.nickstakenburg.com/projects/lightview/"></a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://www.nickstakenburg.com/projects/lightview/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/lightview.jpg" alt="lightview.jpg" width="480" height="300" /></a></p>
</div>
<p>Built with prototype and scriptaculous. Supports plenty of media format.</p>
<h2><a style="text-decoration: none;" href="http://jqueryui.com/demos/dialog/">12. jQuery Dialog</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://jqueryui.com/demos/dialog/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/jquerydialog.jpg" alt="jquerydialog.jpg" width="480" height="300" /></a></p>
</div>
<p>jQuery UI also contains dialog component, although its nature is more like a dialog and form. But, you can customize to create your own flavor of image preview or gallery.</p>
<h2><a style="text-decoration: none;" href="http://prototype-window.xilinus.com/samples.html">13. Prototype Window</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://prototype-window.xilinus.com/samples.html"><img src="http://www.dottony.com/wp-content/uploads/2009/06/prototype.jpg" alt="prototype.jpg" width="480" height="300" /></a></p>
</div>
<p>A prototype based window dialog.</p>
<h2><a style="text-decoration: none;" href="http://mochaui.com">14. MochaUI</a></h2>
<h2><a style="text-decoration: none;" href="http://mochaui.com"></a><span style="font-size: 12px; font-weight: normal;"><a style="text-decoration: none;" href="http://mochaui.com"><img src="http://www.dottony.com/wp-content/uploads/2009/06/mochaui.jpg" alt="mochaui.jpg" width="480" height="300" /></a></span></h2>
<p>MochaUI is an UI framework for mootools. It includes dialog windows for displaying rich content.</p>
<h2><a style="text-decoration: none;" href="http://famspam.com/facebox/">15. Facebox</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://famspam.com/facebox/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/fambox.jpg" alt="fambox.jpg" width="480" height="300" /></a></p>
</div>
<p>Facebook lightbox aliked, jQuery based modal dialog. It support images, div or entire remote pages.</p>
<h2><a style="text-decoration: none;" href="http://onehackoranother.com/projects/jquery/boxy/">16. Boxy</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://onehackoranother.com/projects/jquery/boxy/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/boxy.jpg" alt="boxy.jpg" width="480" height="300" /></a></p>
</div>
<p>Facebox aliked, but it support more features like dragging and size tweening.</p>
<h2><a style="text-decoration: none;" href="http://www.wildbit.com/labs/modalbox/">17. ModalBox</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://www.wildbit.com/labs/modalbox/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/modalbox.png" alt="modalbox.png" width="480" height="398" /></a></p>
</div>
<p>A modal dialog that allow you to include html within. Build with prototype and scriptaculous.</p>
<h2><a style="text-decoration: none;" href="http://www.shadowbox-js.com/">18. Shadowbox</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://www.shadowbox-js.com/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/shadowbox.jpg" alt="shadowbox.jpg" width="480" height="300" /></a></p>
</div>
<p>Support most of the media format and it is customizable through css. On top of that, it is a standalone javascript solutions. It is free for non-commercial usage.</p>
<h2><a style="text-decoration: none;" href="http://www.stickmanlabs.com/lightwindow/">19. LightWindows</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://www.stickmanlabs.com/lightwindow/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/lightwindow.jpg" alt="lightwindow.jpg" width="480" height="300" /></a></p>
</div>
<p>A comprehensive lightbox solutions which enable you to embed images, video,iFrame, flash and more.</p>
<h2><a style="text-decoration: none;" href="http://www.ericmmartin.com/projects/simplemodal/#demo">20. SimpleModal</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://www.ericmmartin.com/projects/simplemodal/#demo"><img src="http://www.dottony.com/wp-content/uploads/2009/06/simplemodal.jpg" alt="simplemodal.jpg" width="480" height="300" /></a></p>
</div>
<p>Yet another jQuery based modal dialog.</p>
<h2><a style="text-decoration: none;" href="http://dev.iceburg.net/jquery/jqModal/#examples">21. jqModal</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://dev.iceburg.net/jquery/jqModal/#examples"><img src="http://www.dottony.com/wp-content/uploads/2009/06/jqmodal.jpg" alt="jqmodal.jpg" width="480" height="300" /></a></p>
</div>
<h2><a style="text-decoration: none;" href="http://www.phatfusion.net/lightbox/">22. Multibox</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://www.phatfusion.net/lightbox/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/multibox.jpg" alt="multibox.jpg" width="480" height="300" /></a></p>
</div>
<p>Support images,flash, video, mp3 and html and it is build with mootools.</p>
<h2><a style="text-decoration: none;" href="http://orangoo.com/labs/GreyBox/">23. Greybox</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://orangoo.com/labs/GreyBox/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/greybox.jpg" alt="greybox.jpg" width="480" height="300" /></a></p>
</div>
<p>Can be used to display websites, images and other content, doesn&#8217;t rely on any ajax framework.</p>
<h2><a style="text-decoration: none;" href="http://highslide.com/">24. Highslide</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://highslide.com/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/highslide.jpg" alt="highslide.jpg" width="480" height="300" /></a></p>
</div>
<p>A really quick and smooth free image viewer. It supports plenty of formats like html,ajax,iframe and flash.</p>
<h2><a style="text-decoration: none;" href="http://nofunc.org/Sexy_Box/">25. Sexybox</a></h2>
<div class="post-image">
<p><a style="text-decoration: none;" href="http://nofunc.org/Sexy_Box/"><img src="http://www.dottony.com/wp-content/uploads/2009/06/sexybox.jpg" alt="sexybox.jpg" width="480" height="100" /></a></p>
</div>
<p>Another standalone lightbox which display content directly from html.</p>
<h2>Lightbox Generator</h2>
<h2><a style="text-decoration: none;" href="http://visuallightbox.com/">VisualLightbox</a></h2>
<h2><a style="text-decoration: none;" href="%20http://pranas.net/WebGalleryCreator/">WebGalleryCreator</a></h2>
<h2>Lightbox Plugins for Wordpress</h2>
<h2><a style="text-decoration: none;" href="http://stimuli.ca/lightbox/">Lightbox2</a></h2>
<h2><a style="text-decoration: none;" href="http://www.pedrolamas.com/projectos/jquery-lightbox-en/">jQuery Lightbox</a></h2>
<h2><a style="text-decoration: none;" href="http://sivel.net/wordpress/shadowbox-js/">Shadowbox</a></h2>
<h2><a style="text-decoration: none;" href="http://web-argument.com/flexible-lightbox/">Flexible Lightbox</a></h2>
<p>If you need more lightbox plugin for wordpress, you can visit the link <a style="text-decoration: none;" href="http://speckyboy.com/2009/03/31/10-image-and-gallery-lightbox-solutions-for-wordpress-plugins/">here</a>.</p>
<h2>Alternative Solutions</h2>
<h2><a style="text-decoration: none;" href="http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/">Creating Lightbox with CSS</a></h2>
<h2><a style="text-decoration: none;" href="http://shiftingpixel.com/lightbox/">Firefox hack &#8211; Greased Lightbox</a></h2>
</div>


<p>Related posts:<ol><li><a href='http://www.dottony.com/shortener-shortener-40-url-shortener-at-your-services/' rel='bookmark' title='Permanent Link: Shortener..Shortener&#8230;40+ URL Shortener at Your Services!'>Shortener..Shortener&#8230;40+ URL Shortener at Your Services!</a></li>
<li><a href='http://www.dottony.com/10-tutorials-to-kickstart-your-wordpress-plugins-development/' rel='bookmark' title='Permanent Link: 10 Tutorials To Kickstart Your Wordpress Plugins Development'>10 Tutorials To Kickstart Your Wordpress Plugins Development</a></li>
<li><a href='http://www.dottony.com/60-awesome-sites-for-free-fonts/' rel='bookmark' title='Permanent Link: 60 Awesome Sites for Free Fonts'>60 Awesome Sites for Free Fonts</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.dottony.com/30-useful-ajax-lightbox-and-modal-dialog-solutions/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
	</channel>
</rss>
