Ultimate Fade-in slideshow (v2.4) - help with navigation control placement

[zakayf]

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

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

3) Describe problem: First, thank you for all these scripts and for taking the time to answer questions. I have searched for the answer to my problem in the forum, but did not find it. What do i do to display the - navigational controls "slideshowtoggler" - on both left and right sides of my slideshow, here is an example -

http://kayfuem.ucoz.net/slideshowexmp1.png.

Right now they display under my slideshow,

http://kayfuem.ucoz.net/screenshot3.png, Thank You!!! :)

Hereis the slideshow script that i have on my webpage.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="http://zakayf.ucoz.com/kayf/slideshow/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script><script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [902, 270], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://kayfuem.ucoz.net/IMG-BDX-2.png", href="http://www.facebook.com/pages/North-Hollywood-CA/DBX-DiamondBlackExteriors/117653694936734?ref=mf", "_new", "2ServeVinyl - CAR WRAPS, CARBON FIBER, RACING STRIPES, STICKERS, DECALS, CUSTOM LETTERING, TAILLIGHT, COVERS, HEADLIGHT COVERS AND MUCH MORE JUST FOR YOUR CAR, MAKE IT LOOK BETTER, CONTACT US NOW!!!"],
["http://kayfuem.ucoz.net/IMG-BDX.png", href="http://www.facebook.com/pages/North-Hollywood-CA/DBX-DiamondBlackExteriors/117653694936734?ref=mf", "_blank", "DBX"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "peekaboo",
togglerid: "slideshowtoggler",
oninit:function(curimage, index){
var setting=this.setting
var showid="<b>Slideshow ID:</b> " + setting.wrapperid + "<br />"
var showdimensions="<b>Slideshow Dimensions:</b> " + setting.dimensions + "<br />"
var totalimages="<b>Total Images:</b> " + setting.imagearray.length + "<br />"
var firstimagelink="<b>First slide is hyperlinked to:</b> " + setting.imagearray[0][1] + "<br />"
jQuery('#info').html(showid+showdimensions+totalimages+firstimagelink)
}
})

</script>
<div id="fadeshow1"></div>
<div id="slideshowtoggler">
<a href="#" class="prev"><img src="http://kayfuem.ucoz.net/Slider/btn_prev.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://kayfuem.ucoz.net/Slider/btn_next.png" style="border-width:0" /></a>
</div>

[azoomer]

If you find the css for #fadeshow2toggler (or what you have named it) and also make a class named .prev and one named .next you can place the controls where you want. Play around with width and height and margins ( positive and negative). Post a link to your site if you need more help

[zakayf]

azoomer - You probably didn't take a look at the script that i have posted above, i already have those classes in my script, the only thing i need to know is how to put them(navigational controls) on both left and right sides of my slideshow. And also the right place in the script to put. Thats all i need to know and my web url is : http://kayfuem.ucoz.net/

[azoomer]

I am aware that these classes are in the javascript. That is why I am referring to them. I was merely suggesting that you use these classes in your styles. For example by adding something like this

<style type="text/css">
#slideshowtoggler {
margin-top:-180px;
height:180px;
}
.prev {
float:left;
margin-left:-30px;
}
.next {
float:right;
margin-right:-30px;
}
</style>
In the head section of your page. Adjust it to your needs.

[zakayf]

Thank You very much azoomer. You helped me alot, and it works now just as i wanted. Thanks one more time for your help :)

[deliwasista]

I was totallly stumped on this too - your answer has fixed my problem :)