General options

cssClassSuffix:String	SliderWall uses a set of CSS rules to display information, rules that have specific names. If you would like to use two or more instances of SliderWall on the same HTML page, all instances would use the same CSS rules, thus having the same look and behavior. To avoid this, add a suffix at the end of those CSS rules that apply to a SliderWall instance (the same suffix for all the CSS rules of single SliderWall instance). To let SliderWall know that it should use another set of CSS rules, simply specify the suffix you've added by setting the cssClassSuffix property. Example: In order for you to have an image slideshow on your HTML page and header rotator, both using SliderWall, you would need a different design for these elements. In this case, it is recommended to use one set of CSS rules for the image slideshow (the first SliderWall instance) and a different set of CSS rules for the header rotator. You could leave the default CSS names for the image slideshow and add the suffix _hr (header rotator) for the CSS names used by the header rotator. So, instead of the default names (.sw_container, .sw_text_background, .sw_title, .sw_description and so on...) you would have (.sw_container_hr, .sw_text_background_hr, .sw_title_hr, .sw_description_hr and so on...).
domainKeys:String	A list of hash keys generated for the Internet domains where the slider will be hosted on. The list can contain one or more comma separated keys each one corresponding to an Internet domain (default null). Note: If such a domain key is not specified, the SliderWall will always display a watermark. Viewed on a local computer the watermark will always be displayed because the slider is not hosted on an Internet domain. If you would like to use SliderWall on subdomains of the main domain you specified, please contact us at
imageAlign:String	For image slideshows, SliderWall has the possibility to align the images within the slide. Possible values are topLeft, topCenter, topRight, middleLeft, middleCenter, middleRight, bottomLeft, bottomCenter and bottomRight (default middleCenter).
imageScaleMode:String	The scaling mode used only for images from an image slideshow (when the source content of a slide is a single image). Possible values are scale, scaleCrop, crop and stretch (default scale).
loopContent:Boolean	If set to true, the slider will display the slides in a loop - from the last slide it will allow navigating to the next slide, in fact the first slide; from the first slide it will allow navigating to the previous slide, in fact the last slide (default true). Note: If the slider is set to auto slideshow (autoSlideShow set to true) and the loopContent property is set to true, the slideshow will advance automatically from the last slide to the first one and restart the slideshow. If autoSlideShow is set to true but loopContent is false, the slideshow will play automatically from the first slide and stop at the last slide.
rssFeed:String	The URL of a RSS feed that displays HTML content. Once the RSS information is displayed, we recommend using CSS rules to style the contents of each slide (default null). Note: If the RSS feed is an image RSS feed, SliderWall will not display the slideshow correctly. For image slideshows please use our SlideshowBox component.
selectableContent:Boolean	If set to true, allows the content to be selected in the browser, like on any other html page, for copy/paste operations (default true).

Top

Text/captions

autoHideText:Boolean

If set to true, it allows the title and description to hide automatically after a period of inactivity specified by controlsHideDelay or when the mouse rolls out of the slider. The speed at which the text will show or hide is set by the controlsShowHideSpeed parameter (default true). Note: When the text is set to hide automatically and the mouse is outside the slider, the text will briefly appear when a new slide is displayed.

showText:Boolean

If set to true, the slider will display the title and description for each slide. If set to false, the title and description will not display regardless of whether there is a title and description set on the slide and the autoHideText option will be ignored (default true).

Top

Control bar

The control bar is an interface element containing image thumbnails, each thumbnail corresponding to a slide. For image slides (the type of slide is set o image) the slider will automatically display a thumbnail of that image, by resizing the image to fit into the thumbnail container. You can also specify an actual thumbnail image for the image slides when defining the slide content in your HTML file. If the slides contain HTML or other media content, you have to specify a separate image thumbnail for those slides otherwise the browser will display an empty thumbnail with the standard missing image icon.

The thumbnails have a normal, hover and selected state, allowing viewers to distinguish between the thumbnail of the currently displayed slide and the other slides. The thumbnails also have a selected-hover state which overwrites the normal-selected state. This way users can easily tell which is the currently selected thumbnail and which one has the normal-hover state. If there are too many slides and their thumbnails don't fit inside the control bar, SliderWall has the ability to display the thumbnails on multiple pages, using previous/next navigation buttons for the thumbnail pages.

To learn how to skin the control bar please consult the skinning document and examples.

