Coda Slider and Fancybox Conflict
i have some issues with Coda Slider and Fancybox. I use Fancybox to load an external Site within an Iframe and Coda Slider is for the Content Slider on the Startpage.
If i have the jquery-easing Plugin called in my Head fpr the Coda Slider, the Fancybox doesn't work. When i delete the link to jquery-easing-1.3 the Coda Slider throws an Exception but the Fancybox works perfectly
Here is some Code:
<script type="text/javascrip开发者_如何转开发t" src="<?php bloginfo('template_directory') ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory') ?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory') ?>/js/coda-slider.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory') ?>/js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function(){
$(".book a").fancybox({
'width' : '75%',
'height' : '75%',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'type' : 'iframe',
'autoscale' : false,
'hideOnOverlayClick' : true
});
$('#coda-slider').codaSlider({
autoSlide: true,
autoSlideInterval: 5500,
autoHeightEaseDuration: 2500,
autoHeightEaseFunction: "easeInOutElastic",
slideEaseDuration: 2500,
slideEaseFunction: "easeInOutElastic",
dynamicArrows: false,
dynamicTabs: false
});
});
</script>
Don't know why this doesn't work as it should :) Hope you Guys know =)
The specific reason for this bug is the crossLinking
setting of CodaSlider which defaults to true. If you set crossLinking: false
in your js call to the plugin, it will work. Not sure how important crossLinking is to you, but Fancybox is searching the DOM for a page that is relative to itself, therefore it fails after you click the coda-slider navigation because doing so appends a # hash mark with the panel number e.g. http://myurl.com/#1
if you click slide 1 of your coda-slider. My code looks like this:
<script type="text/javascript">
$().ready(function() {
// set up events slider
$('#home_slider').codaSlider({
autoSlide: true,
autoSlideInterval: 5500,
slideEaseDuration: 1450,
autoSlideStopWhenClicked: true,
crossLinking: false
});
</script>
精彩评论