Icon: News & Updates News & Updates
Want a quick, lazy, command line way to pipe iso-8859-1 ( or any character encoding ) SQL into MySQL as UTF-8? Here's a little four-liner for you!
iStylista - the new on-line personal shopping service is set to launch next month and boy are we excited!
A little slide show object for any of you that use prototype and scriptaculous.
Our online hotel, tour and travel portal - Gate54 - is back.
Icon: Creative Portfolio Creative Portfolio
Icon: Clients & Partners Clients & Partners

News & Articles

Simple slide show for prototype & scriptaculous

A little slide show object for any of you that use prototype and scriptaculous.

Dave has recently been playing about with a little slideshow.js that we found on Tom Doyle's blog.

It's a great little script (thanks Tom) but I thought it could do with a litte upgrade to encapsulate it in an object so that it doesn't get interfered with.

Here's our version of much the same code: slideshow.js

It's very simple to use so I've dropped the documentation into the top of the script.  Basic synopsis is:

oMySlides = new iSlideShow({

slides : [

'image-div-a',
'image-div-b',
'image-div-c',
'image-div-d'

]

});

@ Initialize loading.

Hi Shio,  great idea, thanks!

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

All the best,

Jim

Posted by J Morrison, 29th May '09
 

Initiliaze loading.

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

Posted by S R., 24th May '09
 

bind error

 

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

Posted by A Roberts, 15th May '09
 

@ J R - Javascript Error

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.

Posted by J Morrison, 15th May '09
 

Javascript Error

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?

Posted by J R, 30th Mar '09
 

Timerstart

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.

Posted by W Kink, 19th Mar '09
 

Pause & Play Buttons

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

Posted by J Morrison, 9th Mar '09
 

SOLVED: Problem with two intance

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

Posted by A Cavilliotti, 8th Mar '09
 

Problem with two intance

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

Posted by A Cavilliotti, 8th Mar '09
 

Expand counter

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 

 

Posted by S M, 20th Feb '09
 

Figured out IE problem

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

Posted by J D, 20th Jan '09
 

@Jon; IE support

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.

 

Posted by J Morrison, 20th Jan '09
 

IE 6, 7 support?

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

Posted by J D, 20th Jan '09
 

Pan & Zoom

Hi Ralf,

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

Posted by J Morrison, 6th Jan '09
 

Extending it with panning..

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.

Posted by R S, 6th Jan '09