How to get crossSlide and lightbox2 working together on the same page.

Question

(CrossSlide)

(LightBox)

This is my header:

<script type="text/javascript" src="<?php echo ROOT.'sources/js/jquery.js'; ?>"></script>
<script type="text/javascript" src="<?php echo ROOT.'sources/js/contentSlider/jquery.cross-slide.js'; ?>"></script>
<link rel="stylesheet" href="<?php echo ROOT.'sources/css/lightbox.css'; ?>" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo ROOT.'sources/js/lightbox/prototype.js'; ?>"></script>
<script type="text/javascript" src="<?php echo ROOT.'sources/js/lightbox/scriptaculous.js?load=effects,builder'; ?>"></script>
<script type="text/javascript" src="<?php echo ROOT.'sources/js/lightbox/lightbox.js'; ?>"></script>

This is my body:

 <script type="text/javascript">
 $(function() {
    $('#imgHold').crossSlide({
      sleep: 3,
      fade: .5
    }, [
      { src: 'images/featured/ftcont_img1.png' },
      { src: 'images/featured/ftcont_img2.png' },
      { src: 'images/featured/ftcont_img3.png' },
      { src: 'images/featured/ftcont_img4.png' }
    ]);
 });
 </script>
 <div id="ftIMG"><div id="imgHold">Loading...</div></div>

I don't have anything using the lightbox script on this page. But I want the keep the script in the header so in PHP I only have to call up 1 header. The LightBox "manual" said to add "initLightbox(); to the onload attribute on the body tag, so I did that and nothing changed. Now I also read somewhere else about a (jQuery.no-conflict), im wondering if this would be the way to proceed. Or if there is another way to fix this problems.

Also, if I want to use (ThickBox3.1) on the same page with everything else. Would it be possible, and how to do so exactly?

Also, sorry guys about not posting them up as links, apparently new users are not allowed to post up more than 1 link.

Answer 1

Try changing your code snippet to the following:

jQuery(function() {
    jQuery('#imgHold').crossSlide({
      sleep: 3,
      fade: .5
    }, [
      { src: 'images/featured/ftcont_img1.png' },
      { src: 'images/featured/ftcont_img2.png' },
      { src: 'images/featured/ftcont_img3.png' },
      { src: 'images/featured/ftcont_img4.png' }
    ]);
 });

This might work as long as there are no other conflicts on the page.

See this article on docs.jquery.com for how to use jQuery with other libraries such as prototype and scriptaculous, both of which you're making use of in your example.