MOOTOOLS: Mooflow, Cool Image Gallery

User Rating:  / 1

Who doesn't need an Image Gallery within a site??. We have reviewed some already, but as Mootools is growing really fast, somwhow thanks to Joomla, I would like to share this one which allows not just navigating the images by clicking on them or on left/right buttons but it also comes with


  • Use of slider.
  • Enables autoplay with a predefined interval.
  • Resize of the Images.
  • Add caption to the images.
  • Ability to use left/right keys to roll over the images.
  • Use also the mouse wheel to move along the pics!!.

How to use it. Very easy. Just wrap all your images within a

and create an MooFlow object passing the id of the div as the main argument. For Example lets create a div with id="MyGallery":

<div id="MyGallery">
<div><img src="/img1.jpg" title="Title" alt="My Pic 1" /></div>
<p><img src="/img2.jpg" title="Title" alt="My Pic 2" /></p>
<span><img src="/img3.jpg" title="Title" alt="My Pic 3" /></span>
<a href="/big/image.jpg" rel="image">
<img src="/image.jpg" title="Title" alt="My Pic 4" />

and just instancing an object from class MooFlow is enough: new MooFlow($('MyGallery'), parameters)

The parameters are as follow:

  • reflection: number reflection height; default(0.4)
  • heightRatio: number container height (container width * number); default(0.6)
  • offsetY: number vertival image offset; default(0)
  • startIndex: number the number of the image to show first; default(0)
  • interval: number time in ms to show a image in the presentation loop; default(3000)
  • factor: number zoom factor; default(115)
  • bgColor: string image background color (#000 or transparent); default('#000')
  • useCaption: boolean adds a caption(<div>) to the MooFlow-container and shows the title-attribute from current image. default(false)
  • useResize: boolean adds a resize button(<a>) to the MooFlow-container and allow to set MooFlow in a fullscreen like look. default(false)
  • useSlider: boolean adds the slider with buttons (left, right) to the MooFlow-container. default(false)
  • useWindowResize: boolean updates the MooFlow-container when changed the dimension of the browser window. default(false)
  • useMouseWheel: boolean enables the Mousewheel to navigate. default(true)
  • useKeyInput: boolean enables the keybord buttons left and right cursor (only one MooFlow instance). default(false)
  • useViewer: boolean enables the inline-viewer. default(false)

Just check it, ..and add it to your site!!. Yeah, somehow it remains you to a Mac menu, ...although thinking about Mac, this one is more "applelish" which looks just as Appleā€™s time machine :)

Music You like..

IT News to be aware of ..

Check also...