magnific-popup


Magnific Popup fails to work with multiple galleries on a page


I am using magnific popup on a new website that i am building but i am running into a problem getting it to work when multiple galleries on the same page.
I'm using wordpress, Slick Slider to display a slider full of thumbnails and when one of the thumbnails is clicked it should open the larger version of the image in the Magnific Popup.
My HTML looks like this:
<div class="media-carousel slick-initialized slick-slider" id="carousel-links">
<div class="slick-list draggable" tabindex="0">
<div class="slick-track" style="opacity: 1; width: 1152px; transform: translate3d(0px, 0px, 0px);">
<div class="slick-slide slick-active" data-slick-index="0" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image1-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image1.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="1" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image2-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image2.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="2" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image3-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image3.jpg" alt="" class="standard-image"></a>
</div>
</div>
<div class="slick-slide slick-active" data-slick-index="3" style="width: 288px;">
<div class="standard_media_element media_title">
<a href="image4-large.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal">
<img src="image4.jpg" alt="" class="standard-image"></a>
</div>
</div>
</div>
</div>
I have a site.js file that contains all of the javascript for my site in it. I'm calling magnific popup using the following function. I've added some extra stuff in it to add effects.
jQuery('#carousel-links').each(function() {
jQuery(this).magnificPopup({
delegate: 'a',
type: 'image',
tClose: 'Close (Esc)',
tLoading: '',
preload: [1,4],
gallery:{
enabled:true,
tPrev: 'previous',
tNext: 'next',
tCounter: '%curr% of %total%'
},
image: {
verticalFit: true,
titleSrc: function(item) {
return item.el.attr('title') + ' · <a class="image-source-link" href="'+item.src+'" target="_blank"><i class="fa fa-file-image-o"></i> open original</a>';
}
},
closeBtnInside: false,
closeOnContentClick: false,
mainClass: 'mfp-zoom-in',
removalDelay: 300, //delay removal by X to allow out-animation
callbacks: {
lazyLoad: function (item) {
console.log(item); // Magnific Popup data object that should be loaded
},
beforeOpen: function() {
jQuery('#carousel-links a').each(function(){
jQuery(this).attr('title', $(this).find('img').attr('alt'));
});
},
open: function() {
//overwrite default prev + next function. Add timeout for css3 crossfade animation
jQuery.magnificPopup.instance.next = function() {
var self = this;
self.wrap.removeClass('mfp-image-loaded');
setTimeout(function() { jQuery.magnificPopup.proto.next.call(self); }, 120);
}
jQuery.magnificPopup.instance.prev = function() {
var self = this;
self.wrap.removeClass('mfp-image-loaded');
setTimeout(function() { jQuery.magnificPopup.proto.prev.call(self); }, 120);
}
},
imageLoadComplete: function() {
var self = this;
setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16);
}
}
});
});
I have the same exact HTML code building different galleries outputting on the same page and for some reason the first carousel with lightbox works great. But for whatever reason, the second gallery does not work. The carousel works fine, but Magnific Popup does not fire. When i click on one of the thumbnails, it opens the larger image in the browser window.
I tested my js function by adding a "console.log("clicked");" after the .each. I see the console that the thumbnail is being clicked and that part is working.
Any idea how i can get the multiple sliders to work on my page?
I've tried the example from the documentation for the multiple galleries by removing everything from the function and making it as barebone as possible. I get the same result, the first lightwindow works but the second one does not.
I'm not seeing any js errors on the console either.
UPDATE #1
This isn't an ideal solution, but i did find a way to make this work. I had to use unique IDs on each slider in order to get the lightbox to work if multiple sliders were on the same page using the same ID value. In this case, I was using #carousel-links for all of the sliders. I guess you can't share the same ID for sliders across the board and get this lightbox to work?
I also moved the javascript code to be right after the carousel in the module template page. I removed it for now from my site.js file.
I'm not looking for a way to optimize the code so i can put it in my site.js. I'll try to grab that ID value by using the class on each carousel. I'll report back if i can get that to work.
UPDATE #2 - OMG
Could the problem i was having when the lightbox only worked with the first instance of the lightbox be because i was an ID instead of a CLASS as my selector for the lightbox? I changed to the CLASS and now they are all working.
What fixed my problem is I changed the selector from the ID to a class on the same element. This allowed for multiple galleries on the same page to work together with no problem.

Related Links

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
How to prevent close
Magnific-Popup Loading iframe from non-video players URL
Magnific popup - put arrows inside of an image
magnific closeOnContentClick does not work
How can style popup iframe in Magnific Pop-Up?
Gallery with mixed content types
Title for iframe/video in magnific popup
Magnific Popup: Close floats to the right
Calling magnific-popup on button element instead of an anchor
Implement query.magnific-popup.js in dreamweaver cs5. Syntax error in original code
Magnific-popup event binding to popup content

Categories

HOME
multithreading
wso2-am
variables
jdo
pypi
openmp
oracle11g
image-processing
plot
include
dot
grep
cvs
sqlite-net-extensions
jira
spring-jdbc
sql-server-2016
pivotal-cloud-foundry
directx
node-notifier
facebook-php-sdk
serverless-framework
django-cms
csrf-protection
chromium-embedded
pass-by-reference
one-to-many
numerical-methods
r-raster
preg-match-all
http-get
vsts-build-task
avcapturesession
amazon-kinesis-kpl
x11-forwarding
starteam
sharefile
reportbuilder
ansible-playbook
opshub
reportingservices-2005
eigenvalue
eclipse-gef
angular2-meteor
galleria
avconv
dotcover
qsslsocket
winscp-net
integrity
pg-dump
boost-preprocessor
zendesk-app
medium.com
removechild
android-textview
adxstudio-portals
fody
py2app
xml-attribute
simplewebrtc
hill-climbing
dlna
captivenetwork
jfugue
execute
lib.web.mvc
fouc
coveralls
cakephp-3.1
sysinternals
operation
python-green
fscommand
website-monitoring
android-nested-fragment
coverflow
bulkloader
file-locking
type-equivalence
browser-detection
first-responder
wse3.0
custom-backend
nsobject
telerik-scheduler
fluent-interface
nsviewanimation
xetex

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