PDA

View Full Version : Can 2 jquery features on a page interfere with each other?


dubaco
04-01-2011, 02:41 PM
Hi
This is a really annoying problem.

I can get this colorbox display to work:

http://www.hall-dunnerdale.co.uk/colorbox/gallery.htm

but as soon as I insert the same images on the page with the rest of the layout, it won't work, as in here:

http://www.hall-dunnerdale.co.uk/colorbox/cawfell2.htm

The paths are exactly the same as both pages are in the same folder. I thought that perhaps the superfish menu system or image carousel were clashing so I removed them but it still wouldn't work.

Can anyone see an obvious reason why this will only run on it's own on a blank page?
many thanks.

The relevent boits of the header are here:

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

<script>
$(document).ready(function(){
$("a[rel='example1']").colorbox();
});
</script>


<link rel="stylesheet" href="../templates/css/colorbox.css" type="text/css" media="screen" />

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="../colorbox/js/jquery.colorbox.js"></script>

<script>
$(document).ready(function(){
$("a[rel='example1']").colorbox();
});
</script>


<link rel="stylesheet" type="text/css" href="../menu/css/superfish.css" media="screen">
<script type="text/javascript" src="../menu/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="../menu/js/hoverIntent.js"></script>
<script type="text/javascript" src="../menu/js/superfish.js"></script>



<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>

ranjan
04-02-2011, 05:52 AM
Why are you loading jquery 3 times?
See my comments in the code below

<script>
//This code will never work because $ is jQuery and jQuery hasnt yet beeen loaded
$(document).ready(function(){
$("a[rel='example1']").colorbox();
});
</script>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--now jQuery is loaded first time-->
<script src="../colorbox/js/jquery.colorbox.js"></script>

<script>
$(document).ready(function(){
$("a[rel='example1']").colorbox();
});
</script>


<script type="text/javascript" src="../menu/js/jquery-1.2.6.min.js"></script>
<!--And another jQuery version loaded again 2nd time-->

<script type="text/javascript" src="../menu/js/hoverIntent.js"></script>
<script type="text/javascript" src="../menu/js/superfish.js"></script>

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- This is no3 jquery load -->

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>


You sir should learn the basics of javascript before you work with javascript again

ranjan
04-02-2011, 06:06 AM
<!-- First load jquery from google cdn. And no other jquery is needed in this page again -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


<!-- Now load plugins required for your scripts -->
<script src="../colorbox/js/jquery.colorbox.js"></script>
<script type="text/javascript" src="../menu/js/hoverIntent.js"></script>
<script type="text/javascript" src="../menu/js/superfish.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>


<script>
//One script tag please not 100

$(document).ready(function(){ //one document ready please
$("a[rel='example1']").colorbox();
$('.slideshow').cycle({
fx: 'fade' // choose your transition type
});
});
</script>

dubaco
04-02-2011, 12:54 PM
You sir should learn the basics of javascript before you work with javascript again

You sir are perfectly correct and I thank you for this initial part of my training.
No, seriously, thanks, I was along the right lines, I suppose, but thanks for putting me right.

Incidentally, does it actually matter which version of jquery you use? I presume that using the one you show that when that's updated, it means that you are always using the best version?

ranjan
04-02-2011, 03:23 PM
Sorry if my post seemed harsh.

Use the latest jQuery available, its 1.5.2 as of date

To always get the latest version from Google's CDN (Content Delivery network) use


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script


The "1" in red tells google to send you the latest 1.x.x version

Also note that github is not a CDN like google's CDN above.

Github is used by developers for versioning and collborating on an open source script. Script on Github change all the time and may sometime be unavailable

Always download the script from Github instead of hot linking like you have