Using a jquery gallery twice on the same page

I'm using a simple jquery gallery (JQuery Hover Effect Image Gallery For eCommerce) and it works perfect.

On one of the pages there are two galleries and I want to use this script. I well versed in Javascript to extend the script to support both galleries and I would really appreciate if someone could take a look..

The code for the gallery is as follows:

$(document).ready(function() {
    $('#thumbs ul li a').hover(
        function() {
            var currentBigImage = $('#bigpic img').attr('src');
            var newBigImage = $(this).attr('rev');
            var currentThumbSrc = $(this).attr('rel');
            switchImage(newBigImage, currentBigImage, currentThumbSrc);
        },
        function() {}
    );

    function switchImage(imageHref, currentBigImage, currentThumbSrc) { 
        var theBigImage = $('#bigpic img');

        if (imageHref != currentBigImage) {     
            theBigImage.fadeOut(250, function() {
                theBigImage.attr('src', imageHref).fadeIn(250);

                var newImageDesc = $("#thumbs ul li a img[src='"+currentThumbSrc+"']").attr('alt');
      开发者_如何学Go          $('p#desc').empty().html(newImageDesc);
            });         
        }       
    }
});

(function ($) {

    $.fn.gallerify = function (options) {

        var settings = {
            'galleryOption1': 'value',
            'galleryOption2': 'value'
        };

        return this.each(function () {
            // If options exist, lets merge them
            // with our default settings
            if (options) {
                $.extend(settings, options);
            }

            // Do the stuff your gallery does. without
            // mentioning specific selectors like #bla or .bla
            // Only refer to elements relative to $(this)

        });

    };
})(jQuery);


$(function () {
    $('#thumbs').gallerify({
        galleryOption1 : 'makemygallerythebest',
        galleryOption2 : 'buymeabeer'
    });
});

I would strongly suggest to make this script object-oriented, so you can create an gallery object as much as you want, however that is some serious refactoring.

But for now, you can add an extra jQuery selector something like this:

Line 3:

$('#firstgallery ul li a, #secondgallery ul li a').hover(

Line 23:

var newImageDesc = $("#firstgallery ul li a img[src='"+currentThumbSrc+"']").attr('alt');
var newImageDesc = $("#secondgallery ul li a img[src='"+currentThumbSrc+"']").attr('alt');

Make sure you give the galleries the right ID's in your HTML, i think these are div's :

<div id="firstgallery">...thumbnails...</div>
<div id="secondgallery">...thumbnails...</div>