在同一頁面上使用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' 
    }); 
});