Carousel with Prototype

Following is code showing how to create a carousel.

Using behaviors we can apply the carousel to properly behaviour-css tagged elements

Alternatively we can load this directly with a javascript class.

The Carousel constructor is called with eight arguments:

• key: gives the carousel an identifier string to be referenced on observer callbacks
• itemContainerElement: This is the element containing the items. All items in this container that are to be included in the carousel should have a classname of item set.
• width: the width to scroll per item (this is the group width if you are using a group set)
• height: the height to scroll per item (this is the group height if you are using a group set)
• forwardElement: This is the element for a forward button
• backElement: This is the element for a back button
• observer: If supplied then callbacks will be fired on the observer (fireActiveCarouselLoaded, fireActiveCarouselItem, fireDeactiveCarouselItem)
• options: This allows for overriding the default options
  • setSize: specifies how many items are scrolled at a time
  • groupSize: (default==1) allows multiple items to be treated as one item
  • duration: time in seconds to complete scroll
  • direction: 'horizontal' or 'vertical'
  • itemParser: this function is called for each item in the itemContainerElement. This function should return an object that will be represented in the item.value. You can use this object at a later time on activation callbacks.
  • setItemEvents: this function is called for each item in the itemContainerElement. This allows you to bind events to each item. Typically you should bind carousel.activate(carouselItem) to some kind of event so that the event will trigger activation callbacks to the observer.

    ModelBehavior.fireActiveCarouselLoaded = function(carousel) {
        //Allows for load callbacks
    }
    ModelBehavior.fireActiveCarouselItem 
        = function(carousel, element, item) {
        //Allows for item activation callbacks
    }
    ModelBehavior.fireDeactiveCarouselItem 
        = function(carousel, element, item) {
        //Allows for item deactivation callbacks 
    }        
    
    ModelBehavior.SomeInitializationFunction = {
        ModelBehavior.SimpleCarousel = 
            new Carousel('SimpleCarousel1', 'SimpleCarouselItems', 
            200, 30, 
            'BtnCarousel_Forward', 'BtnCarousel_Back', 
            ModelBehavior, 
            {
            'setSize': 5,
            'groupSize': 1,
            'duration': .5,
            'direction': 'vertical',
            'itemParser': function(item) {
                //Given html element you can build a data object 
                //for the item if needed for later activation
                return {}; //some object representing the value
            },
            'setItemEvents': function(carousel, element, 
                carouselItem, observer) {
                
                //This allows you to set events to the item 
                //like rollovers/mouse events
                Event.observe(element, 'click', function(){                    
                    carousel.activate(carouselItem);
                });
            }
        });
        ModelBehavior.SimpleCarousel.load();
    }
            

Loading the Carousel library

My scripts requires the following standard javascript imports to be made before using the OS platform.

• prototype.js
• behaviour.js
• scriptaculous.js w/ effects.js
• os.js (the main file)
• os.config.js (sets your base path to your javascript libraries)

I then use behaviours and my javascript loading architecture to load the necessary code dependencies.

• behaviors/model.js (this code loads the dependencies and creates the carousels)
• carousel.js (this is the carousel class)

Example and Code

View a sample vertical carousel here

View a sample horizontal carousel here

View a sample grouped horizontal carousel here

Download the sample code here

Note: be sure to change the os.config file to point to your script library root