Jquery Cycle and Fancybox

Jquery Cycle and Fancybox

I am trying to create a slideshow that uses the Jquery Cycle plugin. Inside each slide I would like to have images that open up to fancybox lightbox. The issue I'm having is that when the Cycle code is left alone, the images do not open nor do they even act like links. When I comment out the Cycle code, the images again become links and open the lightbox but it, as would be expected the slides are no longer slides. I'm new to Jquery so I appreciate any tips you can pass along.

Here is the code I'm using:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>

  5. <!-- FANCY BOX -->
  6. <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
  7.  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  8. <script type="text/javascript">
  9.    var $jq = jQuery.noConflict();
  10. </script>
  11. <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js">        </script>

  13. <!-- JQUERY CYCLE -- >
  14. <!-- include jQuery library -->
  15. <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>-->
  16. <!-- include Cycle plugin -->
  17. <script type="text/javascript" src="http://malsup.github.io/jquery.cycle.all.js"></script>

  19. <script type="text/javascript">
  20. jQuery(document).ready(function($) {
  21. var titles = $('#cycleContainer div.item').find("h2").map(function() { return    $(this).text(); });
  22. // Code that uses jQuery's $ can follow here.
  23. $('#cycleContainer').before('<div id="current_resident_nav"></li><ul id="pager"><li> <h2>artists</h2></ul></div>').cycle({
  24. //Specify options
  25. fx:     'scrollLeft', //Name of transition effect
  26. timeout: 0,           //Disable auto advance
  27. pager:  '#pager',     //Selector for element to use as pager container
  28. pagerAnchorBuilder: function (index) {               //Build the pager
  29. return '<li><p class="artists"><a href="#">' + titles[index] + '</p></a></li>';
  30. },
  31. updateActivePagerLink: function(pager, currSlideIndex) {
  32. $(pager).find('li').removeClass('active').filter('li:eq('+currSlideIndex+')').addClass('active');
  33. }
  34. });
  35. });

  37. </script>
  38. <script type="text/javascript">
  39. jQuery(document).ready(function($) {
  40. $jq("a.example_group").fancybox({
  41.         'transitionIn'      : 'none',
  42.         'transitionOut'     : 'none',
  43.         'titlePosition'     : 'over',
  44.         'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
  45.             return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
  46.         }
  47.     });

  49. });

  51. </script>



  55. <title>Tech Demo</title>
  56. </head>

  58. <body>
  59. <div id="cycleContainer" style="z-index: -100;">   
  60. <div class="item">
  61. <div id="current_resident_content" style="border:1px solid black; width: 960px; height: 500px;">
  62.                     <div id="current_resident_images">
  63.                         <div class="current_resident_img"><a class="example_group" rel="group1" href="http://cdn4.blogs.babble.com/strollerderby/files/2011/06/test-100x100.jpg"><img src="http://cdn4.blogs.babble.com/strollerderby/files/2011/06/test-100x100.jpg" width=100 height=100 /></a></div>

  65.                         <div class="current_resident_img"><a class="example_group" rel="group1" href="http://www.newyorker.com/online/blogs/alpha/test/test-thumb-100x100.jpg"><img src="http://www.newyorker.com/online/blogs/alpha/test/test-thumb-100x100.jpg" width=100 height=100 /></a></div>

  67.                         <div class="current_resident_img"><img src="{resident-thumbnail-3}" width=100 height=100 /></div>

  69.                         <div class="current_resident_img"><img src="{resident-thumbnail-4}" width=100 height=100 /></div>

  71.                         <div class="current_resident_img"><img src="{resident-thumbnail-5}" width=100 height=100 /></div>

  73.                     </div><br />
  74.                     <div id="current_resident_bio">
  75.                                 <h2>This is a test</h2>
  76.                                     <p>Lorem Ipsum blah blah blah</p>                               

  78.                     </div>
  79.                 </div>


  82. </div>
  83. <div class="item">
  84. <div id="current_resident_content" style="border:1px solid black; width: 960px; height: 500px;">
  85.                     <div id="current_resident_images">
  86.                         <div class="current_resident_img"><a class="example_group" rel="group2" href="http://www.fmwconcepts.com/misc_tests/caption_test/1tmp_6819.gif"><img src="http://www.fmwconcepts.com/misc_tests/caption_test/1tmp_6819.gif" width=100 height=100 /></a></div>

  88.                         <div class="current_resident_img"><a class="example_group" rel="group2" href="http://www.nasa.gov/centers/marshall/images/content/99076main_DSCF8603_t.jpg"><img src="http://www.nasa.gov/centers/marshall/images/content/99076main_DSCF8603_t.jpg" width=100 height=100 /></a></div>

  90.                         <div class="current_resident_img"><img src="{resident-thumbnail-3}" width=100 height=100 /></div>

  92.                         <div class="current_resident_img"><img src="{resident-thumbnail-4}" width=100 height=100 /></div>

  94.                         <div class="current_resident_img"><img src="{resident-thumbnail-5}" width=100 height=100 /></div>

  96.                     </div><br />
  97.                     <div id="current_resident_bio">
  98.                                 <h2>This is a test</h2>
  99.                                     <p>Lorem Ipsum blah blah blah</p>                               

  101.                     </div>
  102.                 </div>


  105. </div>
  106. </div>
  107. </body>
  108. </html>