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.

Installation:
1: If you’ve not already done it, add the SmoothGallery lines to your header:

<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" /> 

2: Then, include the Gallery-Set script to your header:

<script src="scripts/jd.gallery.set.js" type="text/javascript"></script>

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

<div id="myGallerySet">
  <div id="gallery1" class="galleryElement">
    <h2>Brugges 2006</h2>
    <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>
  <div id="gallery2" class="galleryElement">
    <h2>Stock Photos</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/stock/77196_6784.jpg" class="full" alt="Item 1 Title"/>
      <img src="images/stock/77196_6784_002.jpg" class="thumbnail" alt="thumbnail of Item 1 Title"/>
    </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/stock/165392_5486.jpg" class="full" alt="Item 2 Title"/>
      <img src="images/stock/165392_5486_002.jpg" class="thumbnail" alt="thumbnail of Item 2 Title"/>
    </div>
  </div>
</div>

Now that we prepared the content, let’s call our gallery set for lunch time. Insert this code in your page :

<script type="text/javascript">
function startGallery() {
var myGallerySet = new gallerySet($('myGallerySet'), {
timed: false
});
}
window.addEvent('domready', startGallery);
</script> 

Demo: http://smoothgallery.jondesign.net/showcase/gallery

Download: http://github.com/jon1012/smoothgallery/zipball/master

Source: http://smoothgallery.jondesign.net/showcase/gallery

Related Listings:

1. Showcase Standard Gallery Script using Mootools Using mootools v1.11, this javascript gallery and slideshow system allows...
2. AJAX image gallery Script Pyxy-gallery is an AJAX image gallery in PHP and JavaScript,...
3. Ajax Photo Gallery The AJAX version of AgileGallery is a free AJAX photo...
4. Minishowcase Gallery Script Minishowcase is a small and simple php/javascript online photo gallery,...
5. Dynamic Image Gallery- Slideshow This extremely lightweight JavaScript image gallery and slideshow script clocks...

Do you like this post?

Email: