At queness there is described how to make system for “sliding between” two different photos, e.g. to show before and after pictures using jquery. It all works well, but as I am using prototype.js, and I prefer to only use one library, I have rewritten the javascript to use prototype.
/*
* Effect for sliding between two different images e.g. for showing a before and after situation.
*
* Initially made for jquery - http://www.queness.com/post/6480/create-an-attractive-before-and-after-photo-effect-with-jquery
*
* Ported to use prototype.js by Morten Sickel Sep 2011
*
*/
window.onload=function() {
// Some options for customization
var leftgap = 10; /* gap on the left */
var rightgap = 10; /* gap on the right */
var defaultgap = 50; /* the intro gap */
var caption = true; /* toggle caption */
var reveal = 0.5; /* define 0 - 1 far does it goes to reveal the second caption */
var img_cap_one;
var img_cap_two;
// find each of the .beforeafter
$$('.beforeafter').each(function (i) {
// peels out the filenames of the images - must be in same dir as the html
var img_mask = i.down('img').src;
img_mask=img_mask.substring(img_mask.lastIndexOf('/')+1);
var img_bg = i.down('img',1).src;
img_bg=img_bg.substring(img_bg.lastIndexOf('/')+1);
// get the captions
img_cap_one = i.down('img').alt;
img_cap_two= i.down('img',1).alt
// get the dimension of the first image, assuming second image has the same dimension
var width = i.down('img').width;
var height = i.down('img').height;
// hide the images, not removing it because we will need it later
i.select('img').each(function(el){
el.hide();
});
// set some css attribute to current item for graceful degradation if javascript support is off
// i.css({'overflow': 'hidden', 'position': 'relative'});
// append additional html element
i.insert('<div class="ba-mask"></div>'); // this is where the upper image will go
i.insert('<div class="ba-bg"></div>'); // this is where the lower image will go
i.insert('<div class="ba-caption">' + img_cap_one + '</div>'); // caption
// set dimentions and the images as background for ba-mask and ba-bg
// TODO: move to creation of divs?
size={width: width,height: height};
size.backgroundImage='url("' + img_mask + '")';
i.down('.ba-mask').setStyle(size);
size.backgroundImage='url("' + img_bg + '")';
i.down('.ba-bg').setStyle(size);
// animate to reveal the background image
// Original: i.children('.ba-mask').animate({'width':width - defaultgap}, 1000);
// TODO: animate - script.tacolo.us ?
// instead just reveal a little bit of the background image
i.down('.ba-mask').setStyle({width:width - defaultgap});
// if caption is true, then display it, otherwise, hide it
// TODO - this looks strange... :
if (caption) i.children('.caption').show();
else i.children('.ba-caption').hide();
// Handling mousemove event
// Todo - only move the "bar" if the mouse is pressed - think I would prefer that
// TODO - that must be user settable
Event.observe(i,'mousemove',function (e) {
// get the position of the image
pos_img = i.offsetLeft;
// get the position of the mouse pointer
pos_mouse = e.pageX;
// calculate the difference between the image and cursor
// the difference is the width of the mask image
new_width = pos_mouse - pos_img;
img_width=i.down('img').width;
// $('mouse').innerHTML=new_width; // used for debugging 'mouse' must exist in the html
// get the captions for first and second images
// TODO - these are set further up, is this better?
//img_cap_one = i.down('img').alt;
//img_cap_two = i.down('img',2).alt;
// make sure it reveal the image and leaves some gaps on left and right
// it depends on the value of leftgap and rightgap
if (new_width > leftgap && new_width < (img_width - rightgap)) {
i.down('.ba-mask').setStyle({width:new_width});
}
// toggle between captions.
// it uses the reveal variable to calculate
// eg, display caption two once the image is 50% (0.5) revealed.
if (new_width < (img_width * reveal)) {
i.down('.ba-caption').innerHTML=img_cap_two;
} else {
i.down('.ba-caption').innerHTML=img_cap_one;
}
}); // end of mousemove event handler
});
};
The css and html is the same as on queness, except that prototype must be loaded rather than jquery.
All honour to queness for the idea and initial programming. There are still a couple of todos here, but the general functionallity works with prototype.
Updates with html and css to follow…