Simple looping fade in/out slideshow
Hi Jac,
I looked at your page and the images are being output correctly in the code:
<div id="slideshow">
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/2010081114532150.jpg" alt="Slideshow Image 1" class="active"/>
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/2012071617100596_001.jpg" alt="Slideshow Image 2" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/2012081716421271_001.jpg" alt="Slideshow Image 3" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20091130153408684_001.jpg" alt="Slideshow Image 4" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20101123141439585_001.jpg" alt="Slideshow Image 5" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20110127170018322_001.jpg" alt="Slideshow Image 6" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20110214184247558_001.jpg" alt="Slideshow Image 7" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20110304174930220_001.jpg" alt="Slideshow Image 8" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20110620173011943_001.jpg" alt="Slideshow Image 9" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20110624181225799_001.jpg" alt="Slideshow Image 10" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20110718150338163_001.jpg" alt="Slideshow Image 11" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20110722162102397_001.jpg" alt="Slideshow Image 12" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20110727181927147_001.jpg" alt="Slideshow Image 13" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20120711111639346_001.jpg" alt="Slideshow Image 14" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20120711111839440_001.jpg" alt="Slideshow Image 15" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20120716171139408_001.jpg" alt="Slideshow Image 16" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20120716171528299_001.jpg" alt="Slideshow Image 17" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20120716172149440_004.jpg" alt="Slideshow Image 18" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20120716181955986_001.jpg" alt="Slideshow Image 19" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20120809172049596_001.jpg" alt="Slideshow Image 20" />
</a>
<a href=#>
<img src="/~quanmax/cmsAdmin/uploads/20120817164347712_001.jpg" alt="Slideshow Image 21" />
</a>
</div>
The issue appears to be with the slideshow code when you wrap the images in an anchor tag.
On the Simple Slide Show site, http://jonraasch.com/blog/a-simple-jquery-slideshow , the author of the slideshow wrote this in one of the comments:
Replace every “IMG” with “A” in the Javascript and CSS. If you are using the “active” class, attach it to the anchor (A) tag instead of the image.
A more robust solution is to wrap each frame in a div and target the div’s instead of the images (or anchors). This would allow you to add text, multiple images, etc.
Try this out and post a comment to the Simple Slide Show site with questions so the author can clarify any other changes needed.
Hope this helps!
Cheers,
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/