(function (a) { a.fn.extend({ beforeAfter: function (b) { var d = { animateIntro: false, introDelay: 1000, introDuration: 1000, showFullLinks: true, imagePath: "/js/beforeAfter/" }; var b = a.extend(d, b); var c = Math.round(Math.random() * 100000000); return this.each(function () { var e = b; var h = a(this); var n = a("img:first", h).width(); var p = a("img:first", h).height(); a(h).width(n).height(p).css({ overflow: "hidden", position: "relative", padding: "0" }); var m = a("img:first", h).attr("src"); var j = a("img:last", h).attr("src"); a("img:first", h).attr("id", "beforeimage" + c); a("img:last", h).attr("id", "afterimage" + c); a("img", h).remove(); a("div", h).css("float", "left"); a(h).prepend('<div id="dragwrapper' + c + '"><div id="drag' + c + '"><img width="8" height="56" alt="handle" src="' + e.imagePath + 'handle.gif" title="Drag me left or right to see the before and after images" id="handle' + c + '" /></div></div>'); a("#dragwrapper" + c).css({ position: "absolute", padding: "0", left: (n / 2) - (a("#handle" + c).width() / 2) + "px", "z-index": "20" }).width(a("#handle" + c).width()).height(p); a("#dragwrapper" + c).css({ opacity: 0.25 }); a("div:eq(2)", h).height(p).width(n / 2).css({ "background-image": "url(" + m + ")", position: "absolute", overflow: "hidden", left: "0px", "z-index": "10" }); a("div:eq(3)", h).height(p).width(n).css({ "background-image": "url(" + j + ")", position: "absolute", overflow: "hidden", right: "0px" }); a("#drag" + c).width(2).height(p).css({ background: "#888", position: "absolute", left: "3px" }); a("#beforeimage" + c).css({ position: "absolute", top: "0px", left: "0px" }); a("#afterimage" + c).css({ position: "absolute", top: "0px", right: "0px" }); a("#handle" + c).css({ "z-index": "100", position: "relative", cursor: "pointer", top: (p / 2) - (a("#handle" + c).height() / 2) + "px", left: "-3px" }); a(h).append('<img src="' + e.imagePath + 'lt-small.png" width="7" height="15" id="lt-arrow' + c + '"><img src="' + e.imagePath + 'rt-small.png" width="7" height="15" id="rt-arrow' + c + '">'); if (e.showFullLinks) { a(h).after('<div class="balinks" id="links' + c + '" style="position:relative"><span class="bflinks"><a id="showleft' + c + '" href="javascript:void(0)">Show only before</a></span><span class="bflinks"><a id="showright' + c + '" href="javascript:void(0)">Show only after</a></span></div>'); a("#links" + c).width(n); a("#showleft" + c).css({ position: "relative", left: "0px" }).click(function () { a("div:eq(2)", h).animate({ width: n }, 200); a("#dragwrapper" + c).animate({ left: n - a("#dragwrapper" + c).width() + "px" }, 200) }); a("#showright" + c).css({ position: "absolute", right: "0px" }).click(function () { a("div:eq(2)", h).animate({ width: 0 }, 200); a("#dragwrapper" + c).animate({ left: "0px" }, 200) }) } var g = a("#dragwrapper" + c).offset(); var k = g.left; var i = a("div:eq(2)", h).width(); var f = a("div:eq(3)", h).width(); a("#dragwrapper" + c).draggable({ handle: a("#handle" + c), containment: h, axis: "x", drag: function (q, o) { var s = a(this).offset(); var r = s.left - k; a("div:eq(2)", h).width(i + r); a("#lt-arrow" + c).stop().animate({ opacity: 0 }, 0); a("#rt-arrow" + c).stop().animate({ opacity: 0 }, 0) } }); if (e.animateIntro) { a("div:eq(2)", h).width(n); a("#dragwrapper" + c).css("left", n - (a("#dragwrapper" + c).width() / 2) + "px"); setTimeout(function () { a("#dragwrapper" + c).css({ opacity: 1 }).animate({ left: (n / 2) - (a("#dragwrapper" + c).width() / 2) + "px" }, e.introDuration, function () { a("#dragwrapper" + c).animate({ opacity: 0.25 }, 1000) }); a("div:eq(2)", h).width(n).animate({ width: n / 2 + "px" }, e.introDuration, function () { l() }) }, e.introDelay) } else { l() } function l() { a(h).hover(function () { a("#lt-arrow" + c).stop().css({ "z-index": "20", position: "absolute", top: p / 2 - a("#lt-arrow" + c).height() / 2 + "px", left: parseInt(a("#dragwrapper" + c).css("left")) - 10 + "px" }).animate({ opacity: 1, left: parseInt(a("#lt-arrow" + c).css("left")) - 6 + "px" }, 200); a("#rt-arrow" + c).stop().css({ position: "absolute", top: p / 2 - a("#lt-arrow" + c).height() / 2 + "px", left: parseInt(a("#dragwrapper" + c).css("left")) + 10 + "px" }).animate({ opacity: 1, left: parseInt(a("#rt-arrow" + c).css("left")) + 6 + "px" }, 200); a("#dragwrapper" + c).animate({ opacity: 1 }, 200) }, function () { a("#lt-arrow" + c).animate({ opacity: 0, left: parseInt(a("#lt-arrow" + c).css("left")) - 6 + "px" }, 350); a("#rt-arrow" + c).animate({ opacity: 0, left: parseInt(a("#rt-arrow" + c).css("left")) + 6 + "px" }, 350); a("#dragwrapper" + c).animate({ opacity: 0.25 }, 350) }); a(h).click(function (q) { var r = q.pageX - $(this).offset().left; var o = n - r; a("#dragwrapper" + c).stop().animate({ left: r - (a("#dragwrapper" + c).width() / 2) + "px" }, 600); a("div:eq(2)", h).stop().animate({ width: r + "px" }, 600); a("#lt-arrow" + c).stop().animate({ opacity: 0 }, 50); a("#rt-arrow" + c).stop().animate({ opacity: 0 }, 50) }); a(h).one("mousemove", function () { a("#dragwrapper" + c).stop().animate({ opacity: 1 }, 500) }) } }) } }) })(jQuery);