0

我目前正在使用 jquery Galleriffic 插件来显示许多图像（地图）。Jquery 似乎使用索引生成每一个，因此我想知道如何根据当前索引应用不同的 div/图像来显示。

例如，每张幻灯片将包含一张像图像滑块一样旋转的地图图片（多张地图）信息”框。

我正在努力解决不知道如何唯一标识每张幻灯片、将 div/图像应用于 javascript 中的容器的事实。

画廊：

生成图片幻灯片的部分代码：

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

任何帮助/方向表示赞赏

-谢谢

4

1 回答 1

0

为什么不使用onSlideChangegalleriffic插件本身的回调来确定图像悬停时要做什么？

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>
...

我会利用这个事件而不是修改源。

于 2012-09-28T14:16:33.490 回答