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

Is it possible to pass data via the post method to magnific popup when ajax loading content?
What is the best way to test if a Magnific Popup is currently “open”
Apply callback to all instances of Magnific Popup?
Magnific Popup show background image while loading fullres image
Popup - It should load an .aspx page
Modal dialog. - Confusing
Toggle verticalFit on an open image?
Does Magnific Popup support custom events/buttons
I can't get the overflowY option to work in magnific popup
magnific popup group do not working
Magnific-popup: how to get image url from <img src=“…”>?
Styling magnific-popup arrows
magnific popup modal closes on click
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

Categories

HOME
maven
testing
vim
coq
keras
pycharm
sd-card
android-4.4-kitkat
sharepoint-designer
jpeg
baqend
blueprintjs
azure-storage-tables
medical
node-pdfkit
wheelnav.js
rascal
export-to-csv
correlation
fallback
tostring
google-static-maps
propel
http-status-code-504
normalizr
nodatime
visjs
abi
cloudhub
wkwebview
format-specifiers
autosys
tdd
django-storage
selectedindexchanged
bootstrap-material-design
entitlements
social-media
strncpy
publish
ejabberd-module
windowbuilder
primitive
unboundid
directx-10
javascriptcore
uisplitview
google-sites-2016
http-get
copying
hybridauth
phpfreechat
uiswipegesturerecognizer
git-merge
objectlistview
twitch
dism
mesos-chronos
powershell-dsc
ibpy
wptoolkit
jsch
xml-documentation
azure-application-gateway
sage-one
fancybox-2
crypt
pearson
gcsfuse
mcafee
gnome-shell-extensions
medium.com
jwplayer7
ubuntu-10.04
dataview
freelancer.com-api
purge
coveralls
browser-bugs
sysinternals
zend-route
funcunit
braille
picturefill
ruby-datamapper
opcache
rabl
interface-orientation
factory-method
bitsharp
venn-diagram
manchester-syntax
netbeans-6.9
semantic-diff
work-stealing
subscript
deobfuscation
mod-auth
cxxtest
h.323
coda-slider
dbal
anti-piracy
thread-local-storage
mediarss
w3wp
commodore
windows-live-messenger

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App