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
pycharm
nullpointerexception
google-docs
fsm
fingerprint
enterprise-library-5
virtualization
rascal
apache-cayenne
ibm-odm
worldwind
openrefine
apache-metamodel
jqwidget
excel-vba-mac
nas
mustache.php
crosstab
bootstrap-duallistbox
uninstall
assistant
kendo-datasource
gsmcomm
binary-data
semantic-versioning
kendo-ui-grid
textmate
mozilla
picasso
bytecode-manipulation
space-complexity
libvpx
impersonation
document.write
fedex
dynamic-reports
.net-4.6.2
sencha-touch-2.3
executenonquery
python-webbrowser
yii2-extension
elgg
windows-mobile-6.5
qtwebview
skobbler-maps
angstrom-linux
spim
jms2
jqgrid-formatter
pundit
proj4js
c++03
system.reflection
facebook-graph-api-v2.4
operator-precedence
qpainter
codeigniter-url
angularjs-ng-click
javafx-webengine
asp.net-web-api-odata
titanium-modules
ceil
ember-charts
mcts
coverflow
dbconnection
ora-00911
gwt-rpc
dataadapter
pushbackinputstream
random-seed
lcs
wsdl-2.0
e4x
isnullorempty
dice
dsn
online-compilation
custom-backend
mercurial-server
appender
disclosure
asp.net-mvc-areas
.nettiers
sproutcore-2
perfect-hash

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