Advanced Search

Results 1 to 4 of 4

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

  1. #1
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

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

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    Code:
    <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:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    Add this to your stylesheet:

    Code:
    .fadeslidedescdiv {
    	left: 0;
    	width: 370px!important;
    }
    Or, if you have no stylesheet for the page, add this to the head of the page:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •