Hello
- I have tried for hours to find an answer to this. I have a slideshow
working perfectly, if I don't wrap my slides (images) in anchor tags.
Problem is, I need them in anchor tags.
I
also have some functionality to use my images' alt as the navigation
and to put each instance of navigation in it's own div for control
over placement (this will be implemented into a CMS at some point)
Any
thoughts on how to get the images WITH anchors to display would be
greatly appreciated.
The
HTML - The first two slide instances appear, the last two do
not.
- <div
class="slides">
- <div
id="slide-pager"></div>
-
<img src="/assets/image1.jpg"
alt="Four Words per Slide 1"/>
-
- <img
src="assets/image2.jpg" alt="Four Words per
Slide 2" />
-
-
<a href="#">
-
<img src="/assets/image3.jpg alt="Four
Words per Slide 3"></a>
-
-
<a
href="#">
-
<img
src="src="/assets/image4.jpg" alt="Four
Words per Slide 4" /></a>
-
- </div>
Here
is my script -
-
<script
type="text/javascript">
$(document).ready(function
() {
$('.slides').before('<div
id="slide-pager">').cycle({
fx: 'fade',
pager: '#slide-pager',
slideExpr: 'img',
pagerAnchorBuilder: function(idx, slide)
{
var pagerclass;
if(idx==0) pagerclass="firstPager";
else if(idx==1)
pagerclass="secondPager";
else if(idx==2)
pagerclass="thirdPager";
else if(idx==3)
pagerclass="fourthPager";
return
'<div
class="'+pagerclass+'">'+slide.alt+'</div>';
}
});
});
</script>