Using mootools v1.11, 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.

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 24kb.
Why consider it instead of a Flash-based solution ?

* Let’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 ?
* 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).
* Using a flash based solution, search engines won’t see your content nor links. Not really the expected result, right ?
* Oh, and do you really want to rely on a big company’s proprietary licensed app for your website ?
Browser Compatibility:
Since it’s based on the mootools library, it’s somehow platform agnostic. I have fully tested it on:
* Firefox
* Opera
* Internet Explorer 6 and 7
* Safari
Usage:
First step: Install it.

Just insert those lines of code in the header of your html files:

1. Include those lines in your header:

 <script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>   

2. Then, include the css:

 <link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />  

Second step: Prepare the meal.

Unlike it’s ancestor Smooth Slideshow, JonDesign’s Smooth Gallery uses a standard compliant (and search engine friendly) way to define the slideshow items.

So, add a code similar to this one (here I added 2 elements) to define the slideshow elements:

 <div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="mypage1.html" 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="mypage2.html" 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>   

As you see, everything is contained in a container of id “myGallery” that contains several “imageElement” items.

Each item is composed of four values:

* The first value is enclosed in an h3 tag and defines the title,
* The second one is the current element’s description and is enclosed in a paragraph tag,
* The third is the image link (url in the “href” part of the tag and title in the “title” part). (Only specify it if you have decided to show links in your gallery)
* The fourth one is the full size image file,
* And last but not least, there is finally the thumbnailed image file (Only specify it if you have decided to show the carousel in your gallery. By default, thumbnails are 100px wide and 75px tall).

Please note that the order of the values inside an element is not important, but their classes and type are. You can fully customize how the values are fetched by setting some options.

Demo: http://smoothgallery.jondesign.net/showcase/gallery/
Download: http://github.com/jon1012/smoothgallery/zipball/master
Source: http://smoothgallery.jondesign.net/what/

Related Listings:

1. Photo gallery with MooTools Photo Gallery is a open source gallery built with Mootools...
2. Dynamic Image Gallery with Slideshow This extremely lightweight JavaScript image gallery and slideshow script clocks...
3. Photo Gallery : Moo Tools Open Source Photo Gallery Designed with Mootools Javascript Library (E)2...
4. EO Gallery-Jquery EOGallery is a web animated slideshow gallery maid with jQuery....
5. Dynamic Image Gallery- Slideshow This extremely lightweight JavaScript image gallery and slideshow script clocks...

Do you like this post?

Email: