1

Justified Gallery内でMagnific Popupを使用しようとしていますが、問題が発生しています。動作させたいアンカー タグを取得していないようで、画像をクリックすると、href の場所に直接移動します。

バニラのマークアップを手で書くと問題なく動作するため、ページで動作していることはわかっています。

<a class="gallery-image" href="http://localpath/imagelarge.jpg">
    <img src="http://localpath/imagethumb.jpg">
</a>

ただし、Justified Gallery を使用しているため、生成されるマークアップはまったく同じではありません。

<div class="justifiedGallery" id="gallery">
    <div class="jg-row" style="height: 128px; margin-bottom: 1px;">
        <div class="jg-image" style="left: 0px;">
             <a class="gallery-image" href="http://localpath/imagelarge.jpg">
                 <img style="width: 192px; height: 128px; display: inline; opacity: 1;" alt="undefined" src="http://localpath/imagethumb.jpg">
             </a>
        </div>
    </div>
</div>

動作するサンプルと動作しないサンプルの両方に使用している JavaScript は次のとおりです。

<script type="text/javascript">
    $(document).ready(function () {
        $("#gallery").justifiedGallery({
            'usedSuffix': 'lt240',
            'justifyLastRow': false,
            'rowHeight': 120,
            'fixedHeight': false,
            'captions': false,
            'margins': 1
        });

        $('.gallery-image').magnificPopup({
            type: 'image'
        });
    });
</script>

gallery-image クラスを追加するために Justified Gallery を微調整する必要がありましたが、それ以外はすべてストックされています。

何か矛盾していると思いますが、追跡できないようです。

この2つ使ったことある人いますか？Magnific を初期化する方法に何か問題がありますか?

4

2 に答える 2

2

次のものだけを追加できます。

$("#gallery").justifiedGallery({
        'usedSuffix': 'lt240',
        'justifyLastRow': false,
        'rowHeight': 120,
        'fixedHeight': false,
        'captions': false,
        'margins': 1
    }).magnificPopup({type:'image', delegate: '.gallery-image'});
于 2013-12-22T09:27:37.133 に答える
0

以前は Justified Gallery プラグインを使用していませんでしたが、ご覧のとおり、マークアップは正しいです。きっと、ギャラリーの初期化中に事情があって、

ギャラリー プラグインは DOM を操作する可能性があるため、ギャラリーの初期化が完了したら壮大なポップアップをバインドすることをお勧めします。onComplete (Justified Gallery) コールバックを使用できます。

于 2013-12-22T08:01:54.070 に答える