magnific-popup


Magnific popup: getting “The image could not be loaded”


I can't make a gallery work with magnific popup. When I click on a picture I receive “The image could not be loaded”.
Here is the html file listing images:
<div class='container'>
<div class='picture'><img src='images/gallery/a.jpg'/></div>
<div class='picture'><img src='images/gallery/b.jpg'/></div>
<div class='picture'><img src='images/gallery/c.jpg'/></div>
<div class='picture'><img src='images/gallery/d.jpg'/></div>
<div class='picture'><img src='images/gallery/e.jpg'/></div>
</div>
Here the jquery code:
$.get( 'html/gallery.html', function( data ) {
$('#page_content').append(data);
$('.container').magnificPopup({
type: 'image',
delegate: 'div',
gallery:{
enabled: true,
navigateByImgClick: true,
arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
tPrev: 'Previous (Left arrow key)',
tNext: 'Next (Right arrow key)',
tCounter: '<span class="mfp-counter">%curr% of %total%</span>'
}
});
I tried to change the "delegate" value to 'div' or 'img' but no result. (I followed this Magnific popup: getting "The image could not be loaded" and image url is undefined)
Thanks for help :)
Well problem solved...
Magnific popup needs a href attribute in order to work.
Solution :
<div class='container'>
<div class='picture' href='images/gallery/a.jpg'><img src='images/gallery/a.jpg'/></div>
<div class='picture' href='images/gallery/b.jpg'><img src='images/gallery/b.jpg'/></div>
....
</div>

Related Links

Magnific popup: getting “The image could not be loaded”
How to give a fixed size to image in magnific-popup pluggin
magnific popup Inline Lightbox Gallery how to specify item in array from html link
how to make browser back close magnific-popup
Simple Magnific Popup Gallery not working
Magnific Popup onload calling a url
callbacks not firing when opening a magnific popup from another one
Magnific Popup - taller mfp-bottom-bar causes max image height issue
How to generate a (magnific popup)-gallery without a-tags
Add data to items in Magnific Popup
How to set the divs to make Magnific Popup animations work
how to display map in mobile devices using magnific popup?
Magnific Popup - Counter in Videogallery
how to manually open and close the popup using Magnific-Popup
How to customize arrows and close button?
no closing “X” with inline content

Categories

HOME
clips
keras
fft
dot
rsyslog
cvs
programming-languages
leon
frameworks
swagger-ui
bs4
qore
synchronization
dacpac
row
quickbooks
php-7.1
leiningen
try-catch
seaborn
jsdoc
pugjs
invantive-sql
database-replication
scichart
introduction
tar
core-text
realex-payments-api
jndi
blazemeter
dxf
h2db
numerical-methods
replaceall
newline
gsmcomm
exuberant-ctags
http-get
column-family
lxd
form-data
disassembling
dartium
espeak
android-fingerprint-api
tasker
ws-security
android-tabhost
pdf-reactor
android-mediaprojection
total-commander
qwt
parentheses
youcompleteme
apache-fop
mako
bind9
azure-sdk
slicknav
measures
impresspages
qpid
holder.js
master-slave
php-internals
phpcas
javax.sound.midi
reactive-banana
msys
riak-cs
remobjects
web-controls
unity5.2.3
bridge.net
website-monitoring
rdtsc
zend-route
navigationservice
floating-point-precision
spring-io
dbconnection
ftps
ril
html4
enterprisedb
wsdl-2.0
itmstransporter
pysimplesoap
parametric-equations
coercion
xdomainrequest
inotifycollectionchanged
yslow
asp.net-mvc-areas
zend-translate
routedevent
ctp4
phonon

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App