nanoGALLERY4 jQuery plugin - Helpers

by Christophe Brisbois

HTML

<link rel="stylesheet" href="http://nanogallery.brisbois.fr/css/nanogallery.css">
<script src="http://nanogallery.brisbois.fr/jquery.nanogallery.js"></script>
<h2>nanoGALLERY: helpers for thumbnail hover effect</h2>

<div id="nanoGallery">
    <a href="http://brisbois.fr/nanogallery4/demonstration/image_01.jpg" 
        data-ngthumb="http://brisbois.fr/nanogallery4/demonstration/image_01t.jpg"
        data-ngdesc="Description1">Image1</a>
    <a href="http://brisbois.fr/nanogallery4/demonstration/image_02.jpg" 
        data-ngthumb="http://brisbois.fr/nanogallery4/demonstration/image_02t.jpg" 
        data-ngdesc="Description2">Image2</a>
    <a href="http://brisbois.fr/nanogallery4/demonstration/image_03.jpg"
        data-ngthumb="http://brisbois.fr/nanogallery4/demonstration/image_03t.jpg"
        data-ngdesc="Description3">Image3</a>
</div>

CSS

body {
    background:#333;
    color:#eee;
}

JavaScript

$(document).ready(function () {
    $("#nanoGallery").nanoGallery({
        thumbnailWidth: 120,
        thumbnailHeight: 80,
        colorScheme: 'Light',
        thumbnailLabel: {
            display: true,
            position: 'overImageOnBottom'
            
        },
        thumbnailHoverEffect:'borderLighter,descriptionSlideUp',
        fnThumbnailHoverInit: function ($elt, item) {
            $elt.find('.labelDescription').css({'opacity':'0'});
        },
        fnThumbnailHover: function ($elt, item) {
            $elt.find('.labelDescription').delay(150).animate({'opacity':'1'},400);
        },
        fnThumbnailHoverOut: function ($elt, item) {
            $elt.find('.labelDescription').animate({'opacity':'0'},300);
        }
    });
});