View Full Version : Two jQuery scripts doesn't work together

07-28-2010, 03:30 PM

I'm trying to combine two different jQuery scripts on my webpage. The one is showing flashvideos in a lightbox and the other one is displaying thumbnails in a slideshow.

The problem is that only one script is working. I have searched the web and forums and found that several people have had this problem before and I have truly tried to fix it with noConflict(). The problem is that I have very little experience in Javascript so I haven't got it working.

So, here are the lines in the code:

<!-- Video lightbox -->
<script type="text/javascript" src="/js/videolightbox/mootools.js"></script>
<script type="text/javascript" src="/js/videolightbox/swfobject.js"></script>
<script type="text/javascript" src="/js/videolightbox/videobox.js"></script>

<!-- Thumbnail slider -->
<script type="text/javascript" src="/js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="/js/carousel.js"></script>

I haven't coded any of these myself (of course), so I am not familiar with the variables in the files. So my target is to find a way to to use these scripts simultaneously.

I am very thankful for your help but I am also kindly asking for a simple and easy to understand instruction.

The webpage can be found here: http://wearethemusicmakers.se/index2.php

Best Regards

Philip M
07-28-2010, 04:43 PM
You are using two different frameworks - mootools and jQuery. That is almost certain to result in conflicts.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

07-28-2010, 11:19 PM
ok, I have now found a jQuery script for the lightbox so the header now looks like this:


<!-- Thumbnail slider -->
<script type="text/javascript" src="/js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="/js/carousel.js"></script>

<!-- Video lightbox -->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
google.load("jquery", "1.3");
<script type="text/javascript" src="/js/jquery.prettyPhoto.js"></script>


So now the lower script works and if I delete that one the upper one kicks in.

Any ideas of how to solve it?



07-29-2010, 12:07 PM
Hi MooTools is a perfectly solid and acceptable Javascript library and I'd recommend you Mixing the two is not a good idea to debug conflicts.

Try to search some of the the methods to fix the issues

some methods like jquery.noconflict();

<script src="prototype.js"></script>
<script src="jquery.js"></script>
// Use jQuery via jQuery(...)
// Use Prototype with $(...), etc.

Refer This site as well you will get some idea