Combining Jquery Cycle and Lightbox

Combining Jquery Cycle and Lightbox

Hi, 

I've been trying to combine these two functions, with no luck . 

Cycle works perfect on its own
So does Lightbox. 

Here's the of my page : 

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  7. <title>Untitled</title>
  8. <link href="css/lucas.css" rel="stylesheet" type="text/css" />
  9. <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />



  13. <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
  14. <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

  16.     

  18. <script src="scripts/jquery-1.5.1.js"type="text/javascript"></script>
  19. <script type="text/javascript" src="scripts/grace-fade.js"></script>
  20. <script type="text/javascript" src="scripts/pngfix.js"></script>

  22. <!-- include Cycle plugin -->
  23. <script src="scripts/jquery.cycle.all.min.js"type="text/javascript"></script>
  24. <script src="scripts/scripts.js" type="text/javascript"></script>



  28. <style type="text/css">
  29. /* jQuery lightBox plugin - Gallery style */
  30. #slideshow {
  31. background-color: #FFF;
  32. padding: 0px;

  34. }
  35. #slideshow ul { list-style: none; }
  36. #slideshow ul li { display: inline; }
  37. #slideshow ul img {
  38. }
  39. #slideshow ul a:hover img {
  40. color: #fff;
  41. }
  42. #slideshow ul a:hover { color: #fff; }
  43. </style>




  48. </head>

  50. <body>

  52. <div id="container">   

  54. <div class="menu">
  55.   <div id="name" class="fade"><a href="javascript:ajaxpage('intro.html', 'content')"></a>
  56.   </div>

  58.  <div id="aw2011" class="fade"><a href="javascript:ajaxpage('aw2011.html', 'content') "></a></div>
  59.     <div id="ss2011" class="fade"><a href="javascript:ajaxpage('ss2011.html', 'content') "></a></div>
  60.     <div id="aw2010" class="fade"><a href="javascript:ajaxpage('ss2010.html', 'content') "></a></div>
  61.         <div id="stocklists" class="fade"><a href="javascript:ajaxpage('stocklists.html', 'content') "></a></div>
  62.     <div id="press" class="fade"><a href="javascript:ajaxpage('press.html', 'content') "></a></div>
  63.     <div id="info" class="fade"><a href="javascript:ajaxpage('info.html', 'content') "></a></div>
  64.        
  65. </div>
  66. </div>
  67. <div id="content"></div>
  68. </div>
  69. </body>
  70. </html>
Here's the script  :

  2. function ajaxpage(url, containerid) {
  3.     var $container= $('#' + containerid);
  4.     $container.hide().load(url, function() {
  5.             $container.fadeIn();
  6.   
  7.   $(function() {

  9. $('#slideshow img:first').fadeIn(7000, function() {

  11.       

  13.     });

  15. });

  18.    $('.slideshow')
  19.     .cycle({
  20.          next: '#next2',
  21.             prev: '#prev2',
  22.           fx:   'fade', 
  23.          speed:'1500',
  24. timeout: 0,
  25.  
  26. after: function() {
  27.     var alt = $(this).attr('alt');
  28.     // do something with alt text
  29.     $('#someElement').html(alt);
  30. }
  31.       });
  33.      
  34.     });
  36. }

  38.   $(function() {
  39.         $('#slideshow a').lightBox();
  40.     });
  41. // JavaScript Document  


Is there an issue with the versions of Cycle, Jquery, Lightbox i'm using??
Am i supposed to use 'NO CONFLICT' somewhere?

Any ideas or help??

Thank you for your time. 
x