«Gallerific» Image Gallery

This is a Gallery Script that uses «Gallerific» – a universal jQuery plugin for creating all kinds of galleries. You can find full installation and configuration instructions by following this link.

JavaScript
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code in order to include jquery.galleriffic.js script and jQuery framework:

Two additional script files are optional. jquery.history.js script enables history support for the gallery. jquery.opacityrollover.js script enables opacity rollover effect for gallery thumbnails.

HTML
Below you can see general HTML script representation:

The elements represented here are optional. Each <div> element defines the following gallery parts:
•  #controls – adds gallery navigation block;
•  #loading – adds a block that displays a spinner image till gallery images are being loaded;
•  #slideshow – adds big image block;
•  #caption – adds image description block;
•  #thumbs – thumbnail images block.

Next you can see thumbnails block markup:

The link (<a> tag) contains a href reference with a path to a big image. Optionally you can add title and alt attributes. In order to add an extra image you just need to copy a list element (<li> tag) with its content.
The gallery initialization is placed to the end of HTML coding (just before </body> closing tag) and contains all the necessary configuration values. The script is well-commented so you can always get to know which attributes to change in order to customize the gallery functionality.