two clashing javascripts

Question

I'm a n00b when it comes to javascript. I have two scripts which I found online that I am trying to use on the same page. One is prettyPhoto( http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/ ) which I am using for the light box effect. The other is slideshow ( http://slideshowjs.com/ ) which I'm using in the middle of the page to rotate content.

Please go to http://gherkin.co.nz/jstest/index3.html to see what I'm talking about and check out the source. If anyone wants me to post the code in here I will do it, it's just that it's a fair amount of code.

The problem is with the prettyPhoto link ("Send us an email" down the bottom of the page). It is supposed to put the linked page as an iframe into the lightbox - It works fine on all other pages, but not on this page. On this page it takes you to the linked page, instead of floating it on the existing page like it is meant to.

If anyone has any ideas or suggestions, please let me know. I've been struggling with this one for a while.

Answer 1

You will need to use jQuery's noConflict(). Docs can be found here

var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Answer 2

My Firebug said to me :

$("#blogSlider").codaSlider is not a function = index3.html (ligne 21) [Break on this error] $("#blogSlider").codaSlider();

Have you inserted the code in your example page ?