jquery - 在同一页面上使用 jquery gallery 两次

Question

我正在使用一个简单的 jquery 库 ( JQuery Hover Effect Image Gallery For eCommerce )，它运行完美。

其中一个页面有两个画廊，我想使用这个脚本。我精通 Javascript 来扩展脚本以支持两个画廊，如果有人可以看一下，我将不胜感激。

图库代码如下:

$(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');
                $('p#desc').empty().html(newImageDesc);
            });         
        }       
    }
});

Answer 1

(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'
    });
});