0

我在“Magnific Popup”中发现了 2 个很棒的 jquery 插件和一个特殊的stapel 功能“具有自动分组的自适应缩略图堆效果”，我认为将两者结合起来，我可以通过调整灯箱大小制作一个非常酷（响应式）的产品组合。

但不幸的是，正如您在此处看到的那样，它们并没有像我预期的那样一起工作。

当您单击顶部图片并打开出现的 2 张图片中的一张时，它将显示在灯箱中，但在图片下方没有关闭按钮和标题。因此，您必须使用“浏览器后退按钮”（不好）返回。

当您单击底部“没有订书钉功能”的小图片之一时，该图片将打开，并带有关闭按钮和“放大弹出窗口”中的标题。所以这里宏伟的弹出窗口工作正常。现在，我不明白为什么放大弹出关闭按钮/标题没有出现在顶部的钉书钉功能图片。

由于我不是 JS 专业人士，我只能猜测这两个 js-script 之间可能存在冲突，所以我尝试添加“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>

magnific-popup 由链接中的 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>
4

1 回答 1

0

好的，我找到了解决方案：只需在 Stapel 的“onAfterOpen”回调函数中添加 magnific 插件的代码。（非常感谢 Andrew-David！）

于 2013-05-19T12:05:59.443 回答