|
1
|
|
|
/** |
|
2
|
|
|
* |
|
3
|
|
|
*/ |
|
4
|
|
|
(function(window, $) { |
|
5
|
|
|
|
|
6
|
|
|
var Gfr = function(opts) { |
|
7
|
|
|
var _this = this; |
|
8
|
|
|
|
|
9
|
|
|
_this.options = $.extend({ |
|
10
|
|
|
autoPlay: false, |
|
11
|
|
|
positioning: '50% 50%', |
|
12
|
|
|
preserveAspectRatio: true, |
|
13
|
|
|
sizeToFit: true |
|
14
|
|
|
}, opts); |
|
15
|
|
|
|
|
16
|
|
|
// Specifics |
|
17
|
|
|
_this.originalFrameWidth = _this.frameWidth = 1920, |
|
|
|
|
|
|
18
|
|
|
_this.originalFrameHeight = _this.frameHeight = 698; |
|
19
|
|
|
_this.imgRatio = this.frameWidth / this.frameHeight; |
|
20
|
|
|
|
|
21
|
|
|
_this.$el = _this.options.$el || $('.gif'); |
|
22
|
|
|
_this.imgSrc = _this.$el.data('src'); |
|
23
|
|
|
_this.$filmStrip = $('<img src="' + _this.$el.data('src') +'"/>'); |
|
24
|
|
|
|
|
25
|
|
|
_this.$el.append(_this.$filmStrip); |
|
26
|
|
|
|
|
27
|
|
|
// Bailout no image found! |
|
28
|
|
|
if ( !_this.imgSrc ) { |
|
29
|
|
|
return; |
|
30
|
|
|
} |
|
31
|
|
|
|
|
32
|
|
|
_this.containerHeight = _this.$el.outerHeight(); |
|
33
|
|
|
_this.containerWidth = _this.$el.width(); |
|
34
|
|
|
|
|
35
|
|
|
_this.counter = 0; |
|
36
|
|
|
_this.imgPointer = 0; |
|
37
|
|
|
|
|
38
|
|
|
if ( _this.options.preserveAspectRatio ) { |
|
39
|
|
|
_this.containerHeight = _this.containerWidth / _this.imgRatio; |
|
40
|
|
|
} |
|
41
|
|
|
|
|
42
|
|
|
_this.setup(); |
|
43
|
|
|
|
|
44
|
|
|
_this.$el.on('mousemove', function(evt) { |
|
45
|
|
|
clearInterval(_this.timer); |
|
46
|
|
|
|
|
47
|
|
|
var pointer = Math.round( _this.map(evt.clientX, 0, _this.$el.outerWidth(), 0, _this.frameCount() ) ); |
|
48
|
|
|
|
|
49
|
|
|
_this.positionFrame( pointer ); |
|
50
|
|
|
|
|
51
|
|
|
clearTimeout( _this.activity ); |
|
52
|
|
|
|
|
53
|
|
|
if (_this.options.autoPlay) { |
|
54
|
|
|
_this.activity = setTimeout(function() { |
|
55
|
|
|
_this.start(); |
|
56
|
|
|
}, 500 ); |
|
57
|
|
|
} |
|
58
|
|
|
}); |
|
59
|
|
|
} |
|
60
|
|
|
|
|
61
|
|
|
Gfr.prototype.getFilmstripStyles = function() { |
|
62
|
|
|
var _this = this; |
|
63
|
|
|
var css = ['position:relative']; |
|
64
|
|
|
var positioning = this.options.positioning.split(' '); |
|
65
|
|
|
|
|
66
|
|
|
if (this.options.sizeToFit ){ |
|
67
|
|
|
var coverDimensions = _this.coverDimensions(_this.frameWidth, _this.frameHeight, _this.$el.outerWidth(), _this.$el.outerHeight()); |
|
68
|
|
|
|
|
69
|
|
|
console.log('Size to fit?', coverDimensions, this.$el.outerHeight() ); |
|
|
|
|
|
|
70
|
|
|
// Increase frame |
|
71
|
|
|
_this.frameWidth = coverDimensions.width; |
|
72
|
|
|
_this.frameHeight = coverDimensions.height; |
|
73
|
|
|
console.log('New Width:', coverDimensions.width, _this.frameCount(), coverDimensions.width * _this.frameCount() ); |
|
74
|
|
|
_this.$filmStrip.attr('width', coverDimensions.width * _this.frameCount()) |
|
75
|
|
|
_this.$filmStrip.attr('height', coverDimensions.height) |
|
76
|
|
|
} |
|
77
|
|
|
|
|
78
|
|
|
// X |
|
79
|
|
|
css.push('margin-left: ' + (_this.$el.outerWidth() - _this.frameWidth) * (parseInt(positioning[0], 10) / 100) + 'px') |
|
80
|
|
|
|
|
81
|
|
|
// Y |
|
82
|
|
|
console.log(_this.$el.outerHeight(), _this.frameHeight); |
|
83
|
|
|
css.push('margin-top: ' + (_this.$el.outerHeight() - _this.frameHeight) * (parseInt(positioning[1], 10) / 100) + 'px') |
|
84
|
|
|
|
|
85
|
|
|
console.log(css.join(';')); |
|
86
|
|
|
|
|
87
|
|
|
return css.join(';'); |
|
88
|
|
|
} |
|
89
|
|
|
|
|
90
|
|
|
Gfr.prototype.map = function(value, istart, istop, ostart, ostop) { |
|
91
|
|
|
return ostart + (ostop - ostart) * ((value - istart) / (istop - istart)); |
|
92
|
|
|
} |
|
93
|
|
|
|
|
94
|
|
|
Gfr.prototype.frameCount = function() { |
|
95
|
|
|
// Normalize to allow for zeroIndex; |
|
96
|
|
|
return (this.img.width / this.frameWidth) - 1; |
|
97
|
|
|
} |
|
98
|
|
|
|
|
99
|
|
|
Gfr.prototype.setup = function() { |
|
100
|
|
|
var _this = this; |
|
101
|
|
|
|
|
102
|
|
|
_this.img = new Image(); |
|
|
|
|
|
|
103
|
|
|
_this.is_landscape = ( _this.containerWidth > _this.containerHeight ); |
|
104
|
|
|
_this.sizing = _this.is_landscape ? _this.containerWidth : _this.containerHeight ; |
|
105
|
|
|
_this.assignImage( _this.imgSrc ); |
|
106
|
|
|
_this.$filmStrip.attr('style', _this.getFilmstripStyles() ); |
|
107
|
|
|
} |
|
108
|
|
|
|
|
109
|
|
|
Gfr.prototype.assignImage = function(src) { |
|
110
|
|
|
var _this = this; |
|
111
|
|
|
|
|
112
|
|
|
_this.img.src = src; |
|
113
|
|
|
|
|
114
|
|
|
this.img.onload = function() { |
|
115
|
|
|
|
|
116
|
|
|
setTimeout(function() { |
|
117
|
|
|
_this.$el.fadeIn(100); |
|
118
|
|
|
}, 500); |
|
119
|
|
|
|
|
120
|
|
|
_this.gifHeight = _this.sizing; |
|
121
|
|
|
_this.gifWidth = _this.frameWidth * _this.frameCount(); |
|
122
|
|
|
|
|
123
|
|
|
if (_this.options.autoPlay) { |
|
124
|
|
|
_this.start(); |
|
125
|
|
|
} |
|
126
|
|
|
} |
|
127
|
|
|
|
|
128
|
|
|
} |
|
129
|
|
|
|
|
130
|
|
|
Gfr.prototype.start = function() { |
|
131
|
|
|
var _this = this; |
|
132
|
|
|
|
|
133
|
|
|
clearInterval(_this.timer); |
|
134
|
|
|
|
|
135
|
|
|
_this.timer = setInterval( function() { |
|
136
|
|
|
_this.progressFrame(); |
|
137
|
|
|
}, 1000 / 12 ); |
|
138
|
|
|
} |
|
139
|
|
|
|
|
140
|
|
|
Gfr.prototype.positionFrame = function( numberOfFrames ) { |
|
141
|
|
|
var _this = this; |
|
142
|
|
|
|
|
143
|
|
|
_this.counter = numberOfFrames; |
|
144
|
|
|
_this.$filmStrip.css('transform', 'translateX(' + ((( _this.frameWidth * numberOfFrames )) * -1) +'px)' ); |
|
145
|
|
|
} |
|
146
|
|
|
|
|
147
|
|
|
Gfr.prototype.progressFrame = function() { |
|
148
|
|
|
var _this = this; |
|
149
|
|
|
|
|
150
|
|
|
_this.positionFrame( _this.counter ); |
|
151
|
|
|
|
|
152
|
|
|
if (_this.counter < _this.frameCount() ){ |
|
153
|
|
|
_this.counter++; |
|
154
|
|
|
} else { |
|
155
|
|
|
_this.counter = 0; |
|
156
|
|
|
} |
|
157
|
|
|
} |
|
158
|
|
|
|
|
159
|
|
|
Gfr.prototype.coverDimensions = function (childWidth, childHeight, containerWidth, containerHeight ) { |
|
160
|
|
|
var scaleFactor = this.max( containerWidth / childWidth, containerHeight / childHeight ); |
|
161
|
|
|
|
|
162
|
|
|
return { |
|
163
|
|
|
height: Math.ceil(childHeight * scaleFactor), |
|
164
|
|
|
width: Math.ceil(childWidth * scaleFactor) |
|
165
|
|
|
}; |
|
166
|
|
|
}; |
|
167
|
|
|
|
|
168
|
|
|
Gfr.prototype.max = function( a, b) { |
|
169
|
|
|
return a > b ? a : b; |
|
170
|
|
|
}; |
|
171
|
|
|
|
|
172
|
|
|
|
|
173
|
|
|
var g = new Gfr(); |
|
174
|
|
|
|
|
175
|
|
|
console.log(g); |
|
|
|
|
|
|
176
|
|
|
|
|
177
|
|
|
}(window, window.jQuery)) |
thisislawatts /
gifr
Loading history...
The sequence or comma operator allows the inclusion of multiple expressions where only is permitted. The result of the sequence is the value of the last expression.
This operator is most often used in
forstatements.Used in another places it can make code hard to read, especially when people do not realize it even exists as a seperate operator.
This check looks for usage of the sequence operator in locations where it is not necessary and could be replaced by a series of expressions or statements.
could just as well be written as:
To learn more about the sequence operator, please refer to the MDN.