Next Prev

Smooth Gallery

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...

Some of you might have heard of JonDesign's SmoothSlideshow. SmoothGallery is its evolution.

So, what is so cool about it ?

Unlike other systems out there, JonDesign's SmoothGallery is designed from the ground up to be standard compliant: You can feed it from any document, using custom css selectors.

And even better, this solutions is very lightweight: The javascript file is only 16kb.

Web 2.0 Box Generator

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
<base href="http://www.ajaxdaddy.com/web20/mootools/smooth-gallery/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>JonDesign's SmoothGallery demo</title>

		<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
    
		<script src="javascript/mootools.js" type="text/javascript"></script>
		<script src="javascript/jd.gallery.js" type="text/javascript"></script>
	</head>
	<body>
  <center>
		<h1><a href="http://english.jondesign.net/"><span class="company">JonDesign's</span></a>SmoothGallery 1.0.1<sup>demo</sup></h1>
		<script type="text/javascript">
			function startGallery() {
				var myGallery = new gallery($('myGallery'), {
					timed: false
				});
			}
			window.onDomReady(startGallery);
		</script>
		<div class="content">
			<div id="myGallery">
				<div class="imageElement">
					<h3>Item 1 Title</h3>
					<p>Item 1 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/1.jpg" class="full" />
					<img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 2 Title</h3>
					<p>Item 2 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/2.jpg" class="full" />
					<img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 3 Title</h3>
					<p>Item 3 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/3.jpg" class="full" />
					<img src="images/brugges2006/3-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 4 Title</h3>
					<p>Item 4 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/4.jpg" class="full" />
					<img src="images/brugges2006/4-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 5 Title</h3>
					<p>Item 5 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/5.jpg" class="full" />
					<img src="images/brugges2006/5-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 6 Title</h3>
					<p>Item 6 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/6.jpg" class="full" />
					<img src="images/brugges2006/6-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 7 Title</h3>
					<p>Item 7 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/7.jpg" class="full" />
					<img src="images/brugges2006/7-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 8 Title</h3>
					<p>Item 8 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/8.jpg" class="full" />
					<img src="images/brugges2006/8-mini.jpg" class="thumbnail" />
				</div>
			</div>
		</div>
  </center>
	</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Peer

2009-03-17 14:35:18

Does anyway have a problem with the text being too small to read? Any ideas?

Bilal Ahmed

2009-03-06 06:40:41

I have an issue with this slideshow, it gives error when you just have one image :( you can try this even by leaving only first item.

Fhald

2009-03-03 09:49:05

This is great but are there any way to add/delete images online with this tool?

Saat

2009-02-18 12:27:36

I am also using this example in my own web page you can look

Dwee

2008-10-29 08:17:30

geee... this what I am looking for. I have to try it. :D

Ikea

2008-05-06 02:16:30

Yes,this is so amazing,good work!

Michel

2008-04-30 03:44:50

Nice work.....

Vlad

2008-04-01 14:15:44

This is amazing! Do the pictures need to have all the same size for it to work?

Marmaris

2008-03-25 16:14:42

excellent i was loking for this

Arunachalam

2008-01-16 08:29:12

this example is best

Xrvel

2007-10-04 01:40:48

Nice gallery. The effect is smooth.

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Smooth Gallery

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...

Some of you might have heard of JonDesign's SmoothSlideshow. SmoothGallery is its evolution.

So, what is so cool about it ?

Comment on this example

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Smooth Gallery

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... Some of you might have heard of JonDesign's SmoothSlideshow. SmoothGallery is its evolution.

So, what is so cool about it ?

Comment on this example

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...

Some of you might have heard of JonDesign's SmoothSlideshow. SmoothGallery is its evolution.