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

**zakayf** · 07-04-2010, 08:09 PM

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

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.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 -

.

Right now they display under my slideshow,

, Thank You!!!

Hereis the slideshow script that i have on my webpage.

Code:

<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** · 07-04-2010, 09:16 PM

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** · 07-04-2010, 11:01 PM

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** · 07-04-2010, 11:40 PM

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

Code:

<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.