DeepBlueSky Blog

• 
  Prototype/Scriptaculous Slideshow

Posted years ago by Jim Morrison

Tagged as: Javascript

Jim is a director of Deep Blue Sky Digital, a web development and design studio in the city of Bath in the UK.  He loves to get involved in his client's businesses to help push them forward and out onto the web but his real pasion is for code... Perl, PHP, sh, javascript... it doesn't really matter as long as it works!  You can follow Jim on twitter @deepbluetweets and @jimbomorrison

Post a comment…

Share this:

• Stumble Upon
• Twitter
• Delicious
• Digg
• Reddit

30 Comments on this post

1. said “Extending it with panning..” years ago

   

   Do you think it will be possible to add a panning option to the slideshow?

   Like seen on this jQuery slideshow:
   

   http://www.gruppo4.com/~tobia/cross-slide.shtml

   and this Mootools slideshow
   

   http://www.electricprism.com/aeron/slideshow/

   As far as I know there are no public slideshows using the Prototype/Scriptaculous framework with such features.

2. Jim said “Pan & Zoom” years ago

   

   Hi Ralf,

   Sure - I'll take a look at this next week...

3. said “IE 6, 7 support?” years ago

   

   Any chance you got this working in IE? I get this error message saying "Object doesn't support this method or property".

4. Jim said “@Jon; IE support” years ago

   

   Hi Jon,

   Could you check out Natural Boundaries (an example site, the big image on the front page) and let me know if that's behaving for you?

   Also what version of Scriptaculous and Prototype are you using?

   J.

    

5. said “Figured out IE problem” years ago

   

   Hey Jim,
   

   
   

   I've figured it out. The problem was that I put this bit:
   

   
   

     oMySlides = new iSlideShow({

       slides : [

         'image-div-a',
   

         'image-div-b',
   

         'image-div-c',
   

         'image-div-d'

       ]

     });
   

    

   at the the end of the document rather than in the head.

   Thanx

   Jonathan

6. said “Expand counter” years ago

   

   Thank you for this great work, it's very instructive.  I'm trying to modify for our usage and am almost there, but not quite...

   How would I go about expanding the counter to list the numbers, ie. 1 2 3 4 5 with hyperlinks to the corresponding images, and change of class for active state to indicate which slide is being shown? This would somehow involve swapping the current image for the one clicked on, right?  I can see how to do this with a "glider" where the images are only "hidden" off the page, but not via display:none.

   Any pointers appreciated.

   Sarah 

    

7. said “Problem with two intance” years ago

   

   Hi, thanks for this great Class.

   But i have a problem trying to create two intance of the class in the same page, they don't start animating. And on the other hand i have the previous and next button and when i click one of them returns an error that said  "termObraSlide is not defined"

   i'm creating my instance by calling a function, like these:

   var ultObraSlide = new iSlideShow({
   

   autostart : true,
   

   start : 0, /* optional (default:0) */
   

   wait : 10000, /* optional (default:4s) */
   

   slides : [
   

   'foto-1',
   

   'foto-2',
   

   ],
   

   counter : 'contador-slide',
   

   playButton : 'botonPlay'
   

   });
   

   var termObraSlide = new iSlideShow({
   

   autostart : true,
   

   start : 0, /* optional (default:0) */
   

   wait : 10000, /* optional (default:4s) */
   

   slides : [
   

   'foto-term-1',
   

   'foto-term-2',
   

   'foto-term-3',
   

   ],
   

   counter : 'contador-slide-terminada',
   

   playButton : 'botonPlay-terminada'
   

   });

   thanks in advance for your time and attention and sory about my english, it's not my native language

   Agustin

8. said “SOLVED: Problem with two intance” years ago

   

   Hi again, sory about the las post... i've been trying for 4 hours, and the only problem was that i didn't specified a div with the id for the pauseButton, i feel like a real idiot.

   Sory for bother you

   Agustin

9. Jim said “Pause & Play Buttons” years ago

   

   I'm glad you've fixed your problem Agustin.  The new release should also fix your problem.  

   At the moment, if your play/pause button's aren't defined it doesn't work which I find kinda annoying so I've made it so they're no-longer required.

   All the best,

   Jim

10. said “Timerstart” years ago

    

    Hey, ver nice script from you, but i've a question:

    I want to start the first picture with a much less delay than the other ones;

    any suggestions, what i can do, to get fixed this problem ?

    thx for your answer.

11. said “Javascript Error” years ago

    

    There seems to be a javascript error when this script is used, it doesn't show up as a popup but can be seen when viewing the console or in the error status bar in IE. It says "this.play.bind" is not a function.

    Has anyone else come across this?

12. Jim said “@ J R - Javascript Error” years ago

    

    Hi J.R.

    .bind() is part of the prototype javascript library... so if it's missing it looks like prototype is.

    Can I check that you are including prototype & scriptaculous ahead of trying to use the slideshow?   

    Hope this helps,

    J.

13. said “bind error” years ago

    

     

    Hi
    

    First off I would like to say great work on this, its just what I've been looking for.
    

    I'm having the same problem as J.R with regards to the play.bind error. I am certain however I've included the latest prototype and scriptaculous libraries. I did however yesterday upgrade to the newest 1.6.1RC2 prototype library, but I doubt there is any compatibility problems.
    

    Hope you can shed some light on this.

    regards

    Andrew