autoHideControlBar:Boolean	If set to true, the control bar will hide automatically after a period of inactivity specified by controlsHideDelay or when the mouse rolls out of the slider. The speed at which the controls will show or hide is set by the controlsShowHideSpeed parameter (default true).
controlsHideDelay:Number	If autoHideControlBar is set to true, the controls will hide after a period of inactivity. That period of inactivity is set by this property and it is measured in seconds (default 5 seconds).
controlsShowHideSpeed:Number	The speed (in seconds) at which the controls will show or hide when the mouse rolls over or out of the slider. The controls hide only of autoHideControlBar is set to true (default 0.2 seconds).
playlistPosition:String	The position of the playlist control bar. The playlist can be displayed only vertically, according to the parameter's value. Possible values are left and right (default right).
showControlBar:Boolean	If set to true, the slider displays the control bar (default true).
showImageThumbnails:Boolean	If set to true, the playlist items will display image thumbnails besides the titles and descriptions. The thumbnails could be resized versions of the images used in image slides or you can specify your own thumbnails to be used instead (default true).
slideItemBackground:Boolean	If set to true, the playlist would display a background for the selected item which would slide from one item to the other, when a new item is selected (default true).
thumbnailPaging:String	Specifies how to display the paging information for the pages of playlist items. Possible values are bullets, numbering and none. The paging information can be displayed as a series of bullets, having a different state for the currently selected page, or as page number information in the form of current page/total pages. The third option allows not to display any paging information (default bullets).

Top

Slideshow

autoSlideShow:Boolean

If set to true, SliderWall will automatically navigate through the slides. Each slide is displayed for an amount of time specified by the slideshowSpeed property, then the slider will automatically advance to the next slide. If loopContent is set to true, after the last slide is displayed, SliderWall will restart the slideshow from the first slide, otherwise it will stop at the last slide(default true). Note: The timer will be displayed only if autoSlideShow is set to true, otherwise SliderWall will not advance automatically through the slides and the timer is no longer needed.

slideShowSpeed:Number

The amount of time a slide is displayed - from the end of the previous transition to the start of the next one (default 6 seconds).

Top

Transitions

For image slides, SliderWall can use several transition effects to display the content of each slide. The effects are Alpha, AlphaBars, BrightSquares, Disc, FlipBars, Iris, LensGlare, Slide, SquareFade, SquareLight, Stripes, Waves, WaveScale and Wavy. For slides that contain HTML content or SWF files, the only effects applicable are Alpha and Fade. Each effect is customizable. The properties can be set directly within the slider initialization code. The effects will be applied with their default settings if there are no parameters specified for them. For more information on each effect please consult the corresponding document.

Important note: Please note that most effects are processor intensive and, depending on the size of the slide and on the settings, is is possible they will not work correctly when viewed on mobile devices. The Alpha and Slide effects are optimized to be used on mobile devices such as the iPad. However, we recommend testing your SliderWall instance on iPad before publishing it, regardless of the effect used. For mobile devices we do not recommend creating slideshows and header rotators larger than 800x600 pixels.

transitionType:Object	This parameter sets the transitions used by SliderWall to display the slides. It must receive an object containing three parameters: {optimizeForIpad: false, random: false, transitions: []}
optimizeForIpad:Boolean	If set to true, SliderWall will only use the transitions that display well on iPad. The transition effects that will be used are Alpha and Slide (default false).
random:Boolean	If set to true, SliderWall will use randomly selected effects for the transitions between the slides. The effects are randomly selected from the entire list of effects. If there aren't any effects specified in the transitions list, the slider will apply the effects randomly, with their default values. To overwrite the default settings for any particular effect, specify that effect with its parameters within the transitions list (default false). If random is set to false, the slider will apply only the effects listed in the transitions list. Note: If optimizeForIpad is set to true, only the Alpha and Slide effects are taken into consideration and will be used.
transitions:Array	Contains a list of one or more transition effects and their settings. If no transition is specified and random is set to true, then SliderWall will use all of the transition effects to show and hide the slides. If no transition is specified and random is set to false, then SliderWall will not apply any effects to show or hide the slides. If at least one transition is specified and if random is set to false, SliderWall will use only that transition to show and hide the slides. If random is set to true and there is at least one transition specified in the transitions list, the slider will apply all the effects randomly (not only the ones specified in the transitions list), with their default settings except the effects that were listed in the transitions list will have their default settings overwritten. For information about the properties for each transition please consult the Transitions document.

