1/* Before and After image script By Dynamic Drive 2* Created: Oct 15th', 2014 by DynamicDrive.com. This notice must stay intact for usage 3* Author: Dynamic Drive at http://www.dynamicdrive.com/ 4* Visit http://www.dynamicdrive.com/ for full source code 5*/ 6 7var ddbeforeandafter = (function($){ 8 9 var gallerydefaults = { 10 dragUI: '<div class="drag"><div class="draghandle"></div></div>', 11 revealduration: 0.4, 12 initialreveal: ['50%', 1], 13 initialrevealeasing: 'cubic-bezier(0.390, 0.575, 0.510, 1.650)', 14 hidedragbardelay: 1 15 } 16 17 var detecttouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)) 18 19 function ddbeforeandafter(options){ 20 var s = $.extend({}, gallerydefaults, options) 21 s._imagesloaded = false 22 s._draghidetimer = null 23 var thisobj = this 24 var $container = $('#'+s.wrapperid) 25 var $before = $container.find('div.before1:eq(0)') 26 var $after = $container.find('div.after1:eq(0)') 27 $container.append(s.dragUI) 28 var $dragbar = $container.find('div.drag') 29 var $draghandle = $dragbar.find('div.draghandle') 30 var dimensions = {containerw: $container.width(), dragbarw: $dragbar.width(), draghandlew: $draghandle.outerWidth()} 31 s.defaultTimingFunction = $dragbar.css('transitionTimingFunction') 32 var isdirectclick = false 33 var mousemoveevtstr = 'mousemove.dragstart' + s.wrapperid + ' touchmove.dragstart' + s.wrapperid 34 35 this.s = s 36 this.$container = $container 37 this.$before = $before 38 this.$after = $after 39 this.$dragbar = $dragbar 40 this.$draghandle = $draghandle 41 this.dimensions = dimensions 42 43 this._init() 44 45 $container.on('mousedown touchstart', function(e){ 46 isdirectclick = true 47 if (e.target.tagName != 'A') 48 e.preventDefault() 49 }) 50 $container.on(detecttouch? 'touchstart' : 'click', function(e){ 51 if (s._imagesloaded && (isdirectclick || detecttouch)){ 52 var e = (e.type.indexOf('touch') != '-1')? e.originalEvent.changedTouches[0] : e 53 var newx = e.pageX - $container.offset().left 54 $dragbar.add($before).css({transitionTimingFunction: s.defaultTimingFunction, transitionDuration: s.revealduration+'s'}) 55 $dragbar.css({left: newx}) 56 $before.css({width: newx}) 57 if (e.target.tagName != 'A') 58 e.preventDefault() 59 } 60 isdirectclick = false 61 }) 62 $container.hover( 63 function(){ 64 clearTimeout(s._draghidetimer) 65 $dragbar.stop().animate({opacity:1}) 66 }, 67 function(){ 68 s._draghidetimer = setTimeout(function(){$dragbar.stop().animate({opacity:0.3})}, s.hidedragbardelay*1000) 69 } 70 ) 71 $dragbar.bind('click', function(e){ 72 e.stopPropagation() 73 }) 74 $dragbar.bind('mousedown touchstart', function(e){ 75 if (!s._imagesloaded) 76 return 77 var e = (e.type.indexOf('touch') != -1)? e.originalEvent.changedTouches[0] : e 78 dimensions = thisobj.dimensions // refresh dimensions var 79 var initialx = parseInt($dragbar.css('left')) 80 var containerleft = $container.offset().left 81 $dragbar.add($before).css({transitionDuration: '0s'}) 82 $(document).bind(mousemoveevtstr, function(e){ 83 var e = (e.type.indexOf('touch') != '-1')? e.originalEvent.changedTouches[0] : e 84 var dx=e.pageX-containerleft-initialx //distance to move horizontally 85 var newx=(dx<0)? Math.max(0, initialx+dx) : Math.min(dimensions.containerw-dimensions.dragbarw, initialx+dx) //Set horizonal bonds. dx>0 indicates drag right versus 86 $dragbar.css({left: newx}) 87 $before.css({width: newx}) 88 return false //cancel default drag action 89 }) 90 return false //cancel default drag action 91 }) 92 $(document).bind('mouseup touchend', function(e){ 93 var e = (e.type.indexOf('touch') != -1)? e.originalEvent.changedTouches[0] : e 94 $(document).unbind(mousemoveevtstr) 95 }) 96 97 $(window).bind('resize', function(e){ 98 dimensions.containerw = $container.width() 99 thisobj._centerelement($dragbar, $draghandle) 100 $before.find('img:eq(0)').css({width: dimensions.containerw, height: 'auto'}) 101 $after.find('img:eq(0)').css({width: dimensions.containerw, height: 'auto'}) 102 thisobj.unveil(s.initialreveal[0], s.initialreveal[1], s.initialrevealeasing) 103 }) 104 105 } // end main function 106 107 ddbeforeandafter.prototype = { 108 109 _centerelement: function($parent, $target, offsetx, offsety){ 110 var dimensions = {parentw: $parent.width(), parenth: $parent.height(), targetw: $target.outerWidth(), targeth: $target.outerHeight()} 111 $target.css({left: dimensions.parentw/2 - dimensions.targetw/2 + (offsetx || 0), top: dimensions.parenth/2 - dimensions.targeth/2 + (offsety || 0)}) 112 }, 113 114 _init: function(initoptions){ 115 var thisobj = this, 116 s = this.s, 117 $container = this.$container, 118 $before = this.$before, 119 $after = this.$after, 120 $dragbar = this.$dragbar, 121 $draghandle = this.$draghandle 122 s._imagesloaded = false 123 if (initoptions && initoptions.before1afterhtml){ 124 $before.html(initoptions.before1afterhtml[0]) 125 $after.html(initoptions.before1afterhtml[1]) 126 } 127 if (initoptions && initoptions.dimensions){ 128 $container.css({width: initoptions.dimensions[0], height: initoptions.dimensions[1]}) 129 this.dimensions = {containerw: $container.width(), dragbarw: $dragbar.width(), draghandlew: $draghandle.outerWidth()} 130 } 131 this._centerelement($dragbar, $draghandle) 132 this.unveil(0, 0) 133 clearTimeout(s._draghidetimer) 134 $dragbar.css({opacity:0.3}) 135 var $beforeimage = this.$before.css({opacity:0.5}).find('img:eq(0)').css({width: this.dimensions.containerw, height: 'auto'}) 136 var $afterimage = this.$after.css({opacity:0}
136).find('img:eq(0)').css({width: this.dimensions.containerw, height: 'auto'}) 137 var imagesloadeddfd = [$.Deferred(), $.Deferred()] 138 if ($beforeimage.prop('complete') === true) 139 imagesloadeddfd[0].resolve() 140 if ($afterimage.prop('complete') === true) 141 imagesloadeddfd[1].resolve() 142 $beforeimage.on('load error', function(){imagesloadeddfd[0].resolve()}) 143 $afterimage.on('load error', function(){imagesloadeddfd[1].resolve()}) 144 $.when(imagesloadeddfd[0], imagesloadeddfd[1]).done(function(){ 145 s._imagesloaded = true 146 $after.css({opacity:1}) 147 $before.animate({opacity:1}, function(){ 148 $dragbar.animate({opacity:1}, function(){ 149 thisobj.unveil(s.initialreveal[0], s.initialreveal[1], s.initialrevealeasing) 150 }) 151 }) 152 }) 153 154 }, 155 156 reload: function(beforeafterhtml, dimensions){ 157 var options = {beforeafterhtml: beforeafterhtml, dimensions: dimensions} 158 this._init(options) 159 }, 160 161 unveil: function(amt, dur, timingfunc){ 162 var s = this.s, 163 $container = this.$container, 164 $before = this.$before, 165 $dragbar = this.$dragbar, 166 dimensions = this.dimensions, 167 amt = parseInt(amt) 168 amt = (amt < 0)? 0 : (amt > 100)? 100 : amt 169 var dur = ((typeof dur != 'undefined')? dur : s.revealduration) + 's' 170 var timingfunction = timingfunc || s.defaultTimingFunction 171 amt = 100 - amt
172 var newx = (dimensions.containerw - dimensions.dragbarw) * amt/100 173 $dragbar.add($before).css({transitionTimingFunction: timingfunction, transitionDuration: dur}) 174 $dragbar.css({left: newx}) 175 $before.css({width: newx}) 176 177 } 178 179 } 180 181 return ddbeforeandafter 182}) (jQuery) 183
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.