Making two jquery scripts work together on page

11va17bene · 11-26-2011, 02:34 PM

I have searched and found other people have this problem. I'm using a jquery scrollTo script and lightbox2 script. They are not playing nice together on the same page. I saw something about putting in no conflict, where in the world do I do that, I am not a programmer. The thing is my code for lightbox is in the <head> tag and the code for the scrollTo is in the body tag. Here is the code for the lightbox. Any help is so so awesome.


<script type="text/javascript" src="lightbox2/prototype.js"></script>
<script type="text/javascript" src="lightbox2/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox2/lightbox.js"></script>
<link rel="stylesheet" href="lightbox2/lightbox.css" type="text/css" media="screen" />

<style type="text/css">

</head>

VIPStephan · 11-27-2011, 11:10 AM

OK, first understand what you’re doing, then do it. Obviously you just copied/pasted together random scripts from the internet since your lightbox script is using the prototype framework and you said you were using jQuery scrollTo. Exactly this is the problem but by adding a noconflict function you’re not solving the problem, you’re making it even more complicated.

My advice is: search for a lightbox type plugin that is based on jQuery, not prototype. I. e. choose one JS framework and stick with it throughout your website. But having seen a similar problem a few days ago I’d also like to remind you: The current version of jQuery is 1.7.1 so don’t use a plugin that comes with/relies on jQuery 1.2.3 or something like that as it’s most likely outdated and development has ceased.