<?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>Cool Javascripts &#187; Galleries</title>
	<atom:link href="http://cool-javascripts.com/tag/galleries/feed" rel="self" type="application/rss+xml" />
	<link>http://cool-javascripts.com</link>
	<description>The best javascripts for your site</description>
	<lastBuildDate>Tue, 22 Mar 2011 14:35:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>10 jQuery plugins for showing image gallery</title>
		<link>http://cool-javascripts.com/galleries/10-jquery-plugins-for-showing-image-gallery.html</link>
		<comments>http://cool-javascripts.com/galleries/10-jquery-plugins-for-showing-image-gallery.html#comments</comments>
		<pubDate>Mon, 09 Feb 2009 13:03:48 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Galleries]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[image gallery]]></category>
		<category><![CDATA[slideshow]]></category>

		<guid isPermaLink="false">http://cool-javascripts.com/galleries/10-jquery-plugins-for-showing-image-gallery.html</guid>
		<description><![CDATA[An image gallery is part of the modern web 2.0 design. There are many ways to show it. For eg: thumbnail listing of images &#8211; clicking will show the corresponding large image in an overlay div &#8211; like lightbox. The other method is, list images inline &#8211; no popups. Here I&#8217;ve listed 10 jQuery plugins [...]


Related posts:<ol><li><a href='http://cool-javascripts.com/galleries/10-mootools-plugin-for-showing-image-gallery.html' rel='bookmark' title='Permanent Link: 10 Mootools plugin for showing image gallery'>10 Mootools plugin for showing image gallery</a> <small>In the previous post, I discussed about jQuery plugins for...</small></li><li><a href='http://cool-javascripts.com/modal-windows/highslide-the-best-image-gallery-script.html' rel='bookmark' title='Permanent Link: Highslide &#8211; The best image gallery script?'>Highslide &#8211; The best image gallery script?</a> <small> Highslide is a standalone javascript library created mainly for...</small></li><li><a href='http://cool-javascripts.com/effects/10-jquery-plugins-for-manipulating-images.html' rel='bookmark' title='Permanent Link: 10 jQuery plugins for manipulating images'>10 jQuery plugins for manipulating images</a> <small>This time, I want to list some jQuery plugins that...</small></li></ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>An image gallery is part of the modern web 2.0 design. There are many ways to show it. For eg: thumbnail listing of images &#8211; clicking will show the corresponding large image in an overlay div &#8211; like lightbox. The other method is, list images inline &#8211; no popups. </p>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/02/jquery-galleries.jpg" /></p>
<p>Here I&#8217;ve listed 10 jQuery plugins which can be used for this type of gallery. All these plugins can show images with some transition effects. I didn&#8217;t consider lightbox like (popup) scripts. But you may be interested in the following articles.</p>
<ul>
<li>
<a href="http://cool-javascripts.com/galleries/three-lightbox-clones-for-mootools.html">Three lightbox clones for Mootools</a></li>
<li><a href="http://cool-javascripts.com/galleries/which-is-the-best-lightbox-clone-for-jquery.html">Which is the best lightbox clone for jQuery ?</a></li>
</ul>
<p><span id="more-171"></span></p>
<h3>Galleria</h3>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/02/galleria.jpg" /></p>
<blockquote><p>
Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.</p></blockquote>
<blockquote><p>
The core of Galleria lies in it&#8217;s smart preloading behaviour, snappiness and the fresh absence of obtrusive design elements. Use it as a foundation for your custom styled image gallery.</p></blockquote>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">Less than 5KB (Compressed)</td>
</tr>
<tr>
<th>Restrictions</th>
<td>None (GPL)</td>
</tr>
<tr>
<th>Demo</th>
<td><a class="opensame" rel="shadowbox" href="http://devkick.com/lab/galleria/demo_01.htm">Open</a> | <a class="opennew" href="http://devkick.com/lab/galleria/demo_01.htm" target="_blank">Open in new window</a></td>
</tr>
<tr>
<th>Info &amp; Download</th>
<td><a class="opennew" href="http://devkick.com/lab/galleria/">Open</a></td>
</tr>
</tbody>
</table>
<h3>Gallerific</h3>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/02/galleriffic-a-jquery-plugin-for-rendering-fast-performing-photo-galleries.jpg" /></p>
<p><strong>Features</strong>
<ul>
<li>Smart image preloading <strong>after</strong> the page is loaded</li>
<li>Thumbnail navigation (with pagination)</li>
<li>Support for bookmark-friendly URLs per-image</li>
<li>Slideshow (with optional auto-updating url bookmarks)</li>
<li>Events that allow for adding your own custom transition effects</li>
<li>Support for image captions</li>
<li>Flexible configuration</li>
<li>Graceful degradation when javascript is not available</li>
<li>Support for multiple galleries per page</li>
</ul>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">12 KB (Minified)</td>
</tr>
<tr>
<th>Restrictions</th>
<td>None</td>
</tr>
<tr>
<th>Demo &amp; Download</th>
<td><a class="opensame" rel="shadowbox" href="http://www.twospy.com/galleriffic/">Open</a> | <a class="opennew" href="http://www.twospy.com/galleriffic/" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<h3>S3 Slider</h3>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/02/s3slider-jquery-plugin.jpg" /></p>
<p>It is a simple &amp; lightweight jQuery plugin which can show images with captions. It is useful, if we want to show image slide shows without thumbnails.</p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">Less than 2KB (Packed)</td>
</tr>
<tr>
<th>Restrictions</th>
<td>None</td>
</tr>
<tr>
<th>Demo</th>
<td><a class="opensame" rel="shadowbox" href="http://www.serie3.info/s3slider/demonstration.html">Open</a> | <a class="opennew" href="http://www.serie3.info/s3slider/demonstration.html" target="_blank">Open in new window</a></td>
</tr>
<tr>
<th>Info &amp; Download</th>
<td><a class="opennew" href="http://www.serie3.info/s3slider/" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<h3>Coda Slider</h3>
<p>Though it is not limited to showing images, it is still an option to show images.<br />
<a href="http://cool-javascripts.com/effects/jquery-coda-slider.html"><br />
Read more</a></p>
<h3>Slide Viewer</h3>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/02/jquery-slideviewer-11.jpg" /></p>
<blockquote><p>
slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images</p></blockquote>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2, jQuery Easing plugin</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">Less than 2KB (Packed)</td>
</tr>
<tr>
<th>Restrictions</th>
<td>None</td>
</tr>
<tr>
<th>Demo &amp; Download</th>
<td><a class="opensame" rel="shadowbox" href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html">Open</a> | <a class="opennew" href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<h3>Easy Slider</h3>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/02/easy-slider-jquery-plugin-demo.jpg" /></p>
<p>This is a multipurpose sliding gallery. It can show images or text contents. </p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">8KB (Uncompressed)</td>
</tr>
<tr>
<th>Restrictions</th>
<td>None</td>
</tr>
<tr>
<th>Demo</th>
<td><a class="opensame" rel="shadowbox" href="http://cssglobe.com/lab/easyslider1.5/04.html">Open</a> | <a class="opennew" href="http://cssglobe.com/lab/easyslider1.5/04.html" target="_blank">Open in new window</a></td>
</tr>
<tr>
<th>Info &amp; Download</th>
<td><a class="opennew" href="http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<h3>Crossfade</h3>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/02/crossslide-a-jquery-plugin-to-create-pan-and-cross-fade-animations.jpg" /></p>
<p>It supports some very advanced transition effects like <a href="http://en.wikipedia.org/wiki/Ken_Burns_Effect" target="_blank">Ken Burns effect</a>. The transitions can be customized.</p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">Less than 12KB </td>
</tr>
<tr>
<th>Restrictions</th>
<td>None (GPL)</td>
</tr>
<tr>
<th>Demo &amp; Download</th>
<td><a class="opensame" rel="shadowbox" href="http://www.gruppo4.com/~tobia/cross-slide.shtml">Open</a> | <a class="opennew" href="http://www.gruppo4.com/~tobia/cross-slide.shtml" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<h3>Innerfade</h3>
<p>InnerFade is a small plugin for the jQuery-JavaScript-Library. It&#8217;s designed to fade you any element inside a container in and out.These elements could be anything you want, e.g. images, list-items, divs.</p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">Less than 6KB </td>
</tr>
<tr>
<th>Restrictions</th>
<td>None</td>
</tr>
<tr>
<th>Demo &amp; Download</th>
<td><a class="opensame" rel="shadowbox" href="http://medienfreunde.com/lab/innerfade/">Open</a> | <a class="opennew" href="http://medienfreunde.com/lab/innerfade/" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<p>9. Enhance Gallery</p>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/02/gallery-1.jpg" /></p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">Less than 4KB </td>
</tr>
<tr>
<th>Restrictions</th>
<td>None</td>
</tr>
<tr>
<th>Demo &amp; Download</th>
<td><a class="opensame" rel="shadowbox" href="http://enhance.qd-creative.co.uk/2008/07/12/an-image-gallery/">Open</a> | <a class="opennew" href="http://enhance.qd-creative.co.uk/2008/07/12/an-image-gallery/" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<h3>jQuery Cycle plugin</h3>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/02/jquery-cycle-plugin.jpg" /></p>
<blockquote><p>The jQuery Cycle Plugin is a lightweight slideshow plugin. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.</p></blockquote>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">18 KB (With all transition effects &#8211; Core plugin 9KB) </td>
</tr>
<tr>
<th>Restrictions</th>
<td>None</td>
</tr>
<tr>
<th>Demo &amp; Download</th>
<td><a class="opensame" rel="shadowbox" href="http://malsup.com/jquery/cycle/">Open</a> | <a class="opennew" href="http://malsup.com/jquery/cycle/" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<h3>Space Gallery</h3>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2009/02/spacegallery-jquery-plugin.jpg" /></p>
<table border="0">
<tbody>
<tr>
<th>Dependencies</th>
<td>jQuery 1.2</td>
</tr>
<tr>
<th>Size</th>
<td class="alt">13 KB </td>
</tr>
<tr>
<th>Restrictions</th>
<td>None</td>
</tr>
<tr>
<th>Demo &amp; Download</th>
<td><a class="opensame" rel="shadowbox" href="http://eyecon.ro/spacegallery/">Open</a> | <a class="opennew" href="http://eyecon.ro/spacegallery/" target="_blank">Open in new window</a></td>
</tr>
</tbody>
</table>
<h3>Image Flow</h3>
<p><img src="http://cool-javascripts.com/wp-content/uploads/2008/07/imageflow.jpg" /></p>
<p>Another image gallery that mimics apple&#8217;s coverflow animation.<br />
<a href="http://cool-javascripts.com/effects/image-flow-09.html">Read more</a></p>


<p>Related posts:<ol><li><a href='http://cool-javascripts.com/galleries/10-mootools-plugin-for-showing-image-gallery.html' rel='bookmark' title='Permanent Link: 10 Mootools plugin for showing image gallery'>10 Mootools plugin for showing image gallery</a> <small>In the previous post, I discussed about jQuery plugins for...</small></li><li><a href='http://cool-javascripts.com/modal-windows/highslide-the-best-image-gallery-script.html' rel='bookmark' title='Permanent Link: Highslide &#8211; The best image gallery script?'>Highslide &#8211; The best image gallery script?</a> <small> Highslide is a standalone javascript library created mainly for...</small></li><li><a href='http://cool-javascripts.com/effects/10-jquery-plugins-for-manipulating-images.html' rel='bookmark' title='Permanent Link: 10 jQuery plugins for manipulating images'>10 jQuery plugins for manipulating images</a> <small>This time, I want to list some jQuery plugins that...</small></li></ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://cool-javascripts.com/galleries/10-jquery-plugins-for-showing-image-gallery.html/feed</wfw:commentRss>
		<slash:comments>29</slash:comments>
		</item>
	</channel>
</rss>

