1

Meteor アプリでMagnific-Popupライトボックスを使用しようとしています。私が抱えている問題は、ギャラリーを起動すると、ギャラリーのポップアップを閉じることができないことです。[x] ボタンをクリックしたり、背景をクリックしても効果はありません。それ以外の場合、ライトボックスは正常に機能しているようです。単一のポップアップを使用すると、期待どおりに機能します (閉じることを含む) が、ギャラリーは機能しません。Chrome インスペクタがクラッシュするため、何が起こっているのかを確認するのは困難です。次のエラーが表示されることがあります。

RangeError: Maximum call stack size exceeded

以下のコードで gallery=false を設定すると、ポップアップは正常に機能しますが、明らかにギャラリー機能が失われます...

ありがとうございました。

html:

<div class="popup-gallery">
   <a href="{{imageURL}}">
      <img src="{{imageURL}}" alt="">
   </a>
    <a href="{{imageURL}}">
      <img src="{{imageURL}}" alt="">
   </a>
   <a href="{{imageURL}}">
      <img src="{{imageURL}}" alt="">
   </a>
</div>

js:

Template.itemPage.rendered = function() {
  console.log("itemPage rendered");

    $('#itemTiles').imagesLoaded(function() {

      $('.popup-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        tLoading: 'Loading image #%curr%...',
        mainClass: 'mfp-img-mobile',
        gallery: {
          enabled: true,
          navigateByImgClick: true,
          preload: [0,1] // Will preload 0 - before current, and 1 after the current image
        },
        image: {
          tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
          titleSrc: function(item) {
            return item.el.attr('title') + '<small>by Test</small>';
          }
        }
      });
..
}

これが役立つ場合に備えて、一時的にサイトをhttp://miyako.meteor.com/に展開しました。これは Web 開発への私の最初の進出なので、乱雑なコードを許してください! :)

4

0 に答える 0