https://taburent.ru/sites/all/themes/sv/js/jquery.beforeafter.js?r27jka

1jQuery(document).ready(function($) {
2  
3  function beforeAfterResizer(){
4    $('.beforeafter').each(function(index, el){
5      $(this).find('.afterImageWrapper').css('width', $(this).width()+'px');
6      $(this).find('.afterImageWrapper img').css('width', $(this).width()+'px');
7      $(this).find('.beforeImageWrapper').css('width', $(this).width()/2+'px');
8      $(this).find('.beforeImageWrapper img').css('width', $(this).width()+'px');
9      $(this).find('.dragwrapper').css('left', $(this).width()/2+'px');
10    });
11    //$(this).height($(this).find('.afterImageWrapper img').height());
12  }
13  
14  $('.beforeafter').each(function(index, el){
15    $(this).beforeAfter();
16  });
17  
18  beforeAfterResizer();
19  
20  $( window ).resize(function() {
21    beforeAfterResizer();
22  });
23});
24
25
26/*
27 * jQuery beforeafter plugin
28 * @author [email protected] - http://www.catchmyfame.com
29 * @version 1.4
30 * @date September 19, 2011
31 * @category jQuery plugin
32 * @copyright (c) 2009 [email protected] (www.catchmyfame.com)
33 * @license CC Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) - http://creativecommons.org/licenses/by-nc-sa/3.0/
34 */
35(function($){
36  
37  function is_touch_device() {
38    return !!('ontouchstart' in window);
39  }
40  
41	$.fn.extend({ 
42		beforeAfter: function(options)
43		{
44			var defaults = 
45			{
46				animateIntro : false,
47				introDelay : 1000,
48				introDuration : 1000,
49				introPosition : .5,
50				showFullLinks : true,
51				beforeLinkText: 'Показать ДО',
52				afterLinkText: 'Показать ПОСЛЕ',
53				imagePath : '/sites/all/themes/sv/js/',
54				cursor: 'pointer',
55				clickSpeed: 600,
56				linkDisplaySpeed: 200,
57				dividerColor: '#000',
58				enableKeyboard: false,
59				keypressAmount: 20,
60				onReady: function(){}
61			};
62		var options = $.extend(defaults, options);
63
64		var randID =  Math.round(Math.random()*100000000);
65
66    		return this.each(function() {
67			var o=options;
68			var obj = $(this);
69
70			var imgWidth = $('img:first', obj).width();
71			var imgHeight = $('img:first', obj).height();
72			
73			if( $('div',obj).length != 2 ) $('img',obj).wrap('<div>'); // For backwards compatability. Used to require images to be wrapped in div tags.
74
75			$(obj)
76			.width(imgWidth)
77			//.height(imgHeight)
78			.css({'overflow':'hidden','position':'relative','padding':'0'})
79      .attr('rel', randID);
80
81			var bef = $('img:first', obj).attr('src');
82			var aft = $('img:last', obj).attr('src');
83			
84			$('img:first', obj).attr('id','beforeimage'+randID).addClass('beforeimage');
85			$('img:last', obj).attr('id','afterimage'+randID).addClass('afterimage');
86		
87			// Create an inner div wrapper (dragwrapper) to hold the images.
88			$(obj).prepend('<div id="dragwrapper'+randID+'" class="dragwrapper"><div id="drag'+randID+'"><img width="11" height="60" alt="handle" src="'+o.imagePath+'handle.png" id="handle'+randID+'" /></div></div>'); // Create drag handle
89			$('#dragwrapper'+randID).css({'opacity':1,'position':'absolute','padding':'0','left':(imgWidth*o.introPosition)-($('#handle'+randID).width()/2)+'px','z-index':'20', 'top':'0px', 'bottom':'0px', 'margin-left':'-4px'});
90
91			$('div:eq(2)', obj).width(imgWidth*o.introPosition).css({'position':'relative','overflow':'hidden','left':'0px','z-index':'10'}).addClass('beforeImageWrapper'); // Set CSS properties of the before image div
92			$('div:eq(3)', obj).width(imgWidth).css({'position':'absolute','overflow':'hidden','right':'0px', 'top':'0px', 'bottom':'0px'}).addClass('afterImageWrapper');	// Set CSS properties of the after image div
93			$('#drag'+randID).width(2).css({'background':o.dividerColor,'position':'absolute','left':'3px', 'top':'0px', 'bottom':'0px'});	
94      
95      // Set drag handle CSS properties
96			$('#beforeimage'+randID).css({'position':'relative','top':'0px','left':'0px'});
97			$('#afterimage'+randID).css({'position':'absolute','top':'0px','right':'0px'});
98			
99      $('#handle'+randID).css({'z-index':'100','position':'absolute','cursor':o.cursor,'top':'50%','left':'-5.5px', 'margin-top':'-30px'})
100
101			//$(obj).append('<img src="'+o.imagePath+'lt-small.png" width="7" height="15" id="lt-arrow'+randID+'"><img src="'+o.imagePath+'rt-small.png" width="7" height="15" id="rt-arrow'+randID+'">');
102
103			if(o.showFullLinks)
104			{	
105				$(obj).after('<div class="balinks" id="links'+randID+'" style="position:relative"><span class="balinks"><a id="showleft'+randID+'" href="javascript:void(0)">'+o.beforeLinkText+'</a></span><span class="balinks"><a id="showright'+randID+'" href="javascript:void(0)">'+o.afterLinkText+'</a></span></div>');
106				$('#links'+randID).width(imgWidth);
107				$('#showleft'+randID).css({'position':'relative','left':'0px'}).click(function(){
108					$('div:eq(2)', obj).animate({width:imgWidth},o.linkDisplaySpeed);

109					$('#dragwrapper'+randID).animate({left:imgWidth-$('#dragwrapper'+randID).width()+'px'},o.linkDisplaySpeed);
110				});
111				$('#showright'+randID).css({'position':'absolute','right':'0px'}).click(function(){
112					$('div:eq(2)', obj).animate({width:0},o.linkDisplaySpeed);
113					$('#dragwrapper'+randID).animate({left:'0px'},o.linkDisplaySpeed);
114				});
115			}
116
117			if(o.enableKeyboard)
118			{
119				$(document).keydown(function(event){
120					if(event.keyCode == 39)
121					{
122						if( (parseInt($('#dragwrapper'+randID).css('left'))+parseInt($('#dragwrapper'+randID).width()) + o.keypressAmount) <= imgWidth )
123						{
124							$('#dragwrapper'+randID).css('left', parseInt( $('#dragwrapper'+randID).css('left') ) + o.keypressAmount + 'px');
125							$('div:eq(2)', obj).width( parseInt( $('div:eq(2)', obj).width() ) + o.keypressAmount + 'px' );
126						}
127						else
128						{
129							$('#dragwrapper'+randID).css('left', imgWidth - parseInt( $('#dragwrapper'+randID).width() ) + 'px');
130							$('div:eq(2)', obj).width( imgWidth - parseInt( $('#dragwrapper'+randID).width() )/2 + 'px' );
131						}
132					}
133					if(event.keyCode == 37)
134					{
135						if( (parseInt($('#dragwrapper'+randID).css('left')) - o.keypressAmount) >= 0 )
136						{
137							$('#dragwrapper'+randID).css('left', parseInt( $('#dragwrapper'+randID).css('left') ) - o.keypressAmount + 'px');
138							$('div:eq(2)', obj).width( parseInt( $('div:eq(2)', obj).width() ) - o.keypressAmount + 'px' );
139						}
140						else
141						{
142							$('#dragwrapper'+randID).css('left', '0px');
143							$('div:eq(2)', obj).width($('#dragwrapper'+randID).width()/2);
144						}
145					}
146				});
147			}
148
149			$('#dragwrapper'+randID).draggable( { containment:obj,drag:drag,stop:drag });
150      
151			function drag()
152			{
153				$('#lt-arrow'+randID+', #rt-arrow'+randID).stop().css('opacity',0);
154				$('div:eq(2)', obj).width( parseInt( $(this).css('left') ) );
155			}
156
157			if(o.animateIntro)
158			{
159				$('div:eq(2)', obj).width(imgWidth);
160				$('#dragwrapper'+randID).css('left',imgWidth-($('#dragwrapper'+randID).width()/2)+'px');
161				setTimeout(function(){
162					$('#dragwrapper'+randID).css({'opacity':1}).animate({'left':(imgWidth*o.introPosition)-($('#dragwrapper'+randID).width()/2)+'px'},o.introDuration,function(){$('#dragwrapper'+randID).animate({'opacity':1},1000)});
163					$('div:eq(2)', obj).width(imgWidth).animate({'width':imgWidth*o.introPosition+'px'},o.introDuration,function(){clickit();o.onReady.call(this);});
164				},o.introDelay);
165			}
166			else
167			{
168				clickit();
169				o.onReady.call(this);
170			}
171
172			function clickit()
173			{
174				$(obj).hover(function(){
175						$('#lt-arrow'+randID).stop().css({'z-index':'20','position':'absolute','top':imgHeight/2-$('#lt-arrow'+randID).height()/2+'px','left':parseInt($('#dragwrapper'+randID).css('left'))-10+'px'}).animate({opacity:1,left:parseInt($('#lt-arrow'+randID).css('left'))-6+'px'},200);
176						$('#rt-arrow'+randID).stop().css({'position':'absolute','top':imgHeight/2-$('#lt-arrow'+randID).height()/2+'px','left':parseInt($('#dragwrapper'+randID).css('left'))+10+'px'}).animate({opacity:1,left:parseInt($('#rt-arrow'+randID).css('left'))+6+'px'},200);
177						$('#dragwrapper'+randID).animate({'opacity':1},200);
178					},function(){
179						$('#lt-arrow'+randID).animate({opacity:0,left:parseInt($('#lt-arrow'+randID).css('left'))-6+'px'},350);
180						$('#rt-arrow'+randID).animate({opacity:0,left:parseInt($('#rt-arrow'+randID).css('left'))+6+'px'},350);
181						$('#dragwrapper'+randID).animate({'opacity':1},350);
182					}
183				);
184
185				// When clicking in the container, move the bar and imageholder divs
186				$(obj).click(function(e){
187					var clickX = e.pageX - $(this).offset().left;
188					$('#dragwrapper'+randID).stop().animate({'left':clickX-($('#dragwrapper'+randID).width()/2)+'px'},o.clickSpeed);
189					$('div:eq(2)', obj).stop().animate({'width':clickX+'px'},o.clickSpeed);
190					$('#lt-arrow'+randID+',#rt-arrow'+randID).stop().animate({opacity:0}

190,50);
191				});
192				$(obj).one('mousemove', function(){$('#dragwrapper'+randID).stop().animate({'opacity':1},500);}); // If the mouse is over the container and we animate the intro, we run this to change the opacity when the mouse moves since the hover event doesnt get triggered yet
193        
194
195        $(obj).mousemove(function(event){
196          //alert('mousemove');
197            var clickX = event.pageX - $(this).offset().left;
198            $('#dragwrapper'+randID).stop().css('left',clickX-($('#dragwrapper'+randID).width()/2)+'px');
199            $('div:eq(2)', obj).stop().css('width', clickX+'px');
200            $('#lt-arrow'+randID+',#rt-arrow'+randID).stop().css('opacity', 0);
201        });
202        
203        
204        $(obj).mouseout(function(event){
205          //alert('mousemove');
206          var clickX = event.pageX - $(this).offset().left;
207          $('#dragwrapper'+randID).stop().animate({left:'50%'}, 500);
208					$('div:eq(2)', obj).stop().animate({width:'50%'},500);
209					$('#lt-arrow'+randID+',#rt-arrow'+randID).stop().css('opacity', 0);
210        });
211        
212			}
213  		});
214    	}
215	});
216})(jQuery);