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 460×345):

#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:

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.

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 :

Include this line in your header:

Then, call your gallery like this (you may change the options according to your needs):