Making an image a link when using the Cycle Plugin
Hello,
I am trying to figure out how to make an image a link when using the Cycle plugin. If I surround the image with an anchor tag <a href... that image will not appear in the slide show. What am I missing? Thanks for your time :)
Sample of what I am doing that doesn't work where I add an <a href
....
<head>
<!-- tutorial from this website http://www.malsup.com/jquery/cycle/int2.html-->
<style type="text/css">
.pics {
height: 584px;
width: 360px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 528px;
height: 352px;
top: 0;
left: 0
}
#slideshow img { display: none }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
fx: 'fade',
speed: 700,
timeout: 3000,
next: '#slideshow',
pause: 1
});
});
</script>
</head>
<body>
<div id="slideshow" class="pics" >
<img src="rotator5.jpg" width="528" height="352" />
<a href="#"><img src="rotator1.jpg" width="528" height="352" /></a>
<img src="rotator6.jpg" width="528" height="352" />
<img src="rotator3.jpg" width="528" height="352" />
<img src="rotator4.jpg" width="528" height="352" />
<a href="#"><img src="rotator2.jpg" width="528" height="352" /></a>
</div>
</body>
</html>