The mooSlideBox v3 is a small and slim ajax based extension or replacement of the common “lightbox” that can be found on nearly every page. This lightbox clone works in IE 6/7, Opera and Firefox.
To show the slider with an image, a heading and a sample text, you can call it this way:
<a href="images/0.jpg" rel="designSlide" rev="mycontent" title="Design Slide Sample::There's some nice tool out there, and it just does what it should - it slides in an image with description and adds extra content from a specified div">Slide</a>
To make the link a slideBox link, you need to add the tag rel=”designSlide” to it. The slide can contain a heading
and some text. Define it in your title tag of the link, separate the heading from the main text with a “::”
If you wish to have more content, or html tags like links in the displayed content area, you can specify another tag
in your slideBox. SlideBox uses the “rev=” tag. Give your rev tag the name of the div that contains additional content.
In this sample it’s called rev=”mycontent”. This is the additional content
<div id="mycontent"><a href="http://www.artviper.net">visit us at www.artviper.net</a></div>
The div containing the additional content is automatically hidden when the page is loading.
Update January 2008:
CAUTION: You need to add the mootools.js BEFORE the mooslideX.js, otherwise it won’t work!
As many users complain that the slider isn’t unobstrusive through its use of the bump effect, well, there’s a
simple solution. Just change the effect in the mooslide.js. Replace the Fx.Transitions.Bounce.easeOut with
something like Fx.Transitions.linear.