@anilkumarthakur60 any console errors
Apr 9, 2021
5
Level 6
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
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
Please or to participate in this conversation.