猫头鹰旋转木马-弹出窗口甚至不显示，不知道我做错了什么

Question

我的猫头鹰旋转木马滑翔机是用万能弹出的。我只想让画面在屏幕上弹出。然而，它似乎不起作用。当我点击图片时，它唯一能做的就是打开它的src链接。但我只想要万能的弹出式。我把文件导入错了吗？我格式化错了吗？我已经试过这么多了，似乎无法让万能的弹出式显示.

/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"/>

Answer 1

通过将这两条线置于我的函数之上来解决

<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>