帶有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" />