jquery galleriffic如何將獨立的div應用於每張幻燈片

Question

我目前使用jquery galleriffic插件來顯示一些圖片（地圖）。 Jquery似乎使用索引生成每一個，所以我想知道如何根據當前索引應用不同的div /圖像來顯示。例如，每張幻燈片將包含一張像圖像滑塊一樣旋轉的地圖圖片（多張地圖）我將要求不同位置的小圖片（如Google地圖上的標記），當它們展開時會顯示一個簡單的圖片CSS精靈「更多信息」框。

我在不知道如何唯一標識每張幻燈片的事實上掙扎，要將div /圖像應用於javascript中的容器。代碼

Galleriffic:

部分生成圖像幻燈片：

buildImage: function(imageData, isSync) { 
      var gallery = this; 
      var nextIndex = this.getNextIndex(imageData.index); 

      // Construct new hidden span for the image 
      var newSlide = this.$imageContainer 
       .append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#"></a></span>') 
       .find('span.current').css('opacity', '0'); 

      newSlide.find('a') 
       .append(imageData.image) 
       .click(function(e) { 
        gallery.clickHandler(e, this); 
       }); 

任何幫助/方向是讚賞

-Thanks

Answer 1

你爲什麼不上使用的onSlideChange回調galleriffic插件本身決定在圖像懸停時要執行什麼操作？

jQuery(document).ready(function($) { 
    var _currentSlide = -1; 
    var gallery = $('#thumbs').galleriffic({ 
     onSlideChange: function(prevIndex, nextIndex) { 
      //use nextIndex to determine what mouseover event does 
      _currentSlide = nextIndex; 
     } 
    } 

     $(".mainImageClass").mouseover(function() { 
      //hide all current markers 
      $(".marker").hide(); 
      //show only the relevant marker 
      $(".marker[rel='" + _currentIndex + "']").show(); 
     }); 
} 

HTML：

<div class='marker' rel='1'>Content to show when over slide #1</div> 
<div class='marker' rel='2'>Content to show when over 2</div> 
... 

我想利用這個事件，而不是修改源。