Joomlicious Mootools SlideShow

Overview and Demo

Yet another mootools slideshow. Lots of options. 3 types of transitions. Dynamic resizing. Unique scroll transition.

Transition Type

You can make more changes to the slideshow if you have Firebug. Open firebug and type the following in the console. 

ss.getDefaultSlide().options.textBg = "blue";
ss.getDefaultSlide().options.fontFamily = "Tahoma";
ss.getDefaultSlide().options.slideTransition = Fx.Transitions.Bounce.easeOut;
You can do this with all the options for slide (in documentation), and see the results up here.

Also check out the Yahoo! Search SlideShow Mashup

Documentation

SlideShow.js

Contains the SlideShow Class as well as the Slide Class

License

MIT-style license.

Summary
SlideShow.js
Contains the SlideShow Class as well as the Slide Class
SlideShow
Properties
getDefaultSlide
Get the default slide for the slideshow
getSlide
Get a specific Slide
start
Start the SlideShow
stop
Stop the SlideShow
addSlide
Add a slide to the SlideShow
skip
Skip to the next slide in the SlideShow
Functions
createFromMarkup
Returns the slideshow
Slide
Properties
setDefaultSlide
set the DefaultSlide for this slide
get
Get a requested option or property

SlideShow

Arguments

element required, DOM Element or Id to contain the SlideShow
options optional, Settings for the SlideShow see below - all the options for slide are available as well for the default slide.

Options

margin integer, the Margin between slides on scroll transitions (default 6)
height string, CSS property for height of the SlideShow (default 100%)
width string, CSS property for width of the SlideShow (default 100%)
repeat boolean, flag to repeat the slideshow or not (default true)
timeout integer, time in milliseconds to wait for a slide to load (default 1000)
debug boolean, flag to allow debug statements (browsers with console only) (default false)
random boolean, show slides randomly (default true)
clsPrefix string, prefix for configuration classes (only for createFromMarkup function - default ‘ss’)

Example

var ss = new Class('slideshow', {

	'color': '#ffffff',

	'height': '300px',

	'width': '300px'

});

ss.start();
Summary
Properties
getDefaultSlide
Get the default slide for the slideshow
getSlide
Get a specific Slide
start
Start the SlideShow
stop
Stop the SlideShow
addSlide
Add a slide to the SlideShow
skip
Skip to the next slide in the SlideShow
Functions
createFromMarkup
Returns the slideshow

Properties

getDefaultSlide

Get the default slide for the slideshow

getSlide

Get a specific Slide

Arguments

index integer, index of the Slide

start

Start the SlideShow

stop

Stop the SlideShow

addSlide

Add a slide to the SlideShow

Arguments

slide required, a Slide or the image source for the slide
text optional, Text for the slide
options optional, Options for the slide

skip

Skip to the next slide in the SlideShow

Functions

createFromMarkup

SlideShow.createFromMarkup = function( el,
options )

Returns the slideshow

Arguments

element DOM Element or id
options SlideShow options

Slide

Arguments

src required, string - source of the image for the slide
text optional, string - text to show on the slide
options optional, object - see options
defaultSlide optional, object - A slide with default options (usually automatically set by SlideShow)

Options

fontFamily string, CSS property for default slide font (default ‘Trebuchet MS, Tahoma, Verdana, sans’)
fontSize string, CSS property for default slide font-size (default 19px)
color string, CSS property for default slide font color (default #ffffff)
direction string, ‘t’,’r’,’b’,’l’,’?’ default slide scroll from position (default ‘?’)
sizeToContent boolean, size the SlideShow container to the size of the slide (default false)
resizeContainer boolean, if sizeToContent is true, resize containing element, otherwise resize internal holder (default false)
textDirection string, ‘tl’,’tc’,tr’,’bl’,’bc’,’br’,’?’  - default position for text (default ‘?’)
textPadding integer, padding for text (default 3)
slideDuration integer, time in milliseconds to stay on slides (default 2000)
transitionDuration integer, time in milliseconds for transitions to last (default 3000)
transitionType string, an array of transition types or string single type of transition.  Possible values ‘scroll’,’crossfade’,’burst’,’?’  (default ‘?’)
shadowOffset integer, if dropShadow, the top and left offset of the shadow (default 1)
textBg string/boolean, A CSS color value or boolean false to not show the background (default #000000)
textBgOpacity float, a value for opacity of textBg (default .4)
shadow boolean, flag to use dropShadow on text (default true)
slideTransition function, default transition for slides (default Fx.Transitions.Expo.easeOut)
textTransition function, default transition for text (default Fx.Transitions.Bounce.easeOut)
lazyLoad boolean, flag to load images as needed (default true)
Summary
Properties
setDefaultSlide
set the DefaultSlide for this slide
get
Get a requested option or property

Properties

setDefaultSlide

set the DefaultSlide for this slide

Arguments

slide the default Slide

get

Get a requested option or property

Arguments

variable The variable to get
Download

Download

I included a full mootools 1.1 package, though not everything is needed.

© 2007 Owl Watch Consulting Services, LLC.