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

Answer 2

我强烈建议让这个脚本面向对象，这样你就可以根据需要创建一个gallery对象，但这是一些严重的重构。

但是现在，你可以添加一个额外的jQuery选择器：

第3行：

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

第23行：

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

确保您在HTML中为图库提供了正确的ID，我认为这些是div：

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

在同一页面上两次使用jquery库

2 个答案: