Question

我在同一页面上使用两个版本的jQuery。

他们是：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

在网站上水平滚动需要jQuery 1.4.2。巨大的弹出库需要jQuery 1.9.1。

以下是magnific popup的javascript代码：

<script>
                        $(document).ready(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') ;
                              }
                            }
                         });
                        });
                    </script>

水平滚动上方的所有代码都有效，但不是大胆的弹出窗口我该如何解决这个问题？

Answer 1

在jQuery

的加载之间插入noConflict脚本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">var $9 = $.noConflict(true);</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

然后，在宏代码中使用$9代替$进行jQuery引用。

<script>
   $9(document).ready(function() {
      $9('.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') ;
          }
       }
    });
 });
</script>

jQuery冲突使用magnific popup gallery

1 个答案: