Ultimate Fade-in slideshow (v2.4) - Special wish

[moonlight]

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

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

3) Describe problem:

Hi there, I have integrated the script into my site and it works perfectly. Thank you. I have however a special wish: Can I place the navigation links for moving the slides forward and backward directly on top of the picture (precisely in the right bottom corner of the picture)? This will make the navigation links panel looks like integrated in the picture frame.

Thank you if you get back to me.

Kind regards
Ronnie

<script type="text/javascript" src="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: [620, 600], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["Gallery/ki_galleries/galerie-home-herrliberg/herrliberg_01_01.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["Gallery/ki_galleries/galerie-home-herrliberg/herrliberg_01_02.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["Gallery/ki_galleries/galerie-home-herrliberg/herrliberg_01_03.jpg"],
["Gallery/ki_galleries/galerie-home-herrliberg/herrliberg_01_04.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--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: "ondemand",
togglerid: "fadeshowtoggler"
})

</script>

................

<div id="fadeshow1"></div>
<br />

<div id="fadeshowtoggler" style="width:250px; text-align:center; margin-top:-50px">
<a href="#" class="prev"><img src="images/arrow-left.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="images/arrow-right.png" style="border-width:0" /></a>
</div>

[jscheuer1]

<div id="fadeshowtoggler" style="position:relative;z-index:2000;width:250px;text-align:center;top:-50px;">

Now, I'm not sure about the width or the top values. But those can be tweaked once you see how it lays out. And a left value is probably needed:


style="position:relative;z-index:2000;width:250px;text-align:center;top:-50px;left:370px;"

For that I just subtracted the width of the toggler from the width of the show, it also may need to be tweaked.

[moonlight]

Hi john

Thank you for your prompt reply!

It works perfectly. But now since the navigation-links is in the right bottom corner, it covers part of the text for the pic. Could we make the text box a bit shorter, starting from the left bottom corner, so that it does not touch the navigation on the right, I do not mind even the box will be a square? To ask the question differently, where can I set the width of the text box?

Thank you when you get back again.

Kind regards
Ronnie

[jscheuer1]

Add this to your stylesheet:


.fadeslidedescdiv {
left: 0;
width: 370px!important;
}

Or, if you have no stylesheet for the page, add this to the head of the page:


<style type="text/css">
.fadeslidedescdiv {
left: 0;
width: 370px!important;
}
</style>

Notes: The !important keyword is required to override the scripted width for this element. As before the exact values may need to be tweaked. But if this all worked out before with the other one, these should be good.