responsive-slides


Conflict between Magnific Popup and Slick.js and responsive settings


I'm trying to use the Slick.js carousel in responsive display with the Magnific Popup Lightbox.
It's working when the slick slider is in its basic form, but when the window is tight enough to trigger the breakpoint and that the "slides to show" are fewer, the Magnific Popup doesn't work anymore, just opening the linked picture in a new thumbnail and I have to reload the page to make it work again...
Here is my code :
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
<script type="text/javascript" src="js/slick.js"></script>
<script type="text/javascript" src="js/responsee.js"></script>
<!--Projet Un-->
<div class="proj_block">
<div>
<div class="margin line">
<div class="slick_slide s-12 l-6-slick center">
<a class="proj_un mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
<a class="proj_un mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
<a class="proj_un mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
<a class="proj_un mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
</div>
</div>
</div>
</div>
<!--Fin Projet Un-->
<!--Projet Deux-->
<div class="proj_block">
<div>
<div class="margin line">
<div class="slick_slide s-12 l-6-slick center">
<a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
<a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
<a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
<a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
<a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
<img src="img/index-test-img.jpg"/>
</a>
</div>
</div>
</div>
</div>
<!--Fin Projet Deux-->
/*SLICK SLIDE*/
<script type="text/javascript">
$(document).ready(function() {
$('.slick_slide').slick({
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 860,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 540,
settings:{
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>
/*FIN SLICK SLIDE*/
/*MAGNIFIC POPUP*/
<script type="text/javascript">
$(document).ready(function() {
$('.proj_un').magnificPopup({
gallery: {
enabled: true
},
removalDelay: 300,
mainClass: 'mfp-fade'
});
$('.proj_deux').magnificPopup({
gallery: {
enabled: true
},
removalDelay: 300,
mainClass: 'mfp-fade'
});
});
</script>
/*FIN MAGNIFIC POPUP*/
Here's the link to the beast : http://madbook.net/mad/help/index-test.html
I'm really not an expert in this, so I hope you won't scream and cry seeing all this...
It would be great if you could lead me on the good way, because I can't see where the problem comes from...
Thanks
Mad
First, I forgot, but here is the js for Slick : https://github.com/kenwheeler/slick/blob/master/slick/slick.js
Actually, I found that domNode where destroyed every time a breakpoint was passed.
I simply removed calls of the refresh function (containing the destroy one) in the checkResponsive function and it's working...
I don't know if it could create other problems though...

Related Links

Conflict between Magnific Popup and Slick.js and responsive settings
Responsive content slider
how to execute a function after responsive slides initialization but before first transition

Categories

HOME
pandas
gitlab
asp.net-core
deployment
gerrit
drivers
relative-path
vmware
read-eval-print-loop
q
routes
cvs
cmd
twitter-bootstrap-4
disassembler
installshield
serverspec
wamp
onelogin
node-notifier
dosgi
ab-testing
google-pagespeed
scichart
autocad-plugin
ml
accessor
xpages-ssjs
numerical-methods
intel-pin
web-api-testing
social-media
iframe-resizer
exuberant-ctags
scorm2004
textmate
gammu
lto
hockeyapp
theano.scan
broadcastreceiver
ws-security
unoconv
elmah
appcompat
chain-builder
dds
jquery-validate
directory-structure
composite-key
akka-cluster
memory-alignment
imanage
bonobo
fody
mikroc
connect-by
rvest
dataview
netmq
freedesktop.org
ios8-today-widget
spim
cyclomatic-complexity
atk4
cakephp-3.1
arcanist
mono-embedding
gadt
fpml
gulp-less
xojo
ceil
sgen
.aspxauth
easy-install
file-locking
excel-2003
jplaton
qt-faststart
ember-app-kit
lcs
e4x
bluepill
dice
tridion-worldserver
psi
yetanotherforum
iphone-web-app
mongomapper
sproutcore-2
uimenucontroller
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