Free jQuery plugin for light and highly customizable slideshows
home demo 1 demo 2 demo 3 documentation

Installation

Simple as each other jQuery plugin: in your head tag just include a reference to jQuery (version 1.3.2+) and to jquery.showcase.X.js

Your code to start the showcase must be included into dom-ready function:

That's all to start!

Option parameters

There are a lot of parameters to configure the showcase, but no one is obligatory (really, just one: 'images', but only if you want to use the new way to define the imagelist).

Parameters are defined by a single javascript object, wich is structured as:

• images: (array, default=[]) - defines the list of images to use in the showcase. Each item is a json object with the attributes:
  • url: (string) - the url of the image, of course.
  • description: (string) - the description that appears on the titleBar, if it's enabled.
  • link: (string, default="#") - a navigation url related to image.
  • target: (string, default="_self") - the target of the link.
• linksOn: (string, default="images") - defines what's the element that receive the click event, can be "images" or "titles".
• css: (object, default={position: "relative", overflow: "hidden", border: "none", width: "", height: ""}) - it's the css applied on container.
• animation: (object) - defines the properties of images transition.
  • autoCycle: (boolean, default=true) - determines if the transition between the images is automatic or not.
  • stopOnHover: (boolean, default=true) - determines if the transition must stopped on mousehover.
  • interval: (integer, default=4000) - determines the interval (in milliseconds) between an image and the following.
  • speed: (integer, default=500) - is the speed of the animation function.
  • easefunction: (string, default="swing") - the ease function of animation, by default it can be "swing" or "linear", but you can define and use you own animation function.
  • type: (string, default="horizontal-slider") - how the images change. It can be "horizontal-slider","vertical-slider" or "fade".
• navigator: (object) - defines the properties the navigation bar.
  • css: (object, default={border: "none", padding: "5px", margin: "0px", position: "absolute", "z-index": 1000}) - sets the aspect of the navigator container.
  • position: (string, default="top-right") - is the position (inside the showcase container) of the navigation element. It can be "top-left", "top-right" ,"bottom-left" or "bottom-right".
  • orientation: (string, default="horizontal") - is the orientation on the navigation elements, cen be "horizontal" or "vertical".
  • autoHide: (boolean, default=false) - determines if the navigator element must hide when the pointer isn't on the showcase.
  • showNumber: (boolean, default=false) - when is set to true shows the number of slides.
  • showMiniature: (boolean, default=false) - when is set to true shows the miniature of each image into the navigation buttons (the buttons must have proper size).
  • item: (object) - by this you can define the aspect of items in the navigation bar, defining the css classes or direcly the css properties. Note that if a class is defined it overrides the css object properties
    • css: (object, default=.. too long to describe, take a look at the code, please) - the css of a normal, unselected item.
    • cssClass: (string, default=null) - the css of a normal, unselected item.
    • cssHover: (object, default=.. too long to describe, take a look at the code, please) - the css of the item with hover state.
    • cssClassHover: (string, default=null) - the css of the item with hover state.
    • cssSelected: (object, default=.. too long to describe, take a look at the code, please) - the css of the current shown item.
    • cssClassSelected: (string, default=null) - the css of the current shown item.
    NOTE: To simplify the stylish of navigator items I've applied a mechanism of inheritance between the three states. If you define a set of css properties to "css" (normal state) these will be inherited automatically by the state "cssHover" and "cssSelected". So you've to redefine only the properties that change between the states.
• titleBar: (object) - in this section you can customize the aspect and the behaviour of the title bars.
  • enabled: (boolean, default=true) - simply, enable or disable the title bars.
  • autoHide: (boolean, default=true) - hide the title bar when the mouse is off the showcase container.
  • position: (string, default="bottom") - set the position of title bars, that can be "bottom" or "top".
  • cssClass: (string, default=null) - the css of title bars.
  • css: (object, default=.. too long to describe, take a look at the code, please) - the css of title bars.
    IMPORTANT: there are two properties that MUST be defined through css and not demanded to a cssClass. The "opacity" and the "height" of the titleBar. I'm sorry, but I've not found any other solution...

Methods

Once showcase is started (setted with animation->autocycle : true) you can pause and resume the slider simply calling the methods .pause() and .go() on the showcase container.