Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Stop at last slide after one cycle

  1. #1
    Join Date
    Jan 2010
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Stop at last slide after one cycle

    1) Script Title: Continuous Reel Slideshow

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

    3) Describe problem:

    How do you get the slideshow to do just one auto cycle of images and stop on the last one.

    I have 8 slides, the last one being a statement rather than an image. I have set cycles to 1 but the slideshow goes back to slide number 1 and then stops. I want it to stop on slide 8.

  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

    Add the highlighted as shown to your on page init:

    Code:
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:1, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "",
    	oninit: function(){
    		--this.setting.totalsteps;
    	}
    })
    Don't miss the added comma (red) after the togglerid value.
    - John
    ________________________

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

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

    Default

    Hi John

    I added the additional code but the slideshow no longer works. The code you posted refers to fadeSlideShow, does this make a difference?

    Matt

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

    Yes. my mistake, I misread your link to the script without clicking on it and thought that (fadeslideshow) was the slideshow you were talking about.

    I'll have a look at the script you are using and let you know.
    - John
    ________________________

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

  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

    OK, say you have something like:

    Code:
    var firstreel=new reelslideshow({
    	wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
    	dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["../dynamicindex4/fruits.jpg"],
    		["../dynamicindex4/pool.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
    		["../dynamicindex4/autumn.jpg"],
    		["../dynamicindex4/dog.jpg"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:1, pauseonmouseover:true},
    	orientation: "h", //Valid values: "h" or "v"
    	persist: true, //remember last viewed slide and recall within same session?
    	slideduration: 300 //transition duration (milliseconds)
    })
    You can do:

    Code:
    var firstreel=new reelslideshow({
    	wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
    	dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["../dynamicindex4/fruits.jpg"],
    		["../dynamicindex4/pool.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
    		["../dynamicindex4/autumn.jpg"],
    		["../dynamicindex4/dog.jpg"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:2, pauseonmouseover:true},
    	orientation: "h", //Valid values: "h" or "v"
    	persist: true, //remember last viewed slide and recall within same session?
    	slideduration: 300 //transition duration (milliseconds)
    });
    
    jQuery(function($){
    	--firstreel.maxsteps;
    });


    The browser cache may need to be cleared and/or the page refreshed to see changes.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    Last edited by jscheuer1; 10-12-2012 at 03:45 PM.
    - John
    ________________________

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

  6. #6
    Join Date
    Jan 2010
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks John, that works perfectly. I know I will be using this feature again.

  7. #7
    Join Date
    Jan 2010
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John

    Another quick question regarding this script.

    Is it possible to control the pause time of each individual slide, similar to the myfadeduration: [1, 100, 1500, 1500, 1500], used in fade slideshow?

  8. #8
    Join Date
    Mar 2011
    Posts
    2,144
    Thanks
    59
    Thanked 116 Times in 113 Posts
    Blog Entries
    4

    Default

    Make the value in red higher to increase the amount of time for the slides to pause.
    Code:
    displaymode: {type:'auto', pause:2500, cycles:2, pauseonmouseover:true},

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

    Well, yes unless you mean how to set a different pause value for each image. If that's the case, unlike the fadeslideshow, there's no convenient handle for that built into the reelslideshow script. One could probably be made fairly easily by editing the script. If that's what you want, let me know, I'll look into it.
    - John
    ________________________

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

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

    Hmm, after rereading your post, I'm pretty sure that (individual pause rates for each slide) is what you're after. If so, use this modified version of the reelslideshow script:

    reelslideshow_mod.js

    Use it in place of the official version. It then allows you to do like so (important features highlighted) in the on page new reelslideshow call:

    Code:
    <script type="text/javascript">
    
    var firstreel=new reelslideshow({
    	wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
    	dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg"], //["image_path", "optional_link", "optional_target"]
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg"] //<--no trailing comma after very last image element!
    	],
    	pausearray: [
    		1000,
    		4000,
    		2000,
    		5000
    	],
    	displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
    	onslide: function(){
    			this.setting.displaymode.pause = this.setting.pausearray[this.curslide];
    		},
    	orientation: "h", //Valid values: "h" or "v"
    	persist: true, //remember last viewed slide and recall within same session?
    	slideduration: 300 //transition duration (milliseconds)
    })
    
    </script>
    Notice that the pausearray has the same number of entries as the imagearray. Each pause in the pausearray will go with its corresponding image in the imagearray. Except that is for the first time for the first slide. It will use whatever pause is configured here:

    Code:
    	displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
    - John
    ________________________

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

Similar Threads

  1. Resolved jQuery cycle plugin - click stop auto slide show
    By ggalan in forum JavaScript
    Replies: 9
    Last Post: 07-22-2013, 10:05 PM
  2. One Stop Slide Show
    By vwphillips in forum Submit a DHTML or CSS code
    Replies: 9
    Last Post: 09-23-2010, 09:22 AM
  3. Slideshow cycle once -stay on last slide
    By Stevishere in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-01-2010, 04:15 PM
  4. Omni Slide stop following page
    By ChrissehB in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-28-2009, 07:36 AM
  5. How to stop this Slideshow after 1 cycle?
    By themind in forum JavaScript
    Replies: 1
    Last Post: 09-22-2005, 06:41 AM

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
  •