Results 1 to 5 of 5

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

  1. #1
    Join Date
    Sep 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow (v2.4)

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

    3) Describe problem: Thanks to DD for this brilliant script I have an automated slideshow for my website! But when a user manually clicks forward or backwards through the slideshow and then leaves the controls alone - the slideshow ceases to continue automatically. Can anyone help? To view the working site, go here: http://www.vornografic.co.uk/site/sfdc.html

    The code instances on the page in order of appearance...

    [CODE]#fadeshow1 {
    position:absolute;
    left:149px;
    top:164px;
    width:630px;
    height:500px;
    z-index:3;
    background-color: #333333;
    overflow: visible;[CODE]

    [CODE]#slideshowtoggler {
    position:absolute;
    left:397px;
    top:674px;
    width:178px;
    height:31px;
    z-index:11;
    font-family: Verdana, Geneva, sans-serif;
    color: #999;
    font-size: 10px;[CODE]

    Then I have...

    [CODE]</script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript" src="fadeslideshow.js">

    /****/

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

    var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [630, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc01.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc02.jpg", "", "", "Some day I'd like to explore these caves!"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc03.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc04.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc1.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc2.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc3.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc4.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc5.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc6.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc7.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc8.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc9.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc10.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc11.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/test/images/sfdc/sfdc12.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    ["http://www.vornografic.co.uk/site/images/sfdc/sfdc-alt.gif", "", "", "<b>'Caption'</b> for..."] //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'auto', pause:4500, cycles:10, wraparound:true},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: "slideshowtoggler"
    })
    </script>[CODE]

    Then I have this [ICODE]<div id="fadeshow1"></div>[ICODE] amoung other Div ID's.

    Lastly, I have this near the end of the page...

    [CODE]<div id="slideshowtoggler"><a href="#" class="prev"><img src="left.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span><a href="#" class="next"><img src="right.png" style="border-width:0" /></a></div>[CODE]

    Many thanks in advance.

    V.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You can add a resume button (add the highlighted):

    Code:
     . . . 		["http://www.vornografic.co.uk/test/images/sfdc/sfdc10.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    		["http://www.vornografic.co.uk/test/images/sfdc/sfdc11.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    		["http://www.vornografic.co.uk/test/images/sfdc/sfdc12.jpg", "", "", "VORNOGRAFIC. Bespoke illustration for SFDC"],
    		["http://www.vornografic.co.uk/site/images/sfdc/sfdc-alt.gif", "", "", "<b>'Caption'</b> for..."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:4500, cycles:10, wraparound:true},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "slideshowtoggler",
    	oninit: function(){
    		var dm = this.setting.displaymode, ufObj = this;
    		this.resume = function(e){
    			e.preventDefault();
    			if(dm.type !== 'auto'){
    				dm.type = 'auto';
    				ufObj.showslide('next');
    			}
    		};
    		this.setting.$togglerdiv.find('.resume').click(this.resume);
    	}
    })
    </script>
    Don't miss the added comma (red) after the togglerid value.

    Once you have that, you may add (highlighted):

    Code:
    <div id="slideshowtoggler"><a href="#" class="resume"><img src="resume.png" style="border-width:0" /></a> <a href="#" class="prev"><img src="l . . .
    inside the toggler div as shown. This might mess up the layout a little, but you can probably fix that yourself. If desired, the link with the class resume may go anywhere within the toggler div. You can even have more than one in there.
    - John
    ________________________

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

  3. #3
    Join Date
    Sep 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow (v2.4)

    Thanks John.... I will let you know how I get on!

    V

  4. #4
    Join Date
    Sep 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Cheers John! Are you part of DynamicDrive? I want to credit you for helping me out!

    Dynamic Drive will get a credit once my website is completed; so let me know

    It works a treat!

    See it here: http://www.vornografic.co.uk/site/sfdc.html

    Thanks again guy's!!!

    V

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Technically no, loosely yes. I'm a sometimes contributor to the script library and a very active participant in the forums here, a moderator in fact.

    You may credit me on your page/site if you like. I'll leave that to you to work out how. My full name is John Davenport Scheuer.

    You may also hit the:



    button under one or more of my post(s) to show your gratitude for my help to other forum participants.
    - 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
  •