mooSlideBox 3
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.
It is based on the mootools framework version 1.11.
How it works
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:
<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.
Add this to your preferred social network.
Sample
slideBox with additional content slideBox without additional content
Download it here
Get your own copy of mooSlide.js - grab it here
Another demo to try
Get here and click the images on the left: Demo
Other nice ajax tools
mooDBTooltip - populate tooltips from your database
mooFlickr - your flickr stuff in an ajax box
mooSocialize - social network widget