Situation

To change MooFlow behaviour to single click to open and double click to slide the carousel. Default behaviour is double click to open, single click to slide. Normal web users are more inclined to single click. A production demo of this technique can be found at http://www.critical-moments.com/solutions.html.

Brief

MooFlow is a carousel mooTools javascript application similar to the iTunes carousel. The aim of this tutorial is to change the double click behaviour on the selected mooFlow image to single click. Further more you could use this technique to add content to an image in the mooFlow

Step by step

  1. Install mooFlow with some dummy content
  2. Enable captions and use CSS styles to position the class=”caption” over your central image in the carousel, position: absolute and a z-index of 98
  3. CSS styles for .mf div.caption a need to be as follows, the background 1×1 gif is for IE6/7
    display:block;
font-size:0;
background:transparent url(/images/carousel/placeholder.gif) no-repeat scroll 0 0;
height:234px;
line-height:0;
margin:0 auto 0 0;
position:absolute;
text-indent:-999px;
width:234px;
  4. Notes: You will have to play around with the CSS above to get the caption sitting correctly over your images.

What is MooFlow?

MooFlow is a javascript based carousel similar to the one you find in iTunes with the album covers.