http://smoothgallery.jondesign.net/what/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>JonDesign's (Javascript) SmoothGallery: Mootools Mojo for Images | What is it ?</title>
		<link rel="stylesheet" href="/assets/site/css/layout.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="/assets/site/css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
		<script src="/assets/site/scripts/mootools.js" type="text/javascript"></script>
		<script src="/assets/site/scripts/jd.gallery.js" type="text/javascript"></script>
		<script src="/assets/site/scripts/pages.js" type="text/javascript"></script>
		<base href="http://smoothgallery.jondesign.net/" />
	<script type="text/javascript">var MODX_MEDIA_PATH = "media";</script>
</head>
	<body>
		<div class="header">
			<h1><a href="http://english.jondesign.net/" title="JonDesign, Tailored website solutions"><span class="company">JonDesign's</span></a> <a href="what/" title="JonDesign's (Javascript) SmoothGallery: Mootools Mojo for Images">SmoothGallery</a> <sup>1.0.1</sup></h1>
		</div>
<div class="information_bar">
	<ul class="sideMenu">
		<li class="here">See it live on JonDesign websites
			<ul>
				<li>
					<a href="http://www.holdiland.com/" title="Used in the animated product ads on the top">Holdiland.com</a>
				</li>
				<li>
					<a href="http://www.jondesign.net/" title="JonDesign last projects showcase">JonDesign.net</a>
				</li>
				<li>
					<a href="http://www.foresightlinux.com/screenshots/">Foresight Linux Screenshots</a>
				</li>
			</ul>
		</li>
	</ul>
<!--<div style="float: left; margin-top: 1em;">
<script>
		digg_url ='http://digg.com/programming/Impressive_javascript_Smooth_Gallery_v1_0_released';
	</script>
	<script src='http://digg.com/api/diggthis.js'>
	</script>
</div>-->
	<div style="text-align: right; margin-top: 1em;">
		<script type="text/javascript"><!--
		google_ad_client = "pub-9161233029115045";
		google_alternate_color = "222222";
		google_ad_width = 120;
		google_ad_height = 240;
		google_ad_format = "120x240_as";
		google_ad_type = "text_image";
		//2006-12-25: SmoothGallery
		google_ad_channel = "4821821138";
		google_color_border = "111111";
		google_color_bg = "333333";
		google_color_link = "92BDFA";
		google_color_text = "FFFFFF";
		google_color_url = "BDFA91";
		//--></script>
		<script type="text/javascript"
		  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>
	</div>
</div>
		<h2>What is it ?</h2>
		<div class="content">
			<script src="/assets/site/scripts/jd.gallery.js" type="text/javascript"></script>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('jdsgShowcase'), {
timed: true,
showArrows: false,
showInfopane: false,
showCarousel: false,
embedLinks: false,
delay: 4000
});
}
window.onDomReady(startGallery);
</script>
<div id="jdsgShowcase">
				<div class="imageElement">
					<img src="assets/images/showcase_slides/screen-1.gif" class="full" alt="Because a picture is worth a thousand words." />
				</div>				<div class="imageElement">
					<img src="assets/images/showcase_slides/screen-2.gif" class="full" alt="Because accessibility is mandatory." />
				</div>				<div class="imageElement">
					<img src="assets/images/showcase_slides/screen-3.gif" class="full" alt="Because Search-Engines should read your content." />
				</div>				<div class="imageElement">
					<img src="assets/images/showcase_slides/screen-4.gif" class="full" alt="Because you want to be cool." />
				</div>				<div class="imageElement">
					<img src="assets/images/showcase_slides/screen-5.gif" class="full" alt="And last but not least, because open-source rocks." />
				</div>				<div class="imageElement">
					<img src="assets/images/showcase_slides/screen-6.png" class="full" alt="JonDesign’s SmoothGallery 1.0 is there for you !" />
				</div>				<div class="imageElement">
					<img src="assets/images/showcase_slides/screen-7.png" class="full" alt="Brought to you by JonDesign, tailored website solutions." />
				</div>
