Jquery galleriffic how to apply separate divs to each slide

Question

I am currently using the jquery galleriffic plugin to display a number of images (maps). The Jquery seems to generate each one using an index, I'm therefore wondering how I would apply different divs/images to be displayed depending on the current index.

For example, Each slide will contain a picture of a map that rotates like an image slider (multiple maps) I will be wanting different positioned small images (like markers on a google maps) that when hovered over will display a simple css sprite "more info" box.

I'm struggling with the fact of not knowing how to uniquely identify each of the slides, to apply the divs/images to the container in javascript.

Galleriffic:

Part of code that generates image slides:

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

Any help/direction is appreciated

-Thanks

Answer 1

Why don't you use the onSlideChange callback on the galleriffic plugin itself to determine what to do when the image is hovered?

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

I would utilize this event rather than modifying the source.