fadeslideshow and 2 independent toggles

[thecobbler416]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Seemingly not even close to a coding guy, but have managed to build or layout a site using all these great snippets of code ( thanks first off ). Anyway, I am utilizing the slideshow and can get the navigation working as it explains in the details page. I am still not sure how to remove the frame counter 1/7 etc, but my current issue is that when I place the slidetoggle on top of the slideshow, that particular image has an area ( the span across that holds the 1/7 etc ) that is no longer click-able for the link the images in the slide show lead to..my only option would be to have the left and right arrows in seperate Div containers on either side of the slideshow, but I am not sure how to do that if the script is getting its info from the one DIV ID " slideshowtoggle" ( or whatever one wants to call it ), which from my understanding can only allow me to keep both arrows in the one DIV. Is there a way to adjust this so that the next and prev class can point to two independent items ie. #leftToggle and #rightToggle.


Thanks in advance.

Dan.

[ddadmin]

If I understand your question correctly, you're asking how to show the two "back" and "forth" navigation links of the slideshow so they are not side by side inside the pagination DIV? If so, what you can do is simply extend the area the pagination DIV covers to a wider area markup wise inside your page. For example, instead of:


<div id="fadeshow2"></div>

<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
<a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>

</div>

you can move the tag in red so it encompasses a greater area, ie:


<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">

<div id="fadeshow2"></div>

<a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>

</div>

and with that change, your pagination links can be anywhere within that extended area and still work.