2 javascripts plugin not working together

Question

Hi, I tried to implement 2 plugins in a page and when i introduce the 2nd one... the 1st plugins stops working .. can you please help me in this.. he is the page i am trying to build..

http://www.ratingscorner.com/home21

and here are the 2 plugins i am trying to use.

http://www.catswhocode.com/blog/how-to-integrate-a-slideshow-in-your-wordpress-theme

http://www.fyneworks.com/jquery/star-rating/

here is my code.. The rating script was working from beginning. i tried to add this slideshow in this page like

<link rel="stylesheet" href="testing/t1/css/layout.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="testing/t1/css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="testing/t1/scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="testing/t1/scripts/jd.gallery.js" type="text/javascript"></script>
<script src="testing/t1/scripts/jd.gallery.transitions.js" type="text/javascript"></script>
<script type="text/javascript">

var newj = jQuery.noConflict();
function startGallery() {
var myGallery = new gallery(newj('myGallery'), {
timed: true,
showArrows: false,
embedLinks: false,
showCarousel: true,
defaultTransition: "continuoushorizontal"
});
   }  window.onDomReady(startGallery);

  </script>

please help me how to solve this problem

Answer 1

So the first one is MooTools, the second is jQuery. You can try to do $.noConflict()

http://api.jquery.com/jQuery.noConflict/

jQuery.noConflict();
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
embedLinks: false,
showCarousel: true,
defaultTransition: "continuoushorizontal"
});
}  window.onDomReady(startGallery);

Regarding your using of $ all over your site, this would do it(based on docu):

 <script type="text/javascript" src="other_lib.js"></script><!-- your mootools lib-->
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
 $.noConflict();
 jQuery(document).ready(function($) {
 // Code that uses jQuery's $ can follow here.
 $('#id-here').click(function(e) {
     alert('I can use $ here with no conflicts on other js libraries!');
 });

 });
 // Code that uses other library's $ can follow here.
     function startGallery() {
     var myGallery = new gallery($('myGallery'), {
     timed: true,
     showArrows: false,
     embedLinks: false,
     showCarousel: true,
     defaultTransition: "continuoushorizontal"
    });
  }  window.onDomReady(startGallery);
 </script>

If this still didn't work, take time to read the manual...you will get it eventually^^ Just know using .noConflict worked for me on a similar case I had a while back.

Though I'm curious where your star rating code is located...

Answer 2

You are using both Mootools and JQuery. These two javascript libraries overwrite each other.

http://www.catswhocode.com/blog/how-to-integrate-a-slideshow-in-your-wordpress-theme uses Mootools http://www.fyneworks.com/jquery/star-rating/ uses Jquery

You will need to find plugins that only use jquery or mootools. See:

http://mootools.net/forge/

http://plugins.jquery.com/

For more plugins for each framework.