Example: SliderWall will apply all its effects randomly with their default values, but three effects listed below will have their default settings overwritten.

transitionType:{
  optimizeForIpad: false,
  random:true,
  transitions:[
    {
      name: "Slide",
      direction: "vertical",
      duration: 0.8
    },
    {
      name: "Disc"
    },
    {
      name: "WaveScale",
      maxWidth: 80,
      tweenType: "Elastic",
      easing: "easeInOut",
      duration: 1
    }
  ]
}

Example: SliderWall will apply the iPad optimized effects randomly (Alpha and Slide), with their default settings. In this case the random option will be ignored.

transitionType:{
  optimizeForIpad: true
}

Example: Use the Slide effect with a custom tween on every slide.

transitionType:{
  optimizeForIpad: false,
  random:false,
  transitions:[
    {
      name: "Slide",
      direction: "horizontal",
      duration: 1,
      tweenType: "Elastic",
      easing: "easeInOut"
    }
} Top

Navigation controls

autoHideNavButtons:Boolean	If set to true, the previous/next slide navigation buttons will hide automatically after a period of inactivity specified by controlsHideDelay or when the mouse rolls out of the slider. The speed at which the controls will show or hide is set by the controlsShowHideSpeed parameter (default true).
showNavigationButtons:Boolean	If set to true, SliderWall will display the previous/next slide navigation buttons (default true).

Top

Interaction

Users can interact with the slider in multiple ways. They can use the mouse and the keyboard to navigate through the slides but in case of the touch devices, gestures can also be used for navigation and interaction.

The keyboard arrow keys can be used only for navigation: left/top arrow keys for navigating to the previous slide and right/bottom keys for navigating to the next slide. The mouse however can be used not only to navigate through the slides with the scroll wheel but also to interact with the UI elements of the slider (buttons, thumbnails, control bar) and with the elements of the slides (if the slides contain HTML content). By default, SliderWall has all these interaction posibilities enabled.

disableAutohideOnMouseOver:Boolean	If set to true, the controls (navigation buttons, control bar and captions) will not hide automatically while the mouse is over the slider, even if autoHideControlBar, autoHideText or autoHideNavButtons are set to true (default false). Note: If autoHideControlBar, autoHideText or autoHideNavButtons are set to false the controls will always be displayed so disableAutohideOnMouseOver is not used.
pauseOnMouseOver:Boolean	If set to true, SliderWall will stop the automatic slideshow while the mouse is over the slider. When using SliderWall on touch devices, if pauseOnMouseOver is set to true, the slider will stop the automatic slideshow when the user taps on the slider surface (default false). Note: This parameter is used only when the slideshow is running (autoSlideShow is set to true or when the slideshow has been started using the startSlideshow() function).
useGestures:Boolean	If set to true, SliderWall will allow using gestures to navigate through the slides and interacting with the control bar (default true).
useKeyboard:Boolean	If set to true, SliderWall will use the arrow keyboards for navigation: left/top arrow keys for navigating to the previous slide and right/bottom keys for navigating to the next slide (default true).
useMouseScroll:Boolean	If set to true, SliderWall will allow navigating through slides using the mouse wheel (default true).

Top

The timer element

The timer is a UI element in the form of a bar and it is used to let viewers know how long a slide will be shown until the transition to the next slide starts. By default the timer is displayed at the bottom of the slides but it can also be repositioned using the CSS styling rules for the timer.

The timer has a maximum width which by default it is the same as the width of the slide container. The timer increases its width until it reaches the maximum width depending on how long the slide has been displayed. By setting the slideShowSpeed property, you can change the amount of time a slide is left displayed until the transition to the next slide starts and the timer will resize faster or slower according to the slideShowSpeed value and depending on the width of the slide container.

The timer can be customized from its own CSS style - maximum width, size, color, position. To learn how to style the timer please consult the skinning documentation and examples.

Note: The timer will be displayed only if autoSlideShow is set to true, otherwise SliderWall will not advance automatically through the slides, so the timer is not needed.

showTimer:Boolean

If set to true, the timer control will be displayed (default true).

Top

Methods

getSelectedIndex():Integer	Returns the index of the currently selected slide. Please note that the slide index is 0-based which means that the index of the first slide is 0, the index of the second slide is 1 and so on.
getSlide(index:Integer):Object	Returns an object representing the contents of the slide with the specified index. Please note that the slide index is 0-based which means that the index of the first slide is 0, the index of the second slide is 1 and so on. If you specify the index of a slide that doesn't exist, the function will not return anything. The returned object has the exact structure of the slide - it contains the properties of the slide: type, title, description, content, thumbnail, thumbnail_title, thumbnail_description, target_url and target_window. Please remember that the content parameter may contain a URL (for an image or swf file) or full fledged HTML content. Example: The next function displays information about the first slide (mySlider is a reference to the SliderWall instance). var data = mySlider.getSlide(0); var info = "Title: "+data.title+"\n"+   "Description: "+data.description+"\n"+   "Type: "+data.type+"\n"+   "Target URL: "+data.target_url+"\n"+   "Target window: "+data.target_window+"\n"+   "Thumbnail: "+data.thumbnail+"\n"+   "Thumbnail title: "+data.thumbnail_title+"\n"+   "Thumbnail description: "+data.thumbnail_description+"\n"+   "Content: "+data.content; alert(info);
next()	Displays the next slide. By calling this method the current slide will start the hide transition and the next slide will continue with the show transition.
previous()	Displays the previous slide. By calling this method the current slide will start the hide transition and the previous slide will continue with the show transition.
showSlide(index:Integer)	Hides the current slide and displays the slide with the specified index. Please note that the slide index is 0-based which means that the index of the first slide is 0, the index of the second slide is 1 and so on. If you specify the index of slide that doesn't exist, the function call will have no effect.
startSlideshow()	Starts an automatic slideshow, which means that the slider will automatically advance through the slides, using the chosen effects to show and hide them. The automatic slideshow runs until stopSlideShow() is called. If the slider is already in auto slideshow mode, a call to startSlideShow() will have no effect. The timer control will be displayed when the slider is in auto slideshow mode and the showTimer parameter is set to true.
stopSlideshow()	Stops an automatic slideshow. If the slider was not in auto slideshow mode (autoSlideShow set to true or a previous call to startSlideshow), a call to stopSlideShow() will have no effect.

Top

Callback functions

The callback functions are used as event handlers. Some of the callback functions may receive as parameter the index of the slide that triggered the event.

contentHide(index)	This event is triggered whenever a slide starts the hide transition. The event sends the slide's index as parameter to the callback function. Example <script type="text/javascript">   var err;     $(document).ready(function() {       try {       $("#mySliderWallID").sliderWallBullets({         ...         contentHide: slideStartsHiding       });     } catch(err) { }   });   function slideStartsHiding(index) {     alert("Slide no. "+(index+1)+" starts to hide...");   } </script>
contentLoadComplete(index)	This event is triggered when all the slides have completely loaded. The event sends the slide's index as parameter to the callback function.
contentLoadError(index)	This event is triggered when there is a problem loading the content of the slides. The event sends the slide's index as parameter to the callback function.
contentLoadStart(index)	This event is triggered when the slides start to load their content. The event sends the slide's index as parameter to the callback function. Important note: The slider will start loading the content as soon as it is initialized, even if the other elements on the HTML page are not yet initialized. This means that the callback function will be called, in which case you need to make sure that within the callback function you are not referencing elements of the page that are not yet initialized and are undefined.
contentShow(index)	This event is triggered whenever the next slide has finished the show transition. The event sends the slide's index as parameter to the callback function. Example <script type="text/javascript">   var err;     $(document).ready(function() {       try {       $("#mySliderWallID").sliderWallBullets({         ...         contentShow: slideFinishedShowing       });     } catch(err) { }   });   function slideFinishedShowing(index) {     alert("Slide no. "+(index+1)+" is now displayed...");   } </script>
init	This event is triggered right after the slider has been initialized and the SliderWall instance can be accessed.
slideClick(index)	This event is triggered when the user clicks on a slide that has a url attached to it and the slider automatically opens the attached url. The event sends the slide's index as parameter to the callback function.
slideshowStart	This event is triggered when the slider starts the slideshow. This can happen automatically when the autoSlideShow parameter is set to true or when the startSlideShow() function is called.
slideshowStop	This event is triggered when the slider stops the slideshow. The slider stops the slideshow when the stopSlideShow() function is called.

Top