javascript - stapel-function と magnific-popup を組み合わせる

Question

「マグニフィックポップアップ」で 2 つの素晴らしい jquery プラグインと特別なステープル機能「自動グループ化によるアダプティブサムネイルパイルエフェクト」を見つけました。両方を一緒に使用すると、ライトボックスのサイズを変更してかなりクールな (レスポンシブ) ポートフォリオを作成できると思いました。

しかし、残念ながら、こちらでご覧いただけるように、期待どおりに連携しません。

一番上の画像をクリックして表示される 2 つのうちの 1 つを開くと、ライトボックスに表示されますが、画像の下に閉じるボタンとタイトルはありません。したがって、「ブラウザの戻るボタン」で戻る必要があります (良くない)。

一番下の「ステープル機能なし」の小さな写真の1つをクリックすると、「壮大なポップアップ」からの閉じるボタンとタイトルで写真が開きます。したがって、ここでは壮大なポップアップが正常に機能します。さて、上部にステープル機能の写真が表示された状態で、壮大なポップアップの閉じるボタン/タイトルが表示されない理由がわかりませんでした。

私は JS の専門家ではないので、2 つの js スクリプトの間に競合がある可能性があると推測することしかできないため、「jQuery.noConflict();」を追加してみました。しかし、それは単なる推測であり、問題の解決にはなりませんでした。

誰かがアイデアを持っていることを願っています。

これは、HTML ヘッダーの JS のものです。

<!-- 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>

これは、body-Tag を閉じる前の magnific-popup の JS です。

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

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

});

</script>

壮大なポップアップは、リンクの class="popup" によって呼び出されます (ここでは正常に動作します)。

<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>

javascript - stapel-function と magnific-popup を組み合わせる

1 に答える 1

Related

Reference