2

On my website's homepage I have a slider and a fancybox working side by side.

It seems to be working fine, but as soons as one opens a fancybox the slides of the slider are messed up. I tried using jquery.noconflict everywhere, even tried to reset the slider with an onClosed function for the fancybox. Unfortunately this all didn't help me...

I really hope one of you can help me with this issue.

Edit

Replaced the Jquery, but unfortunately the slides are still messy

I am currently trying the onClosed events for fancybox to pause (and resume) the slideshow. The code isn't working and I don't know why... I've also test it with a button <button data-cycle-cmd="pause">Pause</button> which did the trick. Any ideas why the function is not working or calling?

EDIT EXTRA; I put the html codes from the site underneath:

Slider div:

<div class="cycloneslider cycloneslider-template-default" id="cycloneslider-slideshow1-1" style="max-width:657px">
<div class="cycloneslider-slides cycle-slideshow" data-cycle-slides=">
 div" data-cycle-auto-height="657:359"
 data-cycle-fx="fade" 
data-cycle-speed="1000" 
data-cycle-timeout="4000" 
data-cycle-pause-on-hover="false" 
data-cycle-pager="#cycloneslider-slideshow1-1 .cycloneslider-pager" 
data-cycle-prev="#cycloneslider-slideshow1-1 .cycloneslider-prev" 
data-cycle-next="#cycloneslider-slideshow1-1 .cycloneslider-next" 
data-cycle-tile-count="7" 
data-cycle-tile-delay="100" 
data-cycle-tile-vertical="true" 
data-cycle-log="false">
<div class="cycloneslider-slide" > 
(sources of) img1, img2, img3
</div>
</div>
<script>jQuery.noConflict();</script>

Tried but failed: 

$('.cycle-slideshow').cycle('pause');

$('#cycloneslider-slideshow1-1 .cycle-slideshow').cycle('pause');

$('.cycle-slideshow', window.parent.document).cycle('pause');
user1984409
  • 23
  • 4

1 Answers1

0

There is some type of a jquery conflict in your code. Try this:

jQuery('.cycle-slideshow').cycle('pause');

Instead of 

$('.cycle-slideshow').cycle('pause');
Alon Eitan
  • 11,997
  • 8
  • 49
  • 58