2016-02-23 87 views
1

我正在使用lightcase.js滑動輪播並且我面臨的問題是當我滑動滑動時觸發點擊事件並立即顯示彈出窗口。有時點擊事件不會被解僱,但是當你滑動所有的幻燈片時,只有在觸發事件的一半時才刷新。如果有其他人遇到了這個問題,我很感激你能否告訴我一個可能的解決方法。滑動時滑動輪播觸發點擊事件

這是我的HTML sctructure:

<div class="slider multiple-items"> 
    <a href="http://cornel.bopp-art.com/lightcase/project/img/examples/1b.jpg" id="example1" class="showcase" data-rel="lightcase"> 
    <img src="http://cornel.bopp-art.com/lightcase/project/img/examples/1b.jpg" alt=""> 
    </a> 

    <a href="http://cornel.bopp-art.com/lightcase/project/img/examples/2b.jpg" id="example2" class="showcase" data-rel="lightcase"> 
    <img src="http://cornel.bopp-art.com/lightcase/project/img/examples/2b.jpg" alt=""> 
    </a> 

    <a href="http://cornel.bopp-art.com/lightcase/project/img/examples/3b.jpg" id="example3" class="showcase" data-rel="lightcase"> 
    <img src="http://cornel.bopp-art.com/lightcase/project/img/examples/2b.jpg" alt=""> 
    </a> 

    <a href="http://cornel.bopp-art.com/lightcase/project/img/examples/4b.jpg" id="example4" class="showcase" data-rel="lightcase"> 
    <img src="http://cornel.bopp-art.com/lightcase/project/img/examples/4b.jpg" alt=""> 
    </a> 

    <a href="http://cornel.bopp-art.com/lightcase/project/img/examples/5b.jpg" id="example5" class="showcase" data-rel="lightcase"> 
    <img src="http://cornel.bopp-art.com/lightcase/project/img/examples/5b.jpg" alt=""> 
    </a> 
</div> 

而且我現在用的是JS:

$('.multiple-items').slick({ 
    infinite: true, 
    slidesToShow: 3, 
    slidesToScroll: 3 
}); 

$('a[data-rel^=lightcase]').lightcase(); 

這裏是一個的jsfiddle demonsrating當前的行爲:https://jsfiddle.net/zLk1otb3/

謝謝!

+0

@Jonnathan看不到任何彈出屏幕上的小提琴。 – pratikpawar

+0

@dk_dragonknight @dk_dragonknight @dk_dragonknight當你點擊一個圖像或完成一個拖動動作模態框打開 關注 –

+0

既然你正在將lightcase和slick與包含在鏈接裏面的圖像組合在一起,每當用戶點擊圖像時超鏈接源被加載並用燈箱顯示爲彈出。您只需使用lightcase在UI上顯示圖像,並在用戶單擊圖像後進行輪播幻燈片。 – pratikpawar

回答

0

添加data-rel="lightcase:slideshow"以鏈接項目,如果你想看到幻燈片傳送帶點擊事件。彈出你看到的是從燈箱視圖彈出鏈接元素。