</div>
<h3>Using mootools v1.0, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading...) image galleries, slideshows, showcases and other cool stuff on your website...</h3>
<p>
Some of you might have heard of JonDesign&#39;s SmoothSlideshow. SmoothGallery is its evolution.
</p>
<h4>So, what is so cool about it ?&nbsp;</h4>
<p>
Unlike other systems out there, JonDesign&#39;s SmoothGallery is designed from the ground up to be standard compliant: You can feed it from any document, using custom css selectors.
</p>
<p>
And even better, this solutions is very lightweight: The javascript file is only 16kb.
</p>
<h4>
Why consider it instead of a Flash-based solution ?
</h4>
<ul>
	<li>Let&#39;s
	imagine you want to add a showcase of your last products, or even a
	showcase of one product on your homepage. Would you want to restrict it
	only to the users who have Flash enabled ? </li>
	<li>Another
	important point is the fact that using this script, you will have fully
	standard compliant web pages (which is important for accessibility, for
	example).</li>
	<li>Using a flash based solution, search engines won&#39;t see your content nor links. Not really the expected result, right ?<br />
	</li>
	<li>Oh, and do you really want to rely on a big company&#39;s proprietary licensed app for your website ?<br />
	</li>
</ul>
<h4>
Wow cool ! How much does it costs ?
</h4>
<p>
Nothing, it&#39;s free as in beer and even better, this library is
open-source, GPL licensed to be precise. 
</p>
<h4>
On what browsers does it run ?
</h4>
<p>
Since it&#39;s based on the mootools library, it&#39;s somehow platform agnostic. I have fully tested it on:
</p>
<ul>
	<li>
	<strong>Firefox</strong>
	</li>
	<li>
	<strong>Opera</strong>
	</li>
	<li>
	<strong>Internet Explorer</strong> <em>6</em> and <em>7</em></li>
	<li><strong>Safari</strong></li>
</ul>
<p class="linkage">
<a href="showcase/gallery/">
&quot;Gallery or it didn&#39;t happen&quot; ? let&#39;s see the demos !
</a>
</p>

		</div>
		<div class="navigation">
			<h2>Navigation</h2>
			<ul><li class="active"><a href="/what/" title="What is it ?" >What</a></li><li><a href="/showcase/gallery/" title="Showcase" >Showcase</a><ul><li><a href="/showcase/gallery/" title="Full gallery" >Full gallery</a></li><li><a href="/showcase/timed-gallery/" title="Timed gallery" >Timed gallery</a></li><li><a href="/showcase/simple-slideshow/" title="Timed Slideshow" >Timed Slideshow</a></li><li><a href="/showcase/manual-slideshow/" title="Showcase Slideshow" >Showcase Slideshow</a></li><li class="last"><a href="/showcase/timed-image-switcher/" title="Timed Image Switcher" >Timed Image Switcher</a></li></ul></li><li><a href="/download/" title="Download" >Download</a></li><li><a href="/getting-started/" title="Getting started" >Getting Started</a><ul><li><a href="/getting-started/faq/" title="Frequently Asked Questions" >FAQ</a></li></ul></li><li class="last"><a href="/forums/" title="Forums" >Forums</a></li></ul>
		</div>
		<div class="ads">
			<script type="text/javascript"><!--
			google_ad_client = "pub-9161233029115045";
			google_alternate_color = "222222";
			google_ad_width = 468;
			google_ad_height = 60;
			google_ad_format = "468x60_as";
			google_ad_type = "text_image";
			//2006-12-18: SmoothGallery
			google_ad_channel = "4821821138";
			google_color_border = "111111";
			google_color_bg = "444444";
			google_color_link = "92BDFA";
			google_color_text = "FFFFFF";
			google_color_url = "BDFA91";
			//--></script>
			<script type="text/javascript"
			  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
			</script>
		</div>
		<div class="footer">
				<p>
						Copyright 2005-2007 <a href="http://english.jondesign.net/">JonDesign</a> (Jonathan Schemoul).
				</p>
		</div>
		<script type="text/javascript">
			<!--
			function replaceText(text){
				while(text.lastIndexOf("&") > 0){
	    				text = text.replace('&', '[i-Stats]');
				}
				return text;
			}
			var web_referrer = replaceText(document.referrer);
	
			istat = new Image(1,1);
			istat.src = "http://www.jondesign.net/stats/counter.php?sw="+screen.width+"&sc="+screen.colorDepth+"&referer="+web_referrer+"&page="+location.href;
			//-->
		</script>
		<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
		<script type="text/javascript">
				_uacct = "UA-190355-8";
				urchinTracker();
		</script>
	</body>
</html>