在同一页面上使用jquery画廊两次

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

我会强烈建议使这个脚本面向对象，所以你可以创建一个画廊对象尽可能多的，但这是一些严重的重构。

但现在，你可以添加一个额外的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'); 

确保您给画廊正确的ID在你的HTML，我认为这些是div的：

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

Answer 2

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