Simpatico/jquery.simpatico.js at master · varystrategic/Simpatico · GitHub

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
/*

Simpatico - Resize images to fill or fit container

Version 	: 0.1
Repository 	: https://github.com/andrewtibbetts/Simpatico
Author 		: Andrew Tibbetts
License 	: MIT, GPL

*/

(function( $ ){

var simpatico_defaults = {
	'view' : 'fill', // fit or fill
	'anchor_x' : 'center', // left, center, right
	'anchor_y' : 'middle' // top, middle, bottom
};

$.fn.simpatico = function( opts ) {

	this.each((function(){

		function fit_width(dims,o) {

			dims.newW = dims.conW; // set destination width to container width
			dims.newH = ( dims.conW/dims.imgW ) * dims.imgH; // calculate new image height

			// calculate top and bottom
			switch (o.anchor_y) {
				case 'top':
					dims.newT = 0;
						break;
				case 'middle':
					switch (o.view) {
						case 'fit':
							dims.newT = ( ( dims.conH - dims.newH ) / 2 );
								break;
						case 'fill':
							dims.newT = ( ( dims.newH - dims.conH ) / 2 ) * -1;
								break;
					}
						break;
				case 'bottom':
					dims.newT = dims.conH - dims.newH;
						break;
			}

			// ignore anchor_x since image will fit horizontally
			dims.newL = 0;

			return dims;
		}

		function fit_height(dims,o) {

			dims.newW = ( dims.conH/dims.imgH ) * dims.imgW; // calculate new image width
			dims.newH = dims.conH; // set destination height to container height

			// calulate left and right
			switch (o.anchor_x) {
				case 'left':
					dims.newL = 0;
						break;
				case 'center':
					switch (o.view) {
						case 'fit':
							dims.newL = ( ( dims.conW - dims.newW ) / 2 );
								break;
						case 'fill':
							dims.newL = ( ( dims.newW - dims.conW ) / 2 ) * -1;
								break;
					}
						break;
				case 'right':
					dims.newL = dims.conW - dims.newW;
			}

			// ignore anchor_y since image will fit vertically
			dims.newT = 0;

			return dims;
		}

		function img_is_landscapier(dims) {
			var imgA = dims.imgW/dims.imgH;
			var conA = dims.conW/dims.conH;
			if ( imgA > conA ) return true; // the image is more 'landscapey' than the container
			else return false; // the image is more 'portraity' than the container
		}

		return function(){

			// init dimensions object
			var dims = {
				conW: 0, // container width
				conH: 0, // container height
				imgW: 0, // image width
				imgH: 0, // image height
				newW: 0, // destination width
				newH: 0, // destination height
				newT: 0, // destination top
				newL: 0  // destination left
			}

			// defaults
			var o = $.extend({}, simpatico_defaults, opts);

			// set container object and get it's width and height
			var $container = $(this);
			dims.conW = $container.width();
			dims.conH = $container.height();

			// set some styles on the container in case they aren't in .css file
			// and then find any 'img' decendants and iterate through them
			$container.css({ overflow: 'hidden' }).find('img').each(function(){

				var $image = $(this); // set image object

				// create and load a temp image to get unaffected width and height
				$('<img src="'+$image.attr('src')+'" />').load(function(){

					dims.imgW = this.width; // get image width (gotta use js as jquery fails)
					dims.imgH = this.height; // get image height (gotta use js as jquery fails)

					switch (o.view) {
						case 'fit': // show the whole image
							if ( img_is_landscapier(dims) )
								fit_width(dims,o);
							else
								fit_height(dims,o);
								break;
						default: // 'fill', leave no empty space in container
							if ( img_is_landscapier(dims) )
								fit_height(dims,o);
							else
								fit_width(dims,o);
								break;
					}
					console.log(o);

					// apply new styles to the image. done!
					$image.width(dims.newW).height(dims.newH).css({ position: 'absolute', top: dims.newT, left: dims.newL });

				});
			});
		};
	})());
}

})( jQuery );