• ImageFlip 0.1 (2007-12-20)

• use for as much images as you like
• place the images whereever you want - use your divs and css styles
• nice startup effect
• also a nice morphing effect when scrolling through the images, fades out first/last and fades in last/first
• preloading on start and dynamically while scrolling
• while preloading a layer is put over the overall size of your divs with preloading information
• tested with FF 2 and IE6, IE 7, Opera 9.02, Safari 3.0.4 and Netscape 7
  smoothness depends on image count and size and your pc configuration!

I created this little script in my freetime - it's open source, use it wherever you like and feel free to adjust.
Would be nice if you place a link to my blog zoe.vc (you can use this button) - but I don't require.
The script is still in development - there are some smaller known bugs and I'd like to make it more customizable - so stay tuned!
If you have any issues, feel free to mail to dev at zoe dot vc with a punchy email subject :-)

1. Download the lastest ImageFlip zip file and place the files into the same directory as you html is.
   (contains a optimized mootools js, you can also download a custom one from the mootools site)
2. Add the scripts to your page:
   
   <script type="text/javascript" src="mootools-req-1.11.js"></script>
<script type="text/javascript" src="imageflip-0.1.js"></script>
   
   
3. Add a javascript block or create a new js file and link. I've chosen a seperate file named loader.js:
   
   <script type="text/javascript" src="loader.js"></script>
   
   
4. Add the domready event:
   
   window.addEvent('domready', function() {

}
   
   
5. Create divs for the images and assign css classes. Also create elements for navigation.
   e.g.
   <a href="#" id="previous">previous</a> <a href="#" id="next">next</a>
<div id="morph0" class="d0"></div>
<div id="morph1" class="d1"></div>
<div id="morph2" class="d2"></div>
<div id="morph3" class="d3"></div>
<div id="morph4" class="d4"></div>

   
   
6. Initialize the ImageFlip class in your external js or your javascript code in html:
   
   var flipper = new ImageFlip(
 array_of_div_ids,
 array_of_div_stylesheet_classes,
 array_with_button_ids,
 array_with_image_paths,
 array_with_properties);
   
   
   1. Array of div ids where the images should be placed in, sorted.
      e.g. new Array('morph0', 'morph1', 'morph2', 'morph3', 'morph4')
      
      
   2. Array of stylesheet classes of the divs for the images, sorted, same array length as first array.
      e.g. new Array('d0', 'd1', 'd2', 'd3', 'd4')
      
      
   3. Array of ids of the elements that will be used as buttons. first for previous, second index for next button.
      e.g. new Array('next', 'previous')
      
      
   4. Array with pathes to the images used. At least as much images as displayed divs.
      e.g. new Array('img/pic0.jpg', 'img/pic1.jpg', 'img/pic2.jpg', 'img/pic3.jpg', 'img/pic4.jpg')
      
      
   5. Array with some properties.
      index: 'zIndex': number of the z-Index the divs with the images start.
      index: 'loadingText': text to be displayed while preloading at startup, the markers '#IMG#' for currently loaded image and '#SIZE#' for image count should be in.
      e.g.
      var properties = new Array();
properties['zIndex'] = 1;
properties['loadingText'] = 'Loading image #IMG# of #SIZE#...';
      
      

Go to the top of the page.
Clear your browsers cache and reload to see the preloading - used images are bigger than necessary to demonstrate.

If you like and use the script, feel free to donate some cent, thanks in advance!