JonDesign's SmoothGallery 2.1dev !

Let's get started !

How to use it ?

Step zero: Download it.

To download it, go to the download page. Once you've got the files, come back here.

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:

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.

Third step: Call it and feed it.

Now that we prepared the content, let's call our gallery (or slideshow) for lunch time.

There are several options, but let's try the most used patterns (insert the code in your page):

As you've seen, the first argument to the gallery creator is the element on which you want to apply the gallery. The second argument (optional) is the option dictionary containing all the gallery options.

Fourth step: Set its size.

The final step, set the slideshow size in your stylesheets like this (the default size is 460x345):

#myGallery
{
width: 400px !important;
height: 200px !important;
}

Fifth step: Taking care of thumbnails.

Unless you deactivate the carousel, you will need working thumbnails.

To generate the thumbnails, you have different options:

  1. Using the included php script to resize the pictures. To do that, use the option:
    useThumbGenerator: true If you use it:
    • Don't forget to make a "cache/" folder that is world writeable, so the script can cache your images.
    • Remove the images with class "thumbnail" from your element.
  2. Making your own generator or using manually resized images.
    To do so, use the way described above in the second step to give the thumbnail urls to SmoothGallery.

Optional step: Adding the History Manager plugin.

To enable urls that include the current slideshow position you have to do some simple things :

  1. Include this line in your header:
    <script src="scripts/HistoryManager.js" type="text/javascript"></script>
  2. Then, call your gallery like this (you may change the options according to your needs):
    <script type="text/javascript">
    function startGallery() {
    var myGallery = new gallery($('myGallery'), {
    timed: false,
    useHistoryManager: true
    });
    HistoryManager.start();
    }
    window.addEvent('domready', startGallery);
    </script>

Have more than one set of pictures to show? Enable the Gallery-Set feature!

Still have some questions? Head to the Extensive FAQ!