Galleriffic

14 January 2010 Thursday

This application was viewed 3290 times




Share|

Galleriffic

Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.

View the DEMO

Galleriffic

A jQuery plugin for rendering rich, fast-performing photo galleries

Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.

Features

  • Smart image preloading after the page is loaded
  • Thumbnail navigation (with pagination)
  • jQuery.history plugin integration to support bookmark-friendly URLs per-image
  • Slideshow (with optional auto-updating url bookmarks)
  • Keyboard navigation
  • Events that allow for adding your own custom transition effects
  • API for controlling the gallery with custom controls
  • Support for image captions
  • Flexible configuration
  • Graceful degradation when javascript is not available
  • Support for multiple galleries per page

Examples

Usage

  1. Download the latest version of Galleriffic below and jQuery 1.3.2 or later (use other versions of jQuery at your own risk)
  2. Setup the script references in the header: 
    <head>
    ...
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/jquery.galleriffic.js"></script>

    <!-- Optionally include jquery.history.js for history support -->
    <script type="text/javascript" src="js/jquery.history.js"></script>
    <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
    ...
</head>
                       
  3. Add container elements to your page. All container elements are optional, so you may choose to not include an area (such as the loading or caption container elements). Here is an example of all the elements needed for a full-featured setup: 
    <div id="controls"></div>
<div id="loading"></div>
<div id="slideshow"></div>
<div id="caption"></div>
<div id="thumbs">
    ... graceful degrading list of thumbnails (specific format specified below) ...
</div>
                       
  4. Within the thumbnails container element, build your graceful degrading unordered list of thumbnails linking to the image slides as such: 
    <div id="thumbs">
    <ul class="thumbs noscript">
        <li>
            <a class="thumb" name="optionalCustomIdentifier" href="path/to/slide" title="your image title">
                <img src="path/to/thumbnail" alt="your image title again for graceful degradation" />
            </a>
            <div class="caption">
                (Any html can go here)
            </div>
        </li>
        ... (repeat for every image in the gallery)
    </ul>
</div>
                       
    It is important to specify the ´thumb´ class for the link that should serve as the thumbnail and the ´caption´ class for the element that should serve as the caption. When an image is selected for display in the slideshow, any elements with the ´caption´ class will be rendered within the specified caption container element above.
  5. Initialize the gallery by calling the galleriffic initialization function on the thumbnails container, passing in optional settings. The following example shows the default options: 
    jQuery(document).ready(function($) {
    var gallery = $(´#thumbs´).galleriffic({
        delay:                     3000 // in milliseconds        numThumbs:                 20 // The number of thumbnails to show page        preloadAhead:              40 // Set to -1 to preload all images        enableTopPager:            false,
        enableBottomPager:         true,
        maxPagesToShow:            7  // The maximum number of pages to display in either the top or bottom pager        imageContainerSel:         ´´, // The CSS selector for the element within which the main slideshow image should be rendered        controlsContainerSel:      ´´, // The CSS selector for the element within which the slideshow controls should be rendered        captionContainerSel:       ´´, // The CSS selector for the element within which the captions should be rendered        loadingContainerSel:       ´´, // The CSS selector for the element within which should be shown when an image is loading        renderSSControls:          true, // Specifies whether the slideshow´s Play and Pause links should be rendered        renderNavControls:         true, // Specifies whether the slideshow´s Next and Previous links should be rendered        playLinkText:              ´Play´,
        pauseLinkText:             ´Pause´,
        prevLinkText:              ´Previous´,
        nextLinkText:              ´Next´,
        nextPageLinkText:          ´Next &rsaquo;´,
        prevPageLinkText:          ´&lsaquo; Prev´,
        enableHistory:             false, // Specifies whether the url´s hash and the browser´s history cache should update when the current slideshow image changes        enableKeyboardNavigation:  true, // Specifies whether keyboard navigation is enabled        autoStart:                 false, // Specifies whether the slideshow should be playing or paused when the page first loads        syncTransitions:           false, // Specifies whether the out and in transitions occur simultaneously or distinctly        defaultTransitionDuration: 1000 // If using the default transitions, specifies the duration of the transitions        onSlideChange:             undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }        onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }        onTransitionIn:            undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }        onPageTransitionOut:       undefined, // accepts a delegate like such: function(callback) { ... }        onPageTransitionIn:        undefined, // accepts a delegate like such: function() { ... }        onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }        onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }    });
});
                       

FAQ

Will Galleriffic generate the slide and thumbnail images automatically?

I have been asked a lot if Galleriffic automatically generates the thumbnails and slides. Galleriffic by itself does not do any image processiong or generation; however, there is a great tool that does: jAlbum. I have created a jAlbum skin that I use myself for creating my personal galleries. After installing jAlbum and the Galleriffic jAlbum skin, simply choose your source image directory and an output directory, click "Make Album", and wallah, you now have a complete html gallery with 3 different size versions of each image.

How can I change the number of thumbnail columns?

With the stylesheet used in these examples, each thumbnail is floated left, and thus as many thumbnails that will fit in the width of the column will be displayed. If you want fewer or more columns, make the width of the navigation panel smaller or larger. In all but the last example, I am setting the width using javascript with the following lines in the html page:

    $(´div.navigation´).css({´width´ : ´300px´, ´float´ : ´left´});
    $(´div.content´).css(´display´, ´block´);

Tags: image, pretty photo, jquery, lightbox,


GallerifficBookmark and Share

Comments

You write your thoughts

Please login to post comments here from the right corner.

your add
icon free icon icon set vector icon free catalog catalog template jquery news ticker widget tools tutorial php slider video youtube effects menu thumbnail forms facebook zoom image combo multiselect modal polaroid gallery expand code feedback contact navigation slider tagcloud Skateboard psd templates files badges subscribe panel login temlate file free office holland free template tabs prototype css scriptaculous opacity moo autocomplete wordpress themes design theme button images photoshop fonts font nav pdf logo style high javascript pretty photo jqery lightbox Themes Blog popular blog desing joomla xhtml brushes hair footer admin mootols slide show blackbox new download class first plugin upload browse Page effect modalbox web application urlitooltips sliding boxes captions flatchat chat ajax messaging browser hoverlightbox CSS Dev General Javascript PHP SQL search avatar vector Drupal Joomla Oscommerce javaScript phototype manager ajaxplorer flash xml rotator bookmarking pageflip slideshow poll text component script mediaplayer imagegallery pictograms car poster player mp3 radio onlineradio navigations drop-down collection brush tree textures paper pop-up bumpbox web2.0 iphone film frame twitter page fan mail delete dynamic calender form handbook city social paint timeline clock connect bar sharing accordion quotes ticker photo-effects background 3D media player graphic rss leaf green glossy bubble icon comic clean cool web 2.0 png actionscript ietter rotating Menu animated textured site masking pasword app layer sponge bob popup bubble tooltips horizontal prototip tooltip pack charachters comics blog action icon.psd flavour navi tango gradients istanbul mixed css3 sleek animations program html5 website Layer styles ultimate candy Media icons dropdown snow icon innerfade hover sub tag