magnific-popup


Magnific Popup - gallery images not displaying


I'm trying to use Magnific Popup in collaboration with elevateZoom, I have it working to a point where I have bound a click handler to the zoom container, which in this case is the .product-image-gallery div.
If I pass a single image src, e.g. $j('.product-image-gallery .gallery-image').attr('src'); as the src: argument then I get a popup with an image, but as soon as I pass a more general selector such as the .gallery-image on its own, i get a 'The image could not be loaded' message.
The aim is to have the popup let me cycle through all the avaliable product images.
HTML:
<div class="product-image-gallery">
<img id="image-main" class="gallery-image visible" src="example1.jpg" alt="Title" title="Title" />
<img id="image-0" class="gallery-image" src="example1.jpg" data-zoom-image="example1.jpg" />
<img id="image-1" class="gallery-image" src="example2.jpg" data-zoom-image="example2.jpg" />
<img id="image-2" class="gallery-image" src="example3.jpg" data-zoom-image="example3.jpg" />
</div>
JS ($j because jQuery is in noConflict mode):
$j.magnificPopup.open({
items: {
src: '.gallery-image',
type: 'image',
gallery: {
enabled: true
}
}
});
I ended up building an object then passing that to magnific-popup, my solution:
$j('.product-image-gallery').bind('click', function(){
galleryObj = [];
$j('.product-image-gallery .gallery-image').not('#image-main').each(function() {
var src = $j(this).data('zoom-image'),
type = 'image'; // it's always an image :)
image = {};
image ["src"] = src;
image ["type"] = type;
galleryObj.push(image);
});
// open the popup
$j.magnificPopup.open({
items: galleryObj,
gallery: {
enabled: true
},
});
});

Related Links

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
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?

Categories

HOME
image
urbancode
image-processing
plot
iterator
q
rsync
alpha
indesign
multiple-records
iggrid
postgres-xl
collectd
vaadin7
seaborn
firefox-webextensions
mps
csrf-protection
emgucv
maxmind
procdump
yadcf
catch-all
hybridauth
android-mediaprojection
fakeiteasy
midl
bootstrap-dialog
import-from-excel
.net-4.6.2
slick-3.0
wptoolkit
worksheet
celery-task
datastax-startup
sage-one
git-diff
feeds
snmptrapd
media-player
qtwebview
mikroc
measures
phpcas
wso2cloud
atk4
wyam
varargs
mmc
composite
directoryservices
javax.mail
offloading
tween
typekit
jsonpickle
gadt
codeigniter-routing
client-side-templating
flask-cors
project-planning
htmlcleaner
jboss-weld
pyhdf
commoncrypto
google-cloud-save
easy-install
mqx
sabredav
specification-pattern
referrer
selected
pvrtc
first-responder
cascalog
labwindows
twrequest
viewswitcher
doh
data-loss
heartbeat
hamachi
f#-powerpack
xmemcached
winbugs14
jmock
jquery-ui-droppable
web-architecture
sustainable-pace
nerddinner
aquaticprime
gacutil
putchar
grid-system

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