{"id":1091,"date":"2011-09-14T22:46:00","date_gmt":"2011-09-14T20:46:00","guid":{"rendered":"http:\/\/sickel.net\/blogg\/?p=1091"},"modified":"2012-07-05T21:28:15","modified_gmt":"2012-07-05T19:28:15","slug":"slide-between-now-and-then-with-prototype-js","status":"publish","type":"post","link":"http:\/\/sickel.net\/blogg\/?p=1091","title":{"rendered":"Slide between now and then &#8211; with prototype.js"},"content":{"rendered":"<p>At <a href=\"http:\/\/www.queness.com\/post\/6480\/create-an-attractive-before-and-after-photo-effect-with-jquery\">queness<\/a> there is described how to make system for &#8220;sliding between&#8221; 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.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"320px\" src=\"http:\/\/sickel.net\/misc\/slidetest_ptyp.html\"><br \/>\n<\/iframe><\/p>\n<pre>\r\n\/*\r\n * Effect for sliding between two different images e.g. for showing a before and after situation.\r\n * \r\n * Initially made for jquery - http:\/\/www.queness.com\/post\/6480\/create-an-attractive-before-and-after-photo-effect-with-jquery\r\n * \r\n * Ported to use prototype.js by Morten Sickel Sep 2011\r\n * \r\n *\/\r\nwindow.onload=function() {\r\n    \/\/ Some options for customization\r\n    var leftgap = 10;       \/* gap on the left *\/\r\n    var rightgap = 10;      \/* gap on the right *\/\r\n    var defaultgap = 50;    \/* the intro gap *\/\r\n    var caption = true;     \/* toggle caption *\/\r\n    var reveal = 0.5;       \/* define 0 - 1 far does it goes to reveal the second caption *\/\r\n    var img_cap_one;\r\n    var img_cap_two;\r\n    \/\/ find each of the .beforeafter\r\n    $$('.beforeafter').each(function (i) {\r\n        \/\/ peels out the filenames of the images - must be in same dir as the html \r\n        var img_mask = i.down('img').src;\r\n\timg_mask=img_mask.substring(img_mask.lastIndexOf('\/')+1);\r\n\tvar img_bg = i.down('img',1).src;\r\n\timg_bg=img_bg.substring(img_bg.lastIndexOf('\/')+1);\r\n\t\/\/ get the captions \r\n        img_cap_one = i.down('img').alt;\r\n        img_cap_two= i.down('img',1).alt\r\n        \/\/ get the dimension of the first image, assuming second image has the same dimension\r\n        var width = i.down('img').width;\r\n        var height = i.down('img').height;\r\n        \/\/ hide the images, not removing it because we will need it later\r\n        i.select('img').each(function(el){\r\n\t    el.hide();\r\n\t});\r\n        \/\/ set some css attribute to current item for graceful degradation if javascript support is off\r\n        \/\/ i.css({'overflow': 'hidden', 'position': 'relative'});\r\n        \/\/ append additional html element\r\n        i.insert('&lt;div class=\"ba-mask\">&lt;\/div>'); \/\/ this is where the upper image will go\r\n        i.insert('&lt;div class=\"ba-bg\">&lt;\/div>');   \/\/ this is where the lower image will go\r\n        i.insert('&lt;div class=\"ba-caption\">' + img_cap_one + '&lt;\/div>');  \/\/ caption                    \r\n        \/\/ set dimentions and the images as background for ba-mask and ba-bg\r\n        \/\/ TODO: move to creation of divs?\r\n        size={width: width,height: height};\r\n\tsize.backgroundImage='url(\"' + img_mask + '\")';\r\n\ti.down('.ba-mask').setStyle(size);\r\n\tsize.backgroundImage='url(\"' + img_bg + '\")';\r\n\ti.down('.ba-bg').setStyle(size);\r\n        \/\/ animate to reveal the background image\r\n        \/\/    Original:    i.children('.ba-mask').animate({'width':width - defaultgap}, 1000);    \r\n\t\/\/ TODO: animate - script.tacolo.us ?\r\n\t\/\/ instead just reveal a little bit of the background image \r\n        i.down('.ba-mask').setStyle({width:width - defaultgap});\r\n        \/\/ if caption is true, then display it, otherwise, hide it\r\n        \/\/ TODO - this looks strange... :\r\n\tif (caption) i.children('.caption').show();\r\n        else i.children('.ba-caption').hide();\r\n            \r\n\t\/\/ Handling mousemove event\r\n        \/\/ Todo - only move the \"bar\" if the mouse is pressed - think I would prefer that \r\n        \/\/ TODO - that must be user settable\r\n        Event.observe(i,'mousemove',function (e) {\r\n\t  \/\/ get the position of the image\r\n\t  pos_img = i.offsetLeft;\r\n\t  \/\/ get the position of the mouse pointer\r\n\t  pos_mouse = e.pageX;       \r\n\t  \/\/ calculate the difference between the image and cursor\r\n\t  \/\/ the difference is the width of the mask image\r\n\t  new_width = pos_mouse - pos_img;\r\n\t  img_width=i.down('img').width;\r\n        \/\/  $('mouse').innerHTML=new_width; \/\/ used for debugging 'mouse' must exist in the html\r\n        \/\/ get the captions for first and second images\r\n        \/\/ TODO - these are set further up, is this better?\r\n\t\/\/img_cap_one = i.down('img').alt;\r\n        \/\/img_cap_two = i.down('img',2).alt;\r\n        \/\/ make sure it reveal the image and leaves some gaps on left and right\r\n\t\/\/ it depends on the value of leftgap and rightgap\r\n\t  if (new_width > leftgap && new_width &lt; (img_width - rightgap)) {         \r\n\t    i.down('.ba-mask').setStyle({width:new_width});\r\n\t  }   \r\n\t\/\/ toggle between captions.\r\n        \/\/ it uses the reveal variable to calculate\r\n        \/\/ eg, display caption two once the image is 50% (0.5) revealed.\r\n\t  if (new_width &lt; (img_width * reveal)) {         \r\n\t      i.down('.ba-caption').innerHTML=img_cap_two;\r\n\t  } else {\r\n\t      i.down('.ba-caption').innerHTML=img_cap_one;           \r\n\t  }                                    \r\n\t}); \/\/ end of mousemove event handler\r\n      }); \r\n    }; \r\n<\/pre>\n<p>The css and html is the same as on queness, except that prototype must be loaded rather than jquery.<br \/>\nAll honour to queness for the idea and initial programming. There are still a couple of todos here, but the general functionallity works with prototype.<\/p>\n<p>Updates with html and css to follow&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At queness there is described how to make system for &#8220;sliding between&#8221; 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 &hellip; <a href=\"http:\/\/sickel.net\/blogg\/?p=1091\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,31],"tags":[],"class_list":["post-1091","post","type-post","status-publish","format-standard","hentry","category-div","category-javascript"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pnVtD-hB","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/sickel.net\/blogg\/index.php?rest_route=\/wp\/v2\/posts\/1091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/sickel.net\/blogg\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sickel.net\/blogg\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sickel.net\/blogg\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/sickel.net\/blogg\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1091"}],"version-history":[{"count":12,"href":"http:\/\/sickel.net\/blogg\/index.php?rest_route=\/wp\/v2\/posts\/1091\/revisions"}],"predecessor-version":[{"id":1300,"href":"http:\/\/sickel.net\/blogg\/index.php?rest_route=\/wp\/v2\/posts\/1091\/revisions\/1300"}],"wp:attachment":[{"href":"http:\/\/sickel.net\/blogg\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sickel.net\/blogg\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1091"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sickel.net\/blogg\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}