混合stapel-function with magnific-popup

我在「Magnific Popup」和一個特殊的stapel-function「Adaptive Thumbnail Pile Effect with Automatic Grouping」中發現了兩個很棒的jquery插件，我認爲它們都可以做成很酷的（響應）組合調整燈箱大小。混合stapel-function with magnific-popup

但不幸的是，他們沒有像我期望的一樣工作，你可以看到here。

當你點擊最上面的圖片並打開其中一個出現的，它會出現在一個燈箱中，但沒有圖像下面的關閉按鈕和標題。所以你必須回到「瀏覽器後退按鈕」（不好）。

當您點擊底部的「無stapel功能」的小圖片之一時，圖片用關閉按鈕和Title from「magnific popup」打開。所以這裏的宏偉彈出效果很好。現在，我沒有發現爲什麼在頂部的stapel函數圖片中沒有出現放大彈出式關閉按鈕/標題。因爲我不是JS專業版，我只能猜測兩個js腳本之間可能會有衝突，所以我嘗試添加「jQuery.noConflict（）;」但這只是一個猜測，並沒有解決問題。

我希望有人有一個想法。

這是JS的東西在HTML頭：

<!-- Magnific Popup core CSS file --> 
<link rel="stylesheet" href="css/magnific-popup.css"> 

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<!-- Modernizr --> 
<script src="js/modernizr.custom.63321.js"></script> 

<!-- Magnific Popup core JS file --> 
<script src="js/jquery.magnific-popup.js"></script> 

<!-- external Stapel JS file --> 
<script type="text/javascript" src="js/jquery.stapel.js"></script> 

<!-- internal Stapel JS -->  
<script type="text/javascript"> 

jQuery.noConflict(); 

$(function() { 
    var $grid = $('#tp-grid'), 
    $name = $('#name'), 
    $close = $('#close'), 
    $loader = $('<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><span>Loading...</span></div>').insertBefore($grid), 
    stapel = $grid.stapel({ 
    onLoad : function() { 
    $loader.remove(); 
    }, 
    onBeforeOpen : function(pileName) { 
    $name.html(pileName); 
    }, 
    onAfterOpen : function(pileName) { 
         $close.show(); 
        } 
       }); 

      $close.on('click', function() { 
       $close.hide(); 
       $name.empty(); 
       stapel.closePile(); 
      }); 

     }); 
    </script>

這是JS的莊重，彈出關閉體標記前：

<script type="text/javascript"> 
$(document).ready(function() { 

$('.popup').magnificPopup({ 
    type: 'image', 
    closeOnContentClick: true, 
    image: { 
     verticalFit: false 
    } 
}); 

}); 

</script>

的蕩氣迴腸 - 彈出是由類調用=「彈出」中的鏈接（正常工作位置）：

<a class="popup" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally."> 
<img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" height="75" width="75"> 
</a> 

<a class="popup" href="http://www.marvin-online.de/test/images/print/large/logo-safework-1.jpg" title="Der Titel"> <img src="http://www.marvin-online.de/test/images/print/large/logo-safework-1.jpg" height="75" width="75"></a>

..和那些圖片它不工作：

<ul id="tp-grid" class="tp-grid"> 

<li data-pile="Logo"> 
    <a class="popup" href="http://www.marvin-online.de/test/images/print/large/visitenkartendesign-erbengemeinschaft.jpg"> 
<span class="tp-info"><span>Logo 1</span></span> 
<img src="http://www.marvin-online.de/test/images/print/thumbs/visitenkartendesign-erbengemeinschaft.jpg" /> 
    </a> 
</li> 

<li data-pile="Logo"> 
    <a class="popup" href="http://www.marvin-online.de/test/images/print/large/logo-safework-1.jpg"> 
<span class="tp-info"><span>Logo 2</span></span> 
<img src="http://www.marvin-online.de/test/images/print/thumbs/logo-safework-1.jpg" /> 
    </a> 
</li> 
</ul>

來源

2013-05-15 jingle

我用Firefox檢查webdeveloper一個我注意到，「stapel功能處理」的圖像得到了下面的CSS類，當他們與莊重的彈出打開內的圖像： HTML>身體> img.decoded 和底部的正確opended圖像有： html.js.no-touch.cssanimations.csstransitions> body.mfp變焦外CUR> div.mfp-wrap.mfp密BTN -in.mfp-ready> div.mfp-container.mfp-image-holder.mfp -s -ready> div.mfp-content> div.mfp-figure> img.mfp-img 我該如何改變所有這些開放圖像中的課程？ – jingle

好的，我找到了一個解決方案：只需在Stapel的「onAfterOpen」回調函數中添加宏觀插件的代碼即可。（！許多THX安德魯 - 大衛）

來源

2013-05-19 12:05:59 jingle

混合stapel-function with magnific-popup

回答

相關問題