// 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 (innoflair, https://www.innoflair.com/) (function($){ $.fn.extend({ //plugin name - qbeforeafter qbeforeafter: function(options) { var defaults = { defaultgap: 50, leftgap: 10, rightgap: 10, caption: false, captionhborder: "10px", // Horizontal border left/right of caption compared to edge of image captionvborder: "10px", // Vertical border above/below the caption compared to edge of image captionpos: "bottom,left", // position of caption - default is "bottom,left". Choices: "top,left", "top,right", "bottom,left", "bottom,right" reveal: 0.5 // 0.5 - changes caption at half way point }; var options = $.extend(defaults, options); function contains(str, substr){ return str.indexOf(substr) !== -1; } 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 img_cap_two = i.children('img:eq(1)').attr('alt'); var width = i.width(); var height = i.children('img:eq(0)').height(); var captionCSS = {"position":"absolute", "z-index":"120", height:"16px", "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"}; // Set the positioning of the caption if (contains(options.captionpos,"top")){ captionCSS["top"] = options.captionvborder; }else{ captionCSS["bottom"] = options.captionvborder; } if (contains(options.captionpos,"right")){ captionCSS["left"] = "auto"; captionCSS["right"] = options.captionhborder; }else{ captionCSS["left"] = options.captionhborder; captionCSS["right"] = "auto"; } // 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(captionCSS); // 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":"100", "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(captionCSS); 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){ if (width-o.defaultgap < (width * o.reveal)){ i.children('.beforeafter-caption').html(img_cap_two); }else{ i.children('.beforeafter-caption').html(img_cap_one); } 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);