14. said “Initiliaze loading.” years ago

    

    Hi, this script is really awesome but i've got some idea that would be very cool if it would be added like adding some initialization of slides to be loaded instead of the entire slides. By adding this method, it would help the page to load more faster if it has more slides.

    Again, thank you so much for the script.

    Sincerely,

     

    Shio

15. Jim said “@ Initialize loading.” years ago

    

    Hi Shio,  great idea, thanks!

    I'll see if I can include that in my next set of updates.

    All the best,

    Jim

16. said “Example CSS?” years ago

    

    Can anyone give an example of suitable CSS and structure for this?

    I don't know how to get the images stay in the same spot all the time (tried position: absolute + others) and still work nicely in the surrounding block, e.g. centering.

17. Jørgen said “this.play.bind is not a function” years ago

    

    Great script! However I have one problem. Using prototype 1.6.0.3 and scriptaculous 1.8.2 I get the javascript error "this.play.bind is not a function" on line 79 in slideshow.js when:

    - run show (all OK)

    - click STOP (all OK)

    - click PLAY (error!)

    Happens both when autostart is on or off (the initial PLAY to start the show works OK when autoplay is off).

    STOP/PLAY seems to work OK when I try the original Tom Doyle script.

    Any ideas?

18. Jørgen said “this.play.bind is not a function solved?” years ago

    

    I think I may have solved the this.play.bind is not a function error on line 79: replace

    this.play = setInterval(this.play.bind(this),this.wait);

    with

    this.playid = setInterval(this.play.bind(this),this.wait);

    and use this.playid instead of this.play in all calls to clearInterval().

19. Jim said “Need of an upgrade” years ago

    

    Thanks @Jorgen - I'll look in to that. To be honest I think the whole script is in need of an upgrade. We use it a lot but my designer (@get_dave) is not alltogether happy with it... I'm going to try and find some time this Friday and next to fix it up a bit.

20. Jørgen said “Updated version” years ago

    

    OK, great! Here is an updated version I have made BTW:

    [24/01/10]: J. Johanson, fixed "this.play.bind" bug

    [27/01/10]: J. Johanson, added goTo method

    [27/01/10]: J. Johanson, added runrandom flag

    [02/02/10]: J. Johanson, fixed bug where image goes

    blank when goNext, goPrevious, goTo called during fade

    http://www.jjohanson.com/slideshowjj.js

21. David said “Upgrade on it's way” years ago

    

    Dear all,

    Thanks for you patience. I'm now looking into upgrading this SlideShow and a new version will appear soon.

    I've taken a note of all your comments and will include the best suggestions.

    Thanks

22. David said “this.play() not a function SOLVED” years ago

    

    Hi all,

    Just to let you know the reason for the error with this.play.bind is not a function.

    Not sure of the context but you must have:

    this.play.bind(this);

    You must pass "this" as the first argument.

    My new improved slideshow is almost there and it's much improved. Will post here soon.

23. Simon said “demo” years ago

    

    Would it be possible for you to put up a simple demo on how this is setup? I had a look the link you posted (http://www.natural-boundaries.co.uk/) and it looks awesome but Im really struggling to get it working i.e. what other files do I need to include (versions)? as the instructions in the js file dont say. Whats the correct way to call it?

    would be grateful for any help and thanks for your time

24. charles said “text picture loosing synch” years ago

    

    Hi,

    I have a situation, extracting images from the database and updating a div is not a problem, however wen text also pulled from the database is also used to update another div the text and image loose synchrony for the until the images start rotating. What can i do to stop that behaviour?

25. Marc said “additional instructions?” years ago

    

    Hi, your demo on the fence site looks really great, but I'm having a lot of trouble getting my own up and running. The source for your demo seems to have significantly more css and javascript in the code than what you say is required.

    Are there any more tricks? Do you have a simpler demo?

26. witty said “can i add button navigation?” years ago

    

    I've found a million examples of jquery slideshows with button navigation (to advance to the next image or whatever) but cannot find a single example on the interwebs.

    Can it be done? What's going on here?

27. NileZ said “update?” years ago

    

    I implemented JJ's fixed version with navigation and it works ok.. But it has a few bugs when clicken on the navigation, things start to fall apart (some div's are blank, transition is stopped in the middle, ending in semi-transparent divs are rendered etc.. )

    Any chance this "new and improved" version is going to be published here anytime soon?

28. Jørgen said “Example” years ago

    

    Here is a working example with the described fixes by the way, has been working OK for many months now (start/stop, previous and next navigation just below the image). Note that the slideshow is pulled in with an iframe:

    http://oslokameraklubb.no

29. eric said “First Slideshow image” years ago

    

    In answer to the question: "I want to start the first picture with a much less delay than the other ones;"

    The script already has that built in -- kinda. If you hid ALL your images at the beginning, you would see this issue. SO just hide all your images EXCEPT your first one. Simple. The script will automatically hide it when it's time to swap the first image out. At which point, the slideshow will proceed as normal.

    HTH,

30. Rob said “captions” years ago

    

    never figured out how to make captions work - any tips ?

    thanks

Add your comment…