Prototype image flip
Posted by Rusty Weneck in Uncategorized, tags: Computer Science, HTML, JavascriptI 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);
}
);
Entries (RSS)