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
- <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
- <script type="text/javascript" src="../jquery/jquery-1.11.0.min.js"></script>
- <script type="text/javascript" src="../jquery/jquery.cycle2.min.js"></script>
- <link href="../jquery/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
- <script src="../jquery/jquery.cycle2.caption.min.js"></script>
- .....
- <div class="cycle-slideshow
- data-cycle-fx="scrollHorz"
- data-cycle-fx="fadeout"
- data-cycle-speed=1500
- data-cycle-pause-on-hover="true"
- data-cycle-timeout=4000
-
- data-cycle-caption-plugin="caption2"
- data-cycle-overlay-fx-out="slideUp"
- data-cycle-overlay-fx-in="slideDown"
-
- id="imagecycle">
- <div class="cycle-caption"></div>
- <div class="cycle-overlay"></div>
-
- <img src="./images/test1.jpg" data-cycle-title="Loot" data-cycle-desc="Main Stage" >
- <img src="./images/test2.jpg" data-cycle-title="Steel Magnolias" data-cycle-desc="Main Stage">
- <img src="./images/test3.jpg" data-cycle-title="Death and the Maiden" data-cycle-desc="Main Stage">
- <img src="./images/test4.jpg" data-cycle-title="Foxfinder" data-cycle-desc="The Studio">
- <img src="./images/test5.jpg" data-cycle-title="She Stoops to Conquer" data-cycle-desc="Main Stage">
- </div>