Results 1 to 6 of 6

Thread: Ultimate Fade In Slideshow - User Controls Q

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

    Default Ultimate Fade In Slideshow - User Controls Q

    First of all whomever designed this, thank you. I have been searching around for a good slideshow that I can customize and most of the flash slide shows you can get on the web have some element of crud.

    This is also my first attempt at using any sort of javascript and I'm impressed how easy this is to use. On my first attempt I had the demo up and running on my site in less than a couple minutes.

    1) Script Title: Ultimate Fade In Slideshow

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

    3) Describe problem: I am wodering if there are (I don't know what to call them) "buttons" with commands to play, pause, and stop the slideshow. I would like to keep the slideshow persistently running, but if someone thinks its annoying I would like them to be able to turn it off. Or maybe if they see something they like they can pause it.

    Has anyone created this? Know were I can find it?

    I'm sorry I am such a novice, but I don't even know if this is hard or easy.

    I assume something in the code below would need to be modified.

    Code:
    paginateinit:function($){
    		var slideshow=this
    		var setting=this.setting
    		if (setting.togglerid){ //if toggler div defined
    			setting.$togglerdiv=$("#"+setting.togglerid)
    			setting.$prev=setting.$togglerdiv.find('.prev').data('action', 'prev')
    			setting.$next=setting.$togglerdiv.find('.next').data('action', 'next')
    			setting.$prev.add(setting.$next).click(function(e){ //assign click behavior to prev and next controls
    				var $target=$(this)
    				slideshow.navigate($target.data('action'))
    				e.preventDefault()
    			})
    			setting.$status=setting.$togglerdiv.find('.status')
    		}
    	},

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    check out the documentation for the togglerid attribute (in the slideshow initiation script). It implies you can define manual controls, even if the slideshow is in automatic mode. I haven't tried it, but it seems it should work. Have a look and try it out!
    Edit: It works. Once you click on a left/right button, the mode switches to manual. So, halfway there.
    auto slideshow w/controls
    Edit: ...and jscheuer provides the other half!
    Last edited by traq; 10-09-2009 at 04:14 AM.

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

    What traq says is true, but those controls don't include stop and go.

    That said, when I saw how robust this script (written by ddadmin) was, I was very impressed. There are, for lack of a better word, numerous 'hooks' that are available to do pretty much, if not all of what you are asking.

    First of all, you understand that there can be numerous slide shows on a page and that each one (however many or only one) is defined by the variable used for each (from the demo page):

    Code:
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/hei . . .
    So given that, you can have a stop or pause button (it really amounts to the same thing):

    Code:
    <input type="button" onclick="mygallery.navigate(mygallery.setting.imgindex);" value="Stop">
    and a go/resume button:

    Code:
    <input type="button" onclick="var dm=mygallery.setting.displaymode;if(dm.type!=='auto'){dm.type='auto';mygallery.showslide('next');}" value="Go">
    Each of these can be setup in various ways (to get the 'look and feel' you may want), the critical parts are the onclick events. If used with an anchor link (an <a> tag), they should return false, ex (for stop):

    Code:
    <a href="#" onclick="mygallery.navigate(mygallery.setting.imgindex); return false;">Link Text or Image Tag</a>
    The 'return false' simply prevents the link's href from firing, which wouldn't be good in some cases.

    I understand from your post that all of this is rather new for you. That's why I've tried to explain it in terms that would make sense to you, that you could make use of.

    But if you have any questions, feel free to ask.
    - John
    ________________________

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

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

    Default

    Funny how I didn't even think that pause and stop are the same thing. I guess I was visualizing DVD contorls. Although stop in that case would be more like turn off completely.

    Anyway, jscheuer1, I would say that your explanation is good in that I can conceptualize what you are saying. It's just that this is a foreign language yet for me so even though I might get bits and pieces of what you are explaining, I definitely don't fully comprehend it.

    This is me sort of thinking out loud... In my mind I thought the answer would be some sort of explanation of the right syntax to replace the prev and next commands inside the toggler id with stop and go commands. This way the left button could be stop and the right button could be go. I already created the new buttons. &

    But then your explanation wasn't what I had in mind or at least it doesn't seem like it is to me maybe because this is a foreign language to me.

    Are you able to explain to me where to copy and paste the code you provided? I did some searching in the javascript and didn't find code that seemed close enough for me to replace this with.

    Or is there a way to just use the script that is basically in place and just change the prev and next to stop and go?

    I really appreciate you helping and I am a pretty bright guy, but I'm only about 30 minutes into javascript at this point. I may need a little bit of hand holding on this.

    In the meantime I am just going to see how bad I can break this thing by doing a little trial and error with what you provided.

  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

    You don't really need the togglerid element if you are not using the prev/next buttons. What you can do is place a division after the slide show division like so:

    HTML Code:
    <div id="fadeshow1"></div>
    <div>
    <a href="#" onclick="var dm=mygallery.setting.displaymode;if(dm.type!=='auto'){dm.type='auto';mygallery.showslide('next');}return false;"><img style="border-width: 0;" src="images/play.png" alt="" title="Play"></a> <a href="#" onclick="mygallery.navigate(mygallery.setting.imgindex);return false;"><img style="border-width: 0;" src="images/pause.png" alt="" title="Pause"></a>
    </div>
    - John
    ________________________

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

  6. #6
    Join Date
    Oct 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    jscheuer1,

    Thanks so much. It didn't seem like it should be that easy, but it was. I clicked one of your signature links too.

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
  •