fl-gallery-grid.js 1.8 KB
(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);