fl-gallery-grid.js
1.8 KB
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
(function($) {
/**
* Builds a gallery grid of items.
*
* @class FLBuilderGalleryGrid
* @since 1.2.3
*/
FLBuilderGalleryGrid = function(settings)
{
$.extend(this, settings);
if($(this.wrapSelector).length > 0) {
$(window).on('resize', $.proxy(this.resize, this));
this.resize();
}
};
/**
* Prototype for new instances.
*
* @since 1.2.3
* @property {Object} prototype
*/
FLBuilderGalleryGrid.prototype = {
/**
* A CSS selector for the element that wraps
* the gallery items.
*
* @since 1.2.3
* @property {String} wrapSelector
*/
wrapSelector : '.fl-gallery-grid',
/**
* A CSS selector for the gallery items.
*
* @since 1.2.3
* @property {String} itemSelector
*/
itemSelector : '> *',
/**
* The maximum width of the items.
*
* @since 1.2.3
* @property {Number} itemWidth
*/
itemWidth : 400,
/**
* A ratio to use for the item height.
*
* @since 1.2.3
* @property {Number} itemHeight
*/
itemHeight : 0.75,
/**
* Callback that fires when the window is resized
* to resize the gallery items.
*
* @since 1.2.3
* @method resize
*/
resize: function()
{
var winWidth = $(window).width(),
wrap = $(this.wrapSelector),
wrapWidth = wrap[0].getBoundingClientRect().width,
numCols = winWidth > 480 ? Math.ceil(wrapWidth/this.itemWidth) : 1,
items = wrap.find(this.itemSelector),
itemWidth = wrapWidth/numCols,
itemHeight = itemWidth * this.itemHeight;
// Browser bug fix. One column images are streched otherwise.
if ( 1 === numCols ) {
itemWidth -= 0.5;
}
// Set the item width and height.
items.css({
'float' : 'left',
'height' : itemHeight + 'px',
'width' : itemWidth + 'px'
});
}
};
})(jQuery);