Owl Carousel with Magnific Popup - 弹出窗口甚至不显示，不知道我做错了啥

Posted 2023-05-07

【中文标题】Owl Carousel with Magnific Popup - 弹出窗口甚至不显示，不知道我做错了啥

【英文标题】：Owl Carousel with Magnific Popup - Popup not even displaying, not sure what I'm doing wrongOwl Carousel with Magnific Popup - 弹出窗口甚至不显示，不知道我做错了什么

【发布时间】：2021-03-02 08:42:53

【问题描述】：

我正在为我的 Owl Carousel Slider 使用 Magnific Popup。我只是想让图像在屏幕上弹出。但是，它似乎不起作用。当我单击图像时，它唯一会做的事情是打开它的 src 链接。但我只想要 Magnific Popup。我是不是导入文件错了？我格式错误吗？我已经尝试了很多，但似乎无法让 Magnific Popup 甚至显示...

HTML/PHP

<div class="owl-carousel owl-theme details_banner">
    @forelse($home_images as $image_model)
    @php
    $real_image = public_path('uploads/frontend/home/' . $image_model->name);
    $image = asset('public/uploads/frontend/home/' . $image_model->name);
    if (!file_exists($real_image)) 
    $image=DEFAULT_IMG;
    
    @endphp    
    
    <a class="popup1" href="<?php echo $image ?>"><img src="<?php echo $image ?>"/></a>
     @empty
    <a a class="popup1" href="<?php echo DEFAULT_IMG ?>"><img src="<?php echo DEFAULT_IMG ?>"/></a>
     @endforelse
</div>

Javascript

<script type ="text/javascript">
    $(document).ready(function() 
        $('.popup1').magnificPopup(
            type: 'image',
            closeOnBgClick :true,
            enableEscapeKey: true
        );    
    );
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="vendor/Magnific-Popup-master/dist/jquery.magnific-popup.min.js"></script>

我把它放在文件的顶部

<link rel="stylesheet" href="asset('public/frontend/css/owl.carousel.min.css')" />
<link href="asset('public/backend/css/jquery-confirm.min.css') " rel="stylesheet">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="vendor/Magnific-Popup-master/dist/magnific-popup.css" media="screen"/>

【问题讨论】：

旁注：你可以尝试在浏览器上打开开发者控制台，看看是否一切正常，通常当你错过一些库时，它会在那里显示一些错误跨度>

啊，你是对的，我没想到那里看...“magnificPopup 不是函数”。猜我没有正确导入文件

是的，首先加载所有内容，jquery -> 其他库 -> 然后在您的脚本上。初始化您需要的库。只需将文件包含在脚本标记的顶部即可

是的，当我将 jquery 链接放在其他所有内容之上时，它才开始工作。不敢相信我花了一整天的时间才弄清楚这一点。谢谢你，我很感激:)

【参考方案1】：

通过将这两行放在我的 Magnific Function 上方解决

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>