a simple powerful javascript slideshow for Prototype.js & script.aculo.us

  • Green leaves in Singapore
  • Lakes and mountains in New Zealand
  • Sydney Harbour bridge - Australia
  • View from the Summit of Mt. Villarrica, Pucon, Chile

What is Protoshow.js?

Protoshow is a free, easy-to-use yet highly configurable slideshow/slider script compatible with the Prototype.js and script.aculo.us javascript libraries.

Download

Getting Started with ProtoShow

  1. Step 1 - Include dependant libaries

    To get ProtoShow working in your page you will first need to include both the Prototype and script.aculo.us javascript libraries in your document <head>:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>

  2. Step 2 - Include Protoshow.js

    You'll also need to add the ProtoShow script to the document <head>:

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

  3. Step 3 - Add your markup

    Protoshow can be configured to work with almost any markup. If you'd rather stick to the defaults however, some suggested markup is shown below:

    <div id="myshow"><!-- protoshow container -->
    	<ul class="show"><!-- slideshow itself -->
    		<li class="slide"><img src="slide01.jpg" /></li>
    		<li class="slide" style="display: none"><img src="slide02.jpg" /></li>
    		<li class="slide" style="display: none"><img src="slide03.jpg" /></li>
    		<li class="slide" style="display: none"><img src="slide04.jpg" /></li>
    	</ul>
    </div>

  4. Step 4 - Style your markup with CSS

    Protoshow avoids pressuming anything about your markup and therefore avoids add default styles for you in javascript whereever possible. To enable the slide transitions to function smoothly we suggest using the Protoshow default css file as a base.

  5. Step 5 - create a new instance of the Protoshow Class

    Lastly we call up the Protoshow script itself using Prototype's document.observe() method to observe the "load" event on the document (that way we know all images have loaded):

    document.observe('load', function() {
      // reference ID of our show container
      var show = new protoShow('myshow');   
});

    In this example, we pass only the ID of the slide show container (in this case a <div> element) and rely on Protoshow's defaults to do the rest.

    Alternatively Protoshow is also available as a method on all extended Prototype elements.

    document.observe('load', function() {
      var show = $('myshow').protoShow();   
});

Configuration Options

ProtoShow is supplied with a set of default options which can be overidden by the user.

Option Default Options Explaination
selector .slide Any valid CSS selector CSS selector for slide elements
interval 3000 integer Time interval between each slide transition
autoPlay true boolean Decides whether to start the show automatically
transitionType "fade" "fade","slide" Type of transition. Either a fading slideshow or a slider.
transitionTime 1.5 decimal Time taken to animate transition from one slide to the next.
manTransitionTime 0.5 decimal Time taken to animate transition from one slide to the next when the user has initiated the transition.
navigation true boolean Whether to generate/use navigation elements (eg: 1,2,3,4...etc) for each slide for quick navigation.
controls true boolean Whether to generate/use control elements for forward,backward and stop/start.
stopText "Pause" string String to be used on the play/pause control when show is playing.
playText "Play" string String to be used on the play/pause control when the show is paused.
nextText "Next" string String to be used on the forward control.
previousText "Previous" string String to be used on the backward control.
captions false boolean Whether to generate captions from the alt attribute of the img for each slide.
pauseOnHover false boolean Pause the show when mouse is hovered over the show element.
keyboardControls true boolean Bind arrow keys as keyboard controls for forward and backward.
fireEvents true boolean Whether to fire custom protoshow events for major "events" in the show cycle. See Event.fire.
progressTimer true boolean Generate a "whirling" progress timer element to mark progress until next transition occurs. Only available in browsers that support HTML5 canvas.