MOOTOOLS: Mooflow, Cool Image Gallery

  • Published on Monday, 06 August 2012 00:30
  • Hits: 3996
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 ..

Most Visited...

Famous, the most beautiful javascript Li…


Famous, the most beautiful javascript Library

Yes, now there a couple of ways of becoming famous, ..the first one is following your dreams and becoming the best in class developer with a great idea, or use...

Read more

QR Codes: The best 9 QR Code Generators


QR Codes: The best 9 QR Code Generators

Last week we talked a little bit about how the QR Codes are becoming very, very popular and a bit of its history which is always good to know :)...

Read more

AngularJS, No more Dom Manipulation


AngularJS, No more Dom Manipulation

You love to access the DOM, to change the information in it. You just love it!!!, ..but that is because you are using JQuery. It is like using assembly language,...

Read more