Response title
This is preview!
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>
1