jShowOff jQuery Content Rotator

Home Slideshow & ScrollerjShowOff jQuery Content Rotator

jShowOff jQuery Content Rotator

14 years ago Views

14851

2593

ekallevig

jShowOff is a jQuery plugin for creating a rotating content module. It works by creating 'slides' from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site.

How to Use

The required markup for jShowOff is a parent element with one or more child elements, which are used as the 'slides'. The following is a basic example:

<div id="features">
 <div><p>This is a slide!</p></div>
 <div><a href="http://google.com"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /></a></div>
</div>
<script type="text/javascript">  
 $(document).ready(function(){ $('#features').jshowoff(); });
</script>

Options

jShowOff has several options for customization. Pass these settings as an object to the .jshowoff() method like this:

$('#features').jshowoff({ speed:1500, links: false }); });

Property	Type	Default	Description
animatePause	boolean	true	Whether to use 'Pause' animation text when pausing.
autoPlay	boolean	true	Whether to start playing immediately.
changeSpeed	integer	600	Speed of transition in milliseconds.
controls	boolean	true	Whether to create & display controls (Play/Pause, Previous, Next).
controlText	object	{ play:'Play', pause:'Pause', previous:'Previous', next:'Next' }	Text to use for controls (Play/Pause, Previous, Next). For multi-language support, etc.
cssClass	string	true	Add an additional custom class to the .jshowoff wrapper.
effect	string	'fade'	Type of transition effect: 'fade', 'slideLeft' or 'none'.
hoverPause	boolean	true	Whether to pause on hover.
links	boolean	true	Whether to create & display numeric links to each slide.
speed	integer	3000	Time each slide is shown in milliseconds.

Additionally, the value of the title attribute on the 'slide' elements will be inserted as the text for the corresponding 'slide link' in lieu of the default numeric value.

Tag: image slideshow