Question

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

例如，每张幻灯片将包含一张像图像滑块一样旋转的地图图片（多张地图）我会想要不同位置的小图片（如谷歌地图上的标记），当悬停在上面时会显示一个简单的CSS精灵“更多信息”框。

我正在努力解决不知道如何唯一识别每张幻灯片的事实，以便在javascript中将div / images应用到容器中。

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

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

为什么不在galleriffic插件本身上使用onSlideChange回调来确定图像悬停时要执行的操作？

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

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

Jquery galleriffic如何对每张幻灯片应用单独的div

1 个答案: