JonDesign's SmoothGallery ^{2.0 !}

What do I need ?

If you haven't done it yet, go through the Getting Started guide before reading this guide.

First step: Install it.

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>

Second step: Prepare 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>


As you see, everything is contained in a container of id "myGallerySet" that contains two "galleryElement" that are made like normal galeries except for a h2 title.

Third step: Call it and feed it.

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>

Fifth step: Enjoy.

That was easy, isn't it ?
Now, all the steps included in the go through the Getting Started guide apply here also, so please read it in detail before going to the FAQ.

Still have some questions ? Head to the Extensive FAQ !