blob: 39c377d32d244cfe898e693c9997bbc3bdc8a860 (
plain)
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
|
(function($) {
'use strict';
// Resize all images of an image-gallery
/**
* ImageGallery
* @constructor
*/
var ImageGallery = function() {
// CSS class located in `source/_css/components/_image-gallery.scss`
this.photosBox = '.photo-box';
this.$images = $(this.photosBox + ' img');
};
ImageGallery.prototype = {
/**
* Run ImageGallery feature
* @return {void}
*/
run: function() {
var self = this;
// Resize all images at the loading of the page
self.resizeImages();
// Resize all images when the user is resizing the page
$(window).smartresize(function() {
self.resizeImages();
});
},
/**
* Resize all images of an image gallery
* @return {void}
*/
resizeImages: function() {
var photoBoxWidth;
var photoBoxHeight;
var imageWidth;
var imageHeight;
var imageRatio;
var $image;
this.$images.each(function() {
$image = $(this);
photoBoxWidth = $image.parent().parent().width();
photoBoxHeight = $image.parent().parent().innerHeight();
imageWidth = $image.width();
imageHeight = $image.height();
// Checks if image height is smaller than his box
if (imageHeight < photoBoxHeight) {
imageRatio = (imageWidth / imageHeight);
// Resize image with the box height
$image.css({
height: photoBoxHeight,
width: (photoBoxHeight * imageRatio)
});
// Center image in his box
$image.parent().css({
left: '-' + (((photoBoxHeight * imageRatio) / 2) - (photoBoxWidth / 2)) + 'px'
});
}
// Update new values of height and width
imageWidth = $image.width();
imageHeight = $image.height();
// Checks if image width is smaller than his box
if (imageWidth < photoBoxWidth) {
imageRatio = (imageHeight / imageWidth);
$image.css({
width: photoBoxWidth,
height: (photoBoxWidth * imageRatio)
});
// Center image in his box
$image.parent().css({
top: '-' + (((imageHeight) / 2) - (photoBoxHeight / 2)) + 'px'
});
}
// Checks if image height is larger than his box
if (imageHeight > photoBoxHeight) {
// Center image in his box
$image.parent().css({
top: '-' + (((imageHeight) / 2) - (photoBoxHeight / 2)) + 'px'
});
}
});
}
};
$(document).ready(function() {
if ($('.image-gallery').length) {
var imageGallery = new ImageGallery();
// Small timeout to wait the loading of all images.
setTimeout(function() {
imageGallery.run();
}, 500);
}
});
})(jQuery);
|
