SmoothGallery 2.1

First step: Install it.

Just insert those lines of code in the header of your html files:

1.Include those lines in your header:


 

2.Then, include the css:

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:

Item 1 Title

Item 1 Description



Item 2 Title

Item 2 Description



As you see, everything is contained in a container of id “myGallery” that contains several “imageElement” items.

Each item is composed of four values:

  • The first value is enclosed in an h3 tag and defines the title,
  • The second one is the current element’s description and is enclosed in a paragraph tag,
  • The third is the image link (url in the “href” part of the tag and title in the “title” part). (Only specify it if you have decided to show links in your gallery)
  • The fourth one is the full size image file,
  • And last but not least, there is finally the thumbnailed image file (Only specify it if you have decided to show the carousel in your gallery. By default, thumbnails are 100px wide and 75px tall).

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

To obtain a non-timed gallery:


function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.addEvent('domready', startGallery);
 

To obtain a timed gallery:


function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready', startGallery);

To obtain a simple timed slideshow with links:


function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);

To obtain a simple showcase slideshow without links (aka “manually rotated” slideshow):


function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false,
showArrows: true,
showCarousel: false,
embedLinks: false
});
}
window.addEvent('domready', startGallery);

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

 

  1. 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 :

Include this line in your header:

 

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


function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false,
useHistoryManager: true
});
HistoryManager.start();
}
window.addEvent('domready', startGallery);
 

Download: http://www.htmldrive.net/items/download/360

Leave a comment