Coda Slider with FancyBox

407 views
Skip to first unread message

rpessagno

unread,
May 26, 2009, 12:07:15 AM5/26/09
to fancybox
I'm trying to implement the Coda Slider and FancyBox functionality
into the same page, but it seems the scripts are in conflict with each
other. I want to place small images within the slider panels, and then
have the images enlarge, using FancyBox, when clicked.

I am not good with JavaScript at all, but I do know how to implement
it, to an extent. I have found that whatever group of scripts is
called last, whether it's the Coda scripts or the FancyBox scripts,
will be the one that will work. Here's my code in the <head> so you
know what I'm talking about:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->

<link href="../css/styles.css" rel="stylesheet" type="text/css" />

<!-- CODA SLIDER -->
<script src="../scripts/coda_slider/jquery-1.2.1.pack.js" type="text/
javascript"></script>
<script src="../scripts/coda_slider/jquery-easing.1.2.pack.js"
type="text/javascript"></script>
<script src="../scripts/coda_slider/jquery-easing-compatibility.
1.2.pack.js" type="text/javascript"></script>
<script src="../scripts/coda_slider/coda-slider.1.1.1.pack.js"
type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).bind("load", function() {
jQuery("div#slider1").codaSlider()
// jQuery("div#slider2").codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple
sliders on one page.
});
</script>


<!-- FANCY BOX -->
<script src="../scripts/fancy_box/jquery-1.3.2.min.js" type="text/
javascript"></script>
<script src="../scripts/fancy_box/jquery.easing.1.3.js" type="text/
javascript"></script>
<script src="../scripts/fancy_box/jquery.fancybox-1.2.1.pack.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancylink").fancybox();
});
</script>


<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable
-->
</head>


So you can see that the scripts are grouped together, but whichever
one is further down in the code is the one that works (In this case,
the FancyBox works, and the Coda does not). I have looked all over the
web for a solution, but haven't really found a situation like this.
Any help would be greatly appreciated, thank you!

JFK

unread,
May 26, 2009, 3:42:54 PM5/26/09
to fancybox
well, one thing I can see from a quick look is that in your code you
are trying to load two different versions of jquery itself

> <script src="../scripts/coda_slider/jquery-1.2.1.pack.js" type="text/
> javascript"></script>

and

> <script src="../scripts/fancy_box/jquery-1.3.2.min.js" type="text/
> javascript"></script>

it's true that many plugins come with a version of jquery included in
the download but it doesn't mean that you have to use them all, mainly
if you want to use different plugins altogether. In this case I would
recommend you to use the latest version of jquery (loaded once and at
the top) for all your plugins.

I have a site running with a slider and some links open in fancybox
without any conflict

rpessagno

unread,
May 26, 2009, 10:43:47 PM5/26/09
to fancybox
Thank you so much! I moved the second one to the top and deleted the
first from the code, and now it works! Awesome!
Reply all
Reply to author
Forward
0 new messages