JonDesign's SmoothGallery ^{2.0 !}

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

MooTools questions

1. I want to use mootools on my website for other effects but I need more components. What can I do ?
   

   You can make your own releases on the MooTools "build your own download" page.
   The components you will need for SmoothGallery are:

   • All from core
   • All from native
   • All from addons
   • All from Window
   • All from Effects
   • From Drag: Drag.Base
   • Nothing from remote
   • From Plugins: Scroller and Slider

Customizing the Gallery

1. How do I hide the arrows ?
   

   Very simple, just feed this option to gallery creator:
   showArrows: false

2. How do I hide the carousel ?
   

   Just like for the arrows, add this to the options:
   showCarousel: false

3. How do I hide the image information panel ?

   Yet another simple switch in the options:
   showInfopane: false

4. How do I change the arrows and their position ?
   

   Well, you have two options:

   • Either change the arrows for all the galleries, by changing those selectors background values in jd.gallery.css:
     .jdGallery a.left and .jdGallery a.right for all the browsers
     and * html .jdGallery a.left and * html .jdGallery a.right for IE6.
   • Or, you could change the arrows and position for a specific instance of the galleries in your own css file (called after the smoothgallery one), with the selectors:
     #myGalleryId a.left and #myGalleryId a.right
     (see how it's done in jd.gallery.css for more info on the css settings).

5. How do I change the image used for the links when there are arrows (the little light bulb) ?
   

   You have to change it the same way you change the arrows... Here the css selectors are .withArrows a.open:hover for standard compliant browsers and * html .withArrows a.open:hover for Internet Explorer 6.

6. How do I change the text on the carousel tab (the "Pictures" text) ?
   

   I'm glad you asked. Since you may have different languages on your website, each instance can have it's own text. To change it, just set this option:
   textShowCarousel: 'My new text'

7. How do I set up the slideshow to automatically go to the next image after a certain amount of time ? (timed slideshow)

   • To set the timed mode, just add this options:
     timed: true
   • Then, set your delay between image (default is 9000 miliseconds). For example, to have a delay of 5 seconds between images, set this option:
     delay: 5000

8. I want to change the way I feed the slideshow. How can I change the elements and classes it is using ?

   Doing so is very simple. SmoothGallery uses CSS Selectors to select elements and values. Just keep in mind that values are contained by an element.
   Here are the options to change the selectors used, and their default values:
   elementSelector: "div.imageElement",
titleSelector: "h3",
subtitleSelector: "p",
linkSelector: "a.open",
imageSelector: "img.full",
thumbnailSelector: "img.thumbnail"

Advanced functions

1. How do I call the gallery from outside ?

   First, when you create your gallery, you should store it in an object. In the Getting Started guide, we called this object myGallery so let's continue to use this name for our examples.
   Just call the childs functions like this:
   myGallery.myFunction(myArgs);

2. How do I make the gallery go to a specific image ?

   Just use the goTo function. But remember that its argument is an integer starting from 0 and not 1. For example, to make it skip to the fifth image, use this code:
   myGallery.goTo(4);

3. How do I make the gallery go to the next or previous image ?

   Sometime you might want to remove the built in buttons to make buttons outside the gallery. Doing that is very simple: Just make your buttons call the appropriate functions.
   The functions to make it go to the next or previous images are respectively:

   • myGallery.nextItem();
   • myGallery.prevItem();

Plug-Ins

1. How do I use the gallery with data from flickr ?

   Just download the version of smoothgallery with the flickr plugin and follow those steps:

   • Put proxy.php from the archive in the same folder as your html file.
   • Use demoflickr.html as an example of how to use it (if you've read the getting started guide, it's simple).

   See a demo of the Flickr plug-in !