// Queness Before & After jQuery Plugin // Created by Kevin Liew from Queness.com // Permission is given to use this plugin in whatever way you want :) // Updated by P. Sherratt (function($){ $.fn.extend({ //plugin name - qbeforeafter qbeforeafter: function(options) { var defaults = { defaultgap: 50, leftgap: 10, rightgap: 10, caption: false, reveal: 0.5 }; var options = $.extend(defaults, options); return this.each(function() { var o = options; var i = $(this); var img_mask = i.children('img:eq(0)').attr('src'); var img_bg = i.children('img:eq(1)').attr('src'); var img_cap_one = i.children('img:eq(0)').attr('alt'); var width = i.width(); var height = i.children('img:eq(0)').height(); // Set the widths again after images loaded to make sure they are set to the right sizes. i.children('img:eq(0)').load(function() { height = i.children('img:eq(0)').height(); i.css({"width":width,"height":height,"min-height":height}); i.children('.beforeafter-mask, .beforeafter-bg').css({"width":width,"height":height,"min-height":height}); i.children('.beforeafter-caption').css({"position":"absolute", "bottom":"10px", "left":"10px", "z-index":"2", "background":"#000", "filter":"alpha(opacity=80)","-moz-opacity":"0.8","-khtml-opacity": "0.8","opacity": "0.8", "color":"#fff", "text-align":"center","-webkit-border-radius":"5px", "-moz-border-radius":"5px", "border-radius":"5px", "padding":"5px", "font-size":"12px", "font-family":"arial", "display":"none"}); // animate the slider briefly i.children('.beforeafter-mask').animate({'width':width - o.defaultgap}, 1000); if (o.caption) i.children('.beforeafter-caption').show(); }); i.height(height); i.children('img').hide(); i.css({'overflow': 'hidden', 'position': 'relative'}); i.append('
'); i.append('
'); i.append('
' + img_cap_one + '
'); i.children('.beforeafter-mask, .beforeafter-bg').width(width); i.children('.beforeafter-mask, .beforeafter-bg').height(height); i.children('.beforeafter-mask').css({"position":"absolute", "top":"0", "left":"0", "z-index":"1", "border-right":"1px solid #333", "overflow":"hidden"}); // Shadow styles removed: , "box-shadow": "3px 5px 5px rgba(0, 0, 0, 0.6)","box-shadow": "5px 5px 10px rgba(0, 0, 0, 0.6)", "-webkit-box-shadow": "5px 5px 7px rgba(0, 0, 0, 0.6)", "-moz-box-shadow": "5px 0 7px rgba(0, 0, 0, 0.6)" i.children('.beforeafter-bg').css({"position":"absolute", "top":"0", "left":"0", "z-index":"0"}); i.children('.beforeafter-caption').css({"position":"absolute", "bottom":"10px", "left":"10px", "z-index":"2", "background":"#000", "filter":"alpha(opacity=80)","-moz-opacity":"0.8","-khtml-opacity": "0.8","opacity": "0.8", "color":"#fff", "text-align":"center","-webkit-border-radius":"5px", "-moz-border-radius":"5px", "border-radius":"5px", "padding":"5px", "font-size":"12px", "font-family":"arial", "display":"none"}); i.children('.beforeafter-mask').animate({'width':width - o.defaultgap}, 1000); i.children('.beforeafter-mask').css('backgroundImage','url(' + img_mask + ')'); i.children('.beforeafter-bg').css('backgroundImage','url(' + img_bg + ')'); if (o.caption) i.children('.beforeafter-caption').show(); }).mousemove(function (e) { var o = options; var i = $(this); pos_img = i.offset()['left']; pos_mouse = e.pageX; new_width = pos_mouse - pos_img; img_width = i.width(); img_cap_one = i.children('img:eq(0)').attr('alt'); img_cap_two = i.children('img:eq(1)').attr('alt'); if (new_width > o.leftgap && new_width < (img_width - o.rightgap)) { i.children('.beforeafter-mask').width(new_width); } if (new_width < (img_width * o.reveal)) { i.children('.beforeafter-caption').html(img_cap_two); } else { i.children('.beforeafter-caption').html(img_cap_one); } }); } }); })(jQuery);