PDA

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

nomadmonkey
07-28-2010, 02:30 PM
Hello,

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
Johannes
Philip M
07-28-2010, 03: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.
nomadmonkey
07-28-2010, 10: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>
<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?

Thanks

//Johannes
santhoshj400
07-29-2010, 11:07 AM
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();


<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>

Refer This site as well you will get some idea

http://docs.jquery.com/Using_jQuery_with_Other_Libraries