Oct 6 2011

Prototype Image Flip

I found a great Javascript image flip function over at Webmuch and
wanted to use it, problem was it was only implemented in JQuery. I was using Prototype and script.aculo.us, so I ported it
over. I ended up not using it, but for future reference I’ll preserve
it here. Enjoy.

//adapted from a jQuery flip function found here.
//http://webmuch.com/image-flip-using-jquery/
var tweenDuration = 0.5;
 
//get the image elements.
var image1 = $('theFirstImage');
var image2 = $('theSecondImage');
 
//set up the flip function
image1.observe( 'click', function(event){
       //set the heights so that the images do-not scale with the
widths (if not explicitly set)
       image1.height = image1.height;
       image2.height = image2.height;
 
       var halfWidth = image1.width/2;
 
       image2.setStyle({marginLeft: halfWidth});
       image2.width = 0;
 
       new Effect.Tween(image1, 250, 0, {duration: tweenDuration}, 'width');
       new Effect.Tween(image1, 0, halfWidth, {duration:
tweenDuration}, function(p){image1.setStyle({marginLeft: p})});
       window.setTimeout(
               function(){
                   new Effect.Tween(image2, 0, 250, {duration:
tweenDuration}, 'width');
                   new Effect.Tween(image2, halfWidth, 0, {duration:
tweenDuration}, function(p){image2.setStyle({marginLeft: p})});
               }
               , tweenDuration*1000);
   }
);
image2.observe( 'click', function(event){
       image2.height = image2.height;
       image1.height = image1.height;
 
       var halfWidth = image2.width/2;
 
       image1.setStyle({marginLeft: halfWidth});
       image1.width = 0;
 
       new Effect.Tween(image2, 250, 0, {duration: tweenDuration}, 'width');
       new Effect.Tween(image2, 0, halfWidth, {duration:
tweenDuration}, function(p){image2.setStyle({marginLeft: p})});
       window.setTimeout(
               function(){
                   new Effect.Tween(image1, 0, 250, {duration:
tweenDuration}, 'width');
                   new Effect.Tween(image1, halfWidth, 0, {duration:
tweenDuration}, function(p){image1.setStyle({marginLeft: p})});
               }
               , tweenDuration*1000);
   }
);

By Rusty Weneck • Computer Science • 0 • Tags: , , , ,