Cycle2 caption2 and setting links with the images

Cycle2 caption2 and setting links with the images

Hi,
I have been gettinging into php, jquery and cycle2 for the past few days. I am looking to set up a scrolling slide show with each image being able to click and link to a page passing a url parameter. 
At the moment I am creating some test code to see how to use the library before starting to create dynamic pages linked to a database.
Below is working test code. That is fine.

If I add a link to a page e.g use a line
  1. <a href="Pages/productiondetail.php?production=1"><img src="./images/test1.jpg" data-cycle-title="Loot" data-cycle-desc="Main Stage" ></a>

then cycle2 fails to work.

If I use the  data-cycle-slides = "li" construct then cycle2 fails,

So the question is, can you add a link to an image if you use caption? And if so what is the construct to be used?

Thanks

 

  1. <script type="text/javascript" src="../jquery/jquery-1.11.0.min.js"></script>
  2. <script type="text/javascript" src="../jquery/jquery.cycle2.min.js"></script>
  3. <link href="../jquery/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
  4. <script src="../jquery/jquery.cycle2.caption.min.js"></script>
  5. .....
  6. <div class="cycle-slideshow
  7.     data-cycle-fx="scrollHorz"
  8.     data-cycle-fx="fadeout"
  9.     data-cycle-speed=1500
  10.     data-cycle-pause-on-hover="true"
  11.     data-cycle-timeout=4000
  12.     
  13.     data-cycle-caption-plugin="caption2"
  14.     data-cycle-overlay-fx-out="slideUp"
  15.     data-cycle-overlay-fx-in="slideDown"
  16.     
  17.     id="imagecycle">
  18.     <div class="cycle-caption"></div>
  19.     <div class="cycle-overlay"></div>
  20.     
  21.     <img src="./images/test1.jpg" data-cycle-title="Loot" data-cycle-desc="Main Stage" >
  22.     <img src="./images/test2.jpg" data-cycle-title="Steel Magnolias"  data-cycle-desc="Main Stage">
  23.     <img src="./images/test3.jpg" data-cycle-title="Death and the Maiden"  data-cycle-desc="Main Stage">
  24.     <img src="./images/test4.jpg" data-cycle-title="Foxfinder"  data-cycle-desc="The Studio">
  25.     <img src="./images/test5.jpg" data-cycle-title="She Stoops to Conquer"  data-cycle-desc="Main Stage">
  26.     </div>