-
Notifications
You must be signed in to change notification settings - Fork 3
/
jquery.beforeafter-1.4.js
executable file
·163 lines (146 loc) · 7.74 KB
/
jquery.beforeafter-1.4.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
/*
* jQuery beforeafter plugin
* @author [email protected] - http://www.catchmyfame.com
* @version 1.4
* @date September 19, 2011
* @category jQuery plugin
* @copyright (c) 2009 [email protected] (www.catchmyfame.com)
* @license CC Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) - http://creativecommons.org/licenses/by-nc-sa/3.0/
*/
(function($){
$.fn.extend({
beforeAfter: function(options)
{
var defaults =
{
animateIntro : false,
introDelay : 1000,
introDuration : 1000,
introPosition : .5,
showFullLinks : true,
beforeLinkText: 'Show only before',
afterLinkText: 'Show only after',
imagePath : './js/',
cursor: 'pointer',
clickSpeed: 600,
linkDisplaySpeed: 200,
dividerColor: '#888',
enableKeyboard: false,
keypressAmount: 20,
onReady: function(){}
};
var options = $.extend(defaults, options);
var randID = Math.round(Math.random()*100000000);
return this.each(function() {
var o=options;
var obj = $(this);
var imgWidth = $('img:first', obj).width();
var imgHeight = $('img:first', obj).height();
if( $('div',obj).length != 2 ) $('img',obj).wrap('<div>'); // For backwards compatability. Used to require images to be wrapped in div tags.
$(obj)
.width(imgWidth)
.height(imgHeight)
.css({'overflow':'hidden','position':'relative','padding':'0'});
var bef = $('img:first', obj).attr('src');
var aft = $('img:last', obj).attr('src');
$('img:first', obj).attr('id','beforeimage'+randID);
$('img:last', obj).attr('id','afterimage'+randID);
// Create an inner div wrapper (dragwrapper) to hold the images.
$(obj).prepend('<div id="dragwrapper'+randID+'"><div id="drag'+randID+'"><img width="8" height="56" alt="handle" src="'+o.imagePath+'handle.gif" id="handle'+randID+'" /></div></div>'); // Create drag handle
$('#dragwrapper'+randID).css({'opacity':.25,'position':'absolute','padding':'0','left':(imgWidth*o.introPosition)-($('#handle'+randID).width()/2)+'px','z-index':'20'}).width($('#handle'+randID).width()).height(imgHeight);
$('div:eq(2)', obj).height(imgHeight).width(imgWidth*o.introPosition).css({'position':'absolute','overflow':'hidden','left':'0px','z-index':'10'}); // Set CSS properties of the before image div
$('div:eq(3)', obj).height(imgHeight).width(imgWidth).css({'position':'absolute','overflow':'hidden','right':'0px'}); // Set CSS properties of the after image div
$('#drag'+randID).width(2).height(imgHeight).css({'background':o.dividerColor,'position':'absolute','left':'3px'}); // Set drag handle CSS properties
$('#beforeimage'+randID).css({'position':'absolute','top':'0px','left':'0px'});
$('#afterimage'+randID).css({'position':'absolute','top':'0px','right':'0px'});
$('#handle'+randID).css({'z-index':'100','position':'relative','cursor':o.cursor,'top':(imgHeight/2)-($('#handle'+randID).height()/2)+'px','left':'-3px'})
$(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+'">');
if(o.showFullLinks)
{
$(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>');
$('#links'+randID).width(imgWidth);
$('#showleft'+randID).css({'position':'relative','left':'0px'}).click(function(){
$('div:eq(2)', obj).animate({width:imgWidth},o.linkDisplaySpeed);
$('#dragwrapper'+randID).animate({left:imgWidth-$('#dragwrapper'+randID).width()+'px'},o.linkDisplaySpeed);
});
$('#showright'+randID).css({'position':'absolute','right':'0px'}).click(function(){
$('div:eq(2)', obj).animate({width:0},o.linkDisplaySpeed);
$('#dragwrapper'+randID).animate({left:'0px'},o.linkDisplaySpeed);
});
}
if(o.enableKeyboard)
{
$(document).keydown(function(event){
if(event.keyCode == 39)
{
if( (parseInt($('#dragwrapper'+randID).css('left'))+parseInt($('#dragwrapper'+randID).width()) + o.keypressAmount) <= imgWidth )
{
$('#dragwrapper'+randID).css('left', parseInt( $('#dragwrapper'+randID).css('left') ) + o.keypressAmount + 'px');
$('div:eq(2)', obj).width( parseInt( $('div:eq(2)', obj).width() ) + o.keypressAmount + 'px' );
}
else
{
$('#dragwrapper'+randID).css('left', imgWidth - parseInt( $('#dragwrapper'+randID).width() ) + 'px');
$('div:eq(2)', obj).width( imgWidth - parseInt( $('#dragwrapper'+randID).width() )/2 + 'px' );
}
}
if(event.keyCode == 37)
{
if( (parseInt($('#dragwrapper'+randID).css('left')) - o.keypressAmount) >= 0 )
{
$('#dragwrapper'+randID).css('left', parseInt( $('#dragwrapper'+randID).css('left') ) - o.keypressAmount + 'px');
$('div:eq(2)', obj).width( parseInt( $('div:eq(2)', obj).width() ) - o.keypressAmount + 'px' );
}
else
{
$('#dragwrapper'+randID).css('left', '0px');
$('div:eq(2)', obj).width($('#dragwrapper'+randID).width()/2);
}
}
});
}
$('#dragwrapper'+randID).draggable( { containment:obj,drag:drag,stop:drag });
function drag()
{
$('#lt-arrow'+randID+', #rt-arrow'+randID).stop().css('opacity',0);
$('div:eq(2)', obj).width( parseInt( $(this).css('left') ) + 4 );
}
if(o.animateIntro)
{
$('div:eq(2)', obj).width(imgWidth);
$('#dragwrapper'+randID).css('left',imgWidth-($('#dragwrapper'+randID).width()/2)+'px');
setTimeout(function(){
$('#dragwrapper'+randID).css({'opacity':1}).animate({'left':(imgWidth*o.introPosition)-($('#dragwrapper'+randID).width()/2)+'px'},o.introDuration,function(){$('#dragwrapper'+randID).animate({'opacity':.25},1000)});
$('div:eq(2)', obj).width(imgWidth).animate({'width':imgWidth*o.introPosition+'px'},o.introDuration,function(){clickit();o.onReady.call(this);});
},o.introDelay);
}
else
{
clickit();
o.onReady.call(this);
}
function clickit()
{
$(obj).hover(function(){
$('#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);
$('#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);
$('#dragwrapper'+randID).animate({'opacity':1},200);
},function(){
$('#lt-arrow'+randID).animate({opacity:0,left:parseInt($('#lt-arrow'+randID).css('left'))-6+'px'},350);
$('#rt-arrow'+randID).animate({opacity:0,left:parseInt($('#rt-arrow'+randID).css('left'))+6+'px'},350);
$('#dragwrapper'+randID).animate({'opacity':.25},350);
}
);
// When clicking in the container, move the bar and imageholder divs
$(obj).click(function(e){
var clickX = e.pageX - $(this).offset().left;
$('#dragwrapper'+randID).stop().animate({'left':clickX-($('#dragwrapper'+randID).width()/2)+'px'},o.clickSpeed);
$('div:eq(2)', obj).stop().animate({'width':clickX+'px'},o.clickSpeed);
$('#lt-arrow'+randID+',#rt-arrow'+randID).stop().animate({opacity:0},50);
});
$(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
}
});
}
});
})(jQuery);