带有bxSlider的jQuery qTip

Question

I'm trying to place annotations using qTip on images in bxSlider. By default, qTip and bxSlider seem to work pretty well together, but I have it set up so that qTip shows by default instead of on mouseenter. When I go to the next slide, the tip for the previous slide stays in place. This is what I have right now:

JSFiddle

bxSlider

$(document).ready(function(){
 var slider = $('.bxslider').bxSlider({
    adaptiveHeight: true,
    swipeThreshold: 100,
    oneToOneTouch: false,
    easing: 'cubic-bezier(0.600, 0.060, 0.500, 1)',
     onSliderLoad: function(){
  },
  onSlideBefore: function($slideElement, oldIndex, newIndex) {
    $('.qtip').hide();
},
  onSlideAfter: function($slideElement){
  jQuery('video').trigger('play');
  $('.qtip').show();
  },
}).on('click', function(){
    slider.goToNextSlide();
});

  });

qTip

$(document).ready(function()
{
    $('area[alt]').qtip(
    {
     hide: false,
        content: {
            attr: 'alt' // Use the ALT attribute of the area map for the content
        },
         show: {
        ready: true
        },
        style: {
            classes: 'caption'
        }
    });
});

How would I go about targeting and showing only the tips for the current slide?

Answer 1

I got the tip to show on only the slide it belongs to. I think it's how your'e callbacks are being called. There's a link in the image map that did nothing so I placed preventDefault() within your video trigger ( which does nothing at the moment.) I attempted to separate your events more evenly since there's a lot of stuff going on during a slide transition. Here's the fiddle Btw there was an open figure end tag and an open li tag I commented them out. Sorry I had to change names, it helps me to think faster. Let me know if you need more info.

Update 1

I just thought of something, the qTip was popping up on the second slide and I originally thought it's a call back problem. Instead of the qTip not hiding it was probably stuck in that state because of those open figure and li end tags actually functioned as the end tags for both images and slides. So essentially instead of 2 slides you had one big slide so as far as qTip was concerned, the cat image was part of your image map.

Update 2

I noticed my Fiddle keeps on breaking. Upon further examination I noticed the bx external files are hosted on your domain and also all of the URLs are not HTTPS which jsFiddle doesn't like. I am using jsDelivr for bxSlider , CDNjs for qTip , and Microsoft for jQuery

HTML

    <ul class="bxslider">
    <li class="slide">
        <figure>
            <img src="http://i.imgur.com/vLRGSyz.png" usemap="#savage">
            <map id="savage" name="savage">
                <area shape="circle" alt="Adam Savage" title="Savage Twins" coords="330,131,32" href="#" target="_self" />
            </map>
        </figure>
    </li>
    <li class="slide">
        <figure>
            <img src="http://i.imgur.com/wQAnzvl.jpg" alt="cat" title="feline">
        </figure>
    </li>
    <!-- </figure>
   </li>-->
</ul>

jQuery

$(document).ready(function () {
    var bx = $('.bxslider').bxSlider({
        adaptiveHeight: true,
        swipeThreshold: 100,
        oneToOneTouch: false,
        easing: 'cubic-bezier(0.600, 0.060, 0.500, 1)',
        /*     onSliderLoad: function(){},*/
        onSlideBefore: function ($ele, from, to) {
            $('.qtip').hide();
        },
        onSlideAfter: function ($ele) {
            jQuery('video').on('play', function (eve) {
                eve.preventDefault();
                $('.qtip').show();
                this.on('click', function () {
                    var that = this;
                    bx.goToNextSlide(this, that[from], to);
                });
            });
        }
    });

});


$(document).ready(function () {
    $('area[alt]').qtip({
        hide: false,
        content: {
            attr: 'alt' // Use the ALT attribute of the area map for the content
        },
        show: {
            ready: true
        },
        style: {
            classes: 'caption'
        }
    });
});

Update 3

Untested

/* Use: $(document).on('click', this, event handler); 
/* instead of $(this).click(event handler);
/* Create an .ON event handler */
$(document).on('click', '.area', function(event) {
    $(this).qtip({                // Bind qTip inside the .ON event handler
            overwrite: false,     // prevents qTip from being overridden
            content: $('.area'),  // area.area as content element
                 attr: 'alt',     // area.area[alt] as content
                 show: {          // SHOW qTip event when...
                    ready: true, /* ...when qTip is loaded, and READY */
                    event: event.type /*...when the EVENT (which is 'click') happens to THIS(which is .area) */
                 },
            },event); /* Pass the live event to qTip */
});

Details: http://qtip2.com/guides#integration

PS Assign the area element .area

Example

<area **class="area"** shape="circle" alt="Adam Savage" title="Savage Twins" coords="330,131,32" href="#" target="_self" />