带有bxSlider的jQuery qTip

Question

我正在尝试使用qTip在bxSlider中的图像上放置注释。 默认情况下，qTip和bxSlider似乎可以很好地协同工作，但是我对其进行了设置，以便默认情况下而不是在mouseenter上显示qTip。 当我转到下一张幻灯片时，上一张幻灯片的提示保持不变。 这就是我现在所拥有的：

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

如何定位并仅显示当前幻灯片的提示？

Answer 1

我得到的提示仅在其所属的幻灯片上显示。 我认为这是调用您的回调的方式。 图像映射中有一个没有执行任何操作的链接，因此我在您的视频触发器中放置了preventDefault() （目前不执行任何操作。）由于幻灯片过渡期间发生了很多事情，因此我尝试更均匀地分离事件。 这是小提琴，顺便说一句，有一个开放的figure结尾标签和一个开放的li标签，我已将其注释掉。 抱歉，我不得不更名，这有助于我更快地思考。 让我知道您是否需要更多信息。

更新1

我只是想到了一些问题，第二个幻灯片中弹出了qTip，我最初以为是回叫问题。 由于那些开放的figure和li结束标签实际上充当了图像和幻灯片的结束标签，因此qTip没有隐藏而不是隐藏在该状态。 因此就qTip而言，基本上没有2张幻灯片，而是一张大幻灯片，猫图像是您图像映射的一部分。

更新2

我注意到我的小提琴一直在挣扎。 经过进一步检查，我发现bx外部文件托管在您的域中，并且所有URL都不是jsFiddle不喜欢的HTTPS。 我正在将jsDelivr用于bxSlider ，将CDNjs用于qTip ，并将Microsoft用于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'
        }
    });
});

更新3

未经测试

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

详细信息： http : //qtip2.com/guides#integration

PS分配area元素.area

例

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