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

Does it only work on wordpress?
Magnific Popup scroll issues with iframe and iOS
How to apply magnific pop to image preview after revoke the object url
How to override magnific popup inline markup
Magnific pop-up only links to you tube
Magnific Popup close button placed in invalid html?
Magnific Popup - Google Maps Embed API must be used in an iframe
Magnific Popup Plugin Not Showing when Previewed in Browser
Magnific Popup Wordpress
Magnific vs PhotoSwipe
How to adjust video size magnific popup
$.magnificPopup.open() callbacks is not working
How do i setup magnific-popup
magnific-popup - re-initiate on ajax content
Magnific-popup cancels all requests on open
Magnific Popup fails to work with multiple galleries on a page

Categories

HOME
variables
pypi
omnet++
homebrew
iterator
rsyslog
jsp-tags
jira
programming-languages
frameworks
survey
yum
vault
apache-cayenne
spring-tool-suite
windows-phone-7
foselasticabundle
jtextfield
plunker
sylius
bootstrap-tour
angular2-aot
sparse-matrix
replaceall
procdump
delicious-api
airconsole
jspresso
noraui
avcapturesession
openoffice.org
xmlreader
fusionpbx
bower-install
retina-display
hot-module-replacement
libvpx
twitch
xenforo
unobtrusive-validation
cookiecutter-django
trim
squib
awt
gulp-sourcemaps
ibpy
revapi
zip4j
logparser
hls.js
np-complete
windows-iot-core-10
spring-mongodb
gnome-shell-extensions
savon
asp.net-4.5
django-debug-toolbar
fputcsv
qcustomplot
bluemix-app-scan
livequery
revolution-r
uid
kendonumerictextbox
separator
marching-cubes
tmuxinator
libressl
web-controls
inmobi
ng-animate
xc16
gadt
network-interface
rdl
flask-cors
aapt
yorick
mechanize-ruby
imdbpy
ruby-datamapper
padarn
jquery-mobile-dialog
android-screen-support
libstdc++
google-email-migration
hosts-file
parametric-equations
jquery-ui-layout
pendrive
whoosh
doh
psi
netbeans-7.1
ecl
port-number
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