Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

anilkumarthakur60's avatar

Magnific popup not working in Laravel blade

when I am clicking on the image the image gets open but does work as expected I am expecting a magnefic popup I am using magnific popup CDN

here is my blade file bootstrap CSS js, jquery file is already linked in the main page

@extends('welcome')
@section('content')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/magnific-popup.css">
    <link rel="stylesheet" href="{{ asset('frontend/lib/css/photos-popup.css') }}">
    <div class="container">
        <div class="popup-gallery">
            <div class="row">
                @foreach ($gallery as $item)
                <div class="col-md-4">
                    <div class="resources-item">
                        <div class="resources-category-image">
                            <a href="{{ asset('/storage/'.$item->image) }}" title="The Image"><img alt="" src="{{ asset('/storage/'.$item->image) }}"></a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/jquery.magnific-popup.js"></script>
    <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') + '<small>by WebCorpCo</small>';
            }
        }
    });
});
    </script>

@endsection
0 likes
5 replies
anilkumarthakur60's avatar
Uncaught TypeError: $(...).magnificPopup is not a function
    at HTMLDocument.<anonymous> (all-gallery:185)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)
Wakanda's avatar
Wakanda
Best Answer
Level 10

@anilkumarthakur60 it seems you are calling magnific-popup js before Jquery so what you have to do is to go to the main page or your layout at the bottom before the ending body tag add

@yield('scripts')
</body>

then on the code, you shared to do this

extends('welcome')
@section('content')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/magnific-popup.css">
    <link rel="stylesheet" href="{{ asset('frontend/lib/css/photos-popup.css') }}">
    <div class="container">
        <div class="popup-gallery">
            <div class="row">
                @foreach ($gallery as $item)
                <div class="col-md-4">
                    <div class="resources-item">
                        <div class="resources-category-image">
                            <a href="{{ asset('/storage/'.$item->image) }}" title="The Image"><img alt="" src="{{ asset('/storage/'.$item->image) }}"></a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

@endsection

@section('scripts')
	    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/jquery.magnific-popup.js"></script>
    <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') + '<small>by WebCorpCo</small>';
            }
        }
    });
});
    </script>
@endsection
anilkumarthakur60's avatar

thanks, it worked.....my mistake was executing the script before jquery...

Please or to participate in this conversation.