Help using two jQuery scripts on the same page

Help using two jQuery scripts on the same page

Hi there. I'd be eternally thankful if someone can help me out. On my company's website, I've made use of Lightbox using jQuery, as well as an image carousel using jQuery. Alone, both scripts work fine. However, when I use them both on the same page, I encounter a silly-yet-important issue: Lightbox believes there are three times more images than there are. For instance, if I have a carousel with 10 images, when I click on a thumbnail, the image pops up and in the lower left corner, it will say "Image 1 of 30". I know this sounds like a silly problem but there is obviously an issue with the way I'm trying to use the two scripts together. I'll attach my code... maybe someone can point out a correction, or even a way to separate the scripts so there's no sharing going on.

The example below has six thumbnails that are on a carousel. The carousel scrolls properly, and clicking each thumbnail makes the image pop-up properly via Lightbox, yet it displays "Image 1 of 18". Yet as soon as I remove the carousel, it displays properly as "Image 1 of 6".

Thanks in advance!

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>Null</title>
  7. <script type="text/javascript" src="test/jquery-1.4.2.min.js"></script>
  8. <script type="text/javascript" src="test/jquery.mousewheel-3.0.2.pack.js"></script>
  9. <script type="text/javascript" src="test/jquery.fancybox-1.3.1.js"></script>
  10. <script type="text/javascript" src="test/jMyCarousel.js"></script>

  12. <link rel="stylesheet" type="text/css" href="test/jquery.fancybox-1.3.1.css" media="screen" />
  13. <link rel="stylesheet" href="style.css" />

  15. <script type="text/javascript">
  16. $(document).ready(function() {
  17. $("a[rel=example_group]").fancybox({
  18. 'transitionIn' : 'none',
  19. 'transitionOut' : 'none',
  20. 'titlePosition' : 'over',
  21. 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
  22. return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
  23. }
  24. });
  25. });
  26. </script>

  28. <script type="text/javascript">
  29. $(function() {
  30. $(".jMyCarousel").jMyCarousel({
  31. visible: '100%'
  32. });
  33. });
  34. </script>

  36. </head>
  37. <body>


  40. <div class="menuContainer">
  41. <div class="jMyCarousel">
  42. <ul>
  43. <li><a rel="example_group" href="images/gallery_residential/menu/Entertainers_Paradise.jpg"><img src="images/gallery_residential/menu/Entertainers_Paradise.jpg" width="175" height="297"></a></li>
  44. <li><a rel="example_group" href="images/gallery_residential/menu/Lakeside_Contemporary.jpg"><img src="images/gallery_residential/menu/Lakeside_Contemporary.jpg" width="175" height="297"></a></li>
  45. <li><a rel="example_group" href="images/gallery_residential/menu/Lakeview_Estate.jpg"><img src="images/gallery_residential/menu/Lakeview_Estate.jpg" width="175" height="297"></a></li>
  46. <li><a rel="example_group" href="images/gallery_residential/menu/Oregon_Charm.jpg"><img src="images/gallery_residential/menu/Oregon_Charm.jpg" width="175" height="297"></a></li>
  47. <li><a rel="example_group" href="images/gallery_residential/menu/Portland_Elegance.jpg"><img src="images/gallery_residential/menu/Portland_Elegance.jpg" width="175" height="297"></a></li>
  48. <li><a rel="example_group" href="images/gallery_residential/menu/Sophisticated_Classic.jpg"><img src="images/gallery_residential/menu/Sophisticated_Classic.jpg" width="175" height="297"></a></li>
  49. </ul>
  50. </div>
  51. </div>


  54. </body>
  55. </html>