simple. slideshow.js

Makes a very, very simple slideshow gallery with a collection of dom elements and previous and next buttons.

Author

Aaron Newton

Dependencies

mootoolsMoo.js, Utility.js, Common.js, Function.js, Array.js, String.js, Element.js, Fx.Base.js, Dom.js, Cookie.js
Summary
simple. slideshow.jsMakes a very, very simple slideshow gallery with a collection of dom elements and previous and next buttons.
SimpleSlideShowMakes a very, very simple slideshow gallery with a collection of dom elements and previous and next buttons.
Properties
cycleForwardShows the next slide.
cycleBackShows the prev slide.
showSlideShows a specific slide.
SimpleImageSlideShowExtends SimpleSlideShow to make a slideshow of images.
Properties
addImgAdds a new image to the group
Change Log$Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/layout.widgets/simple.slideshow.js,v $ $Log: simple.slideshow.js,v $ Revision 1.9 2007/05/29 22:01:53 newtona Split element.cnet.js into seperate files; updated docs in files to note this Changed element.visible to element.isVisible (left old namespace for legacy support) Fixed Element.empty in prototype.compatibility.js Removed as many dependencies in common code to element.*.js as possible (espeically element.shortcuts.js)

SimpleSlideShow

Makes a very, very simple slideshow gallery with a collection of dom elements and previous and next buttons.

Arguments

optionsan object with key/value settings.

Options

startIndex(integer) the first image to show
slides(array) a collection of elements already in the dom.
currentSlideClass(string; optional) class to assign the currently visible slide; defaults to “currentSlide”
currentIndexContainer(dom element or id) container to display the the currently shown slide index (i.e.  “showing 2 of 3”); optional
maxContainer(dom element or id) container to display the maximum number of slides available; optional
nextImg(dom element or id) image to capture clicks to show the next image; optional, but if not supplied you’ll have to execute cycleForward yourself.
prevImg(dom element or id) image to capture clicks to show the next image; optional, but if not supplied you’ll have to execute cycleBack yourself.
wrap(boolean) when the user clicks next at the end of a set, go back to the start (and if they click prev at the begining, go to the end); defaults to true
disabledLinkClass(string) class to add to next/prev links when there are no next or prev slides; defaults to “disabled”
onNext(function) callback for when the user clicks next; optional
onPrev(function) callback for when the user clicks prev; optional
onSlideClick(function) callback for when the user clicks a slide, this function will be passed the slide clicked and the index of the slide. optional
crossFadeOptions(object) options object to be passed to the opacity effects.

Example

new SimpleSlideShow({
startIndex: 0,
slides: $$('.slide'),
currentIndexContainer: 'slideNow', //an element or it's id
maxContainer: 'slideMax',
nextLink: 'nextImg',
prevLink: 'prevImg'
});
Summary
Properties
cycleForwardShows the next slide.
cycleBackShows the prev slide.
showSlideShows a specific slide.

Properties

cycleForward

Shows the next slide.

cycleBack

Shows the prev slide.

showSlide

Shows a specific slide.

Arguments

iToShow(integer) index of the slide to show.

SimpleImageSlideShow

Extends SimpleSlideShow to make a slideshow of images.

Arguments

optionsa key/value options object; inherits options from SimpleSlideShow.

Options

imgUrls(array; optional) an array of image urls to add to the dom and to the slideshow
imgClass(string; optional) a class to add to the images that get created on the fly
container(element; optional) if you are adding images to the dom either using addImg or the imgUrls array above, then “container” is required to know where to put them.
Summary
Properties
addImgAdds a new image to the group

Properties

addImg

Adds a new image to the group

Change Log

$Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/layout.widgets/simple.slideshow.js,v $ $Log: simple.slideshow.js,v $ Revision 1.9 2007/05/29 22:01:53 newtona Split element.cnet.js into seperate files; updated docs in files to note this Changed element.visible to element.isVisible (left old namespace for legacy support) Fixed Element.empty in prototype.compatibility.js Removed as many dependencies in common code to element.*.js as possible (espeically element.shortcuts.js)

Revision 1.8 2007/04/03 00:12:41 newtona fixed a binding issue with slideshow

Revision 1.7 2007/03/29 22:37:54 newtona simple slide show now only cross-fades in ie6 if the element has a bgcolor (see Element.fxOpacityOk)

Revision 1.6 2007/03/20 21:30:21 newtona slideshow now checks to see if there are any slides before it attempts to show one.

Revision 1.5 2007/03/19 22:26:38 newtona start slide is now shown on initialization

Revision 1.4 2007/03/08 23:29:59 newtona strict javascript warnings cleaned up

Revision 1.3 2007/02/21 00:29:17 newtona switched Class.create to Class.empty

Revision 1.2 2007/02/12 17:46:31 newtona tweaking things, no significant functional changes

Revision 1.1 2007/02/09 20:23:19 newtona moving simple.img.gallery.js to simple.slideshow.js rewrote gallery to do dom elements or images

Makes a very, very simple slideshow gallery with a collection of dom elements and previous and next buttons.
My Object Oriented javascript.
Contains Utility functions
Contains common implementations for custom classes.
Contains Function prototypes and utility functions .
function $A(array,
start,
length)
returns a copy of the array.
Same as Array.copy, but as function.
function $each(iterable,
fn,
bind)
Use to iterate through iterables that are not regular arrays, such as builtin getElementsByTagName calls, arguments of a function, or an object.
Contains Array prototypes, $A, $each
Contains String prototypes and Number prototypes.
function $(el)
returns the element passed in with all the Element prototypes applied.
Contains useful Element prototypes, to be used with the dollar function $.
Base class for the Mootools Effects (Moo.Fx) library.
Contains Fx.Base and two Transitions.
Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Css Query related function and Element extensions
A cookie reader/creator
Shows the next slide.
Shows the prev slide.
Adds a new image to the group