函數打開彈出之前沒有第二次點擊

我與在laravel環境蕩氣迴腸彈出的工作，並希望雙方要共同努力，所以我寫了這個：函數打開彈出之前沒有第二次點擊

$(document).ready(function() { 

    $('.image-popup-vertical-fit').on('click',function(){ 
    var image = $(this).attr('src'); 

    popnow(image); 
}); 

    function popnow(a) { 

    $('.image-popup-vertical-fit').magnificPopup({ 

     type: 'image', 
     closeOnContentClick: true, 
     mainClass: 'mfp-img-mobile', 
     image: { 
      verticalFit: true 
     }, 
     items: { 
     src: a 
      } 

    }); 
} 
    });

HTML：

<div class="col-lg-6 col-sm-6 margin-top-60"> 
    {{HTML::image('images/recentprojects1.png','recent',array('class' => 'img-responsive img-center image-popup-vertical-fit')) }} 
</div> 

<div class="col-lg-6 col-sm-6 margin-top-60" id="test"> 
    {{ HTML::image('images/pricing1.png','recent',array('class' => 'img-responsive img-center image-popup-vertical-fit')) }} 
</div>

如果我在頁面重新加載後第一次單擊彈出式窗口打開的圖像時沒有任何反應，如果我點擊第二次打開。

但是當我第一次點擊第一個div後，頁面重新加載，然後我點擊第二個，它仍然顯示我第一次點擊div的內容（在第一個點擊第二個div - 錯誤圖片）。

所以它似乎並不需要每次點擊var image。我的功能有問題嗎？

當我將console.log(a)添加到function popnow(a)的頂部時，會記錄正確的圖像src。

來源

2014-12-03 baao

只需對每個圖像進行迭代併爲每個圖像添加魔法。然後，您只需點擊每個圖像即可打開彈出窗口。

Working fiddle

function popnow(){ 
    $('.image-popup-vertical-fit').each(function(){ 
    var image = $(this).attr('src'); 
    $(this).magnificPopup({ 

     type: 'image', 
     closeOnContentClick: true, 
     mainClass: 'mfp-img-mobile', 
     image: { 
      verticalFit: true 
     }, 
     items: { 
      src: image 
     } 
     }); 
    }); 
} 
// Init function 
    popnow();

PS：我用從CDN插件。使用jsfiddle時，嘗試從CDN加載插件或庫，而不是從工作區加載。

來源

2014-12-03 02:46:23 Leo

magnificPopup的作用是啓用彈出窗口。所以首先點擊你啓用它，而不是叫出來。第二次點擊第二張圖片彈出第一張圖片，是因爲你用src設置爲第一張圖片來啓用它。

$(document).ready(function() { 
    $('.image-popup-vertical-fit').each(function(i, el) { 
     $(el).magnificPopup({ 
       type: 'image', 
       closeOnContentClick: true, 
       mainClass: 'mfp-img-mobile', 
       image: { 
        verticalFit: true 
       }, 
       items: {src: $(el).attr('src')} 
     }); 
    }); 
});

Fiddle

順便說一句，我把magnificPopup插件後的代碼。最好在你的代碼之前加載插件來使用它。

來源

2014-12-03 02:47:38 Leo

函數打開彈出之前沒有第二次點擊

回答

相關問題