Prototype & jquery conflict

[Owz]

I know this has been mentioned many times before, but I have yet to
find a solution..

I have the modal box working on my site but I also have a jquery
plugin installed (content slider) when I comment out the slider code
the modal box works fine... with it it does not work.. I have looked
on the net and have found out what the problem is but I can not seem
to get it to work..

I found tis page on the jquery site http://docs.jquery.com/Using_jQuery_with_Other_Libraries
but I still can not see how I go about sorting out my issue...

the site address with the content slider and modal box can be found
at... www.swaray.co.uk/Casenote/inserts.html

The code in question is:

<!-- The scripts ----->

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="builder.js"></script>
<script type="text/javascript" src="scriptaculous.js? ¬
load=effects"></script>
<script type="text/javascript" src="modalbox.js"></script>
<script type="text/javascript" src="lightbox.js"></script>
<script type="text/javascript" src="jcarousel/lib/
jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jcarousel/lib/
jquery.jcarousel.pack.js"></script>
<script type="text/javascript">

function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next
button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});

carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});

// Pause autoscrolling if the user moves with the cursor over the
clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};

jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 4,
size: 4,
scroll: 1,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>

the content slider html code is:

<ul id="mycarousel">
<li><img src="img/variety_of_colour.jpg" alt="" /></li>
<li><img src="img/folder_solution_specialists.jpg" alt="" /></li>
<li><img src="img/antibacterial.jpg" alt="" /></li>
<li><img src="img/slider_bespoke_design.jpg" alt="" /></li>
</ul>


the modal box is called from several locations they have links like
this:

<li><a onclick="Modalbox.show('floating_contact_box.html', {title:
this.title, width:650, height:795}); return false;" title="Contact us"
href="#">Contact</a></li>

this is the contact link in the top nav...

Any ideas how I get these frameworks to play together? I have been
struggling with this for days..

any help would be greatly appreciated..

[Owz]

Fixed this now...

On Jun 29, 1:32 pm, Owz <willow...@hotmail.com> wrote:
> I know this has been mentioned many times before, but I have yet to
> find a solution..
>
> I have the modal box working on my site but I also have a jquery
> plugin installed (content slider) when I comment out the slider code
> the modal box works fine... with it it does not work.. I have looked
> on the net and  have found out what the problem is but I can not seem
> to get it to work..
>

> I found tis page on the jquery sitehttp://docs.jquery.com/Using_jQuery_with_Other_Libraries