JQuery Galleriffic, как применять отдельные div для каждого слайда

Question

В настоящее время я использую плагин jquery galleriffic для отображения нескольких изображений (карт). Кажется, что Jquery генерирует каждый из них с использованием индекса, поэтому мне интересно, как бы я применял различные div / изображения для отображения в зависимости от текущего индекса.

Например, каждый слайд будет содержать изображение карты, которая вращается, как слайдер изображений (несколько карт). Я буду нуждаться в небольших позиционируемых небольших изображениях (например, маркеры на картах Google), которые при наведении на них будут отображать простой спрайс CSS информационная коробка.

Я борюсь с тем фактом, что не знаю, как уникальным образом идентифицировать каждый из слайдов, чтобы применить элементы div / images к контейнеру в 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);
                });

Любая помощь / направление приветствуется

-Спасибо

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

Я бы использовал это событие, а не изменял источник.