我試圖復制https://codepen.io/mattlansom/pen/epRNpp畫廊

我做了幾乎完全一樣的事情，但是我得到了一個錯誤

"未捕獲的類型錯誤:無法讀取未定義的屬性(讀取“class name”)& quot；

我不知道問題出在哪里

我需要自己手動聲明這些變量，還是連接magnificPopup時出現了錯誤？

$(document).ready(function() {
  $('.popup-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    callbacks: {
      elementParse: function(item) {
        if (item.el.context.className == 'video') {
          item.type = 'iframe',
            item.iframe = {
              patterns: {
                youtube: {
                  index: 'youtube.com/',
                  id: 'v=',
                  src: '//www.youtube.com/embed/%id%?autoplay=1'
                },
                vimeo: {
                  index: 'vimeo.com/',
                  id: '/',
                  src: '//player.vimeo.com/video/%id%?autoplay=1'
                },
                gmaps: {
                  index: '//maps.google.',
                  src: '%id%&output=embed'
                }
              }
            }
        } else {
          item.type = 'image',
            item.tLoading = 'Loading image #%curr%...',
            item.mainClass = 'mfp-img-mobile',
            item.image = {
              tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
            }
        }

      }
    },
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0, 1]
    }
  });
});

.popup-gallery a {
  display: inline-block;
  width: 25%;
}

.popup-gallery a img {
  height: auto;
  width: 100%;
}

<link rel="stylesheet"  integrity="sha512-WEQNv9d3+sqyHjrqUZobDhFARZDko2wpWdfcpv44lsypsSuMO0kHGd3MQ8rrsBn/Qa39VojphdU6CMkpJUmDVw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha512-IsNh5E3eYy3tr/JiX2Yx4vsCujtkhwl7SLqgnwLNgf04Hrt9BT9SXlLlZlWx+OK4ndzAoALhsMNcCmkggjZB1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<div class="row">
  <div class="col-sm-12">
    <div class="popup-gallery">
      <a  class="image" title="Some Text for the image">
        <img src="http://sandbox.vciwork.com/codepenstuff/images/1.jpg" alt="Alt text" />
      </a>
      <a  class="video" title="This is a video">
        <img src="http://sandbox.vciwork.com/codepenstuff/images/2.jpg" alt="Alt text" />
      </a>
      <a  class="image" title="Some Text for the image">
        <img src="http://sandbox.vciwork.com/codepenstuff/images/4.jpg" alt="Alt text" />
      </a>
    </div>
  </div>
</div>

出現該錯誤的原因是因為item.el.context中的上下文不存在。

在查看回調的結果時，似乎可以通過el的鍵0而不是上下文來訪問類名。

將您的item.el.context.className更改為item.el[0]。類名

這是一個工作樣本

$(document).ready(function() {
    $('.popup-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
    callbacks: {
      elementParse: function(item) {
        if(item.el[0].className == 'video') {
          item.type = 'iframe',
          item.iframe = {
             patterns: {
               youtube: {
                 index: 'youtube.com/',
                 id: 'v=',
                 src: '//www.youtube.com/embed/%id%?autoplay=1'
               },
               vimeo: {
                 index: 'vimeo.com/',
                 id: '/',
                 src: '//player.vimeo.com/video/%id%?autoplay=1'
               },
               gmaps: {
                 index: '//maps.google.',
                 src: '%id%&output=embed'
               }
             }
          }
        } else {
           item.type = 'image',
           item.tLoading = 'Loading image #%curr%...',
           item.mainClass = 'mfp-img-mobile',
           item.image = {
             tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
           }
        }

      }
    },
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1]
        }
    });
});

.popup-gallery a {display:inline-block;width:25%;}
.popup-gallery a img {height:auto;width:100%;}

<link rel="stylesheet"  integrity="sha512-WEQNv9d3+sqyHjrqUZobDhFARZDko2wpWdfcpv44lsypsSuMO0kHGd3MQ8rrsBn/Qa39VojphdU6CMkpJUmDVw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha512-IsNh5E3eYy3tr/JiX2Yx4vsCujtkhwl7SLqgnwLNgf04Hrt9BT9SXlLlZlWx+OK4ndzAoALhsMNcCmkggjZB1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<div class="row">
      <div class="col-sm-12">
        <div class="popup-gallery">
            <a  class="image" title="Some Text for the image">
              <img src="http://sandbox.vciwork.com/codepenstuff/images/1.jpg" alt="Alt text" />
            </a>
          <a  class="video" title="This is a video">
              <img src="http://sandbox.vciwork.com/codepenstuff/images/2.jpg" alt="Alt text" />
            </a>
          <a  class="image" title="Some Text for the image">
              <img src="http://sandbox.vciwork.com/codepenstuff/images/4.jpg" alt="Alt text" />
            </a>
        </div>
      </div>
    </div>