fl-gallery-grid.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. (function($) {
  2. /**
  3. * Builds a gallery grid of items.
  4. *
  5. * @class FLBuilderGalleryGrid
  6. * @since 1.2.3
  7. */
  8. FLBuilderGalleryGrid = function(settings)
  9. {
  10. $.extend(this, settings);
  11. if($(this.wrapSelector).length > 0) {
  12. $(window).on('resize', $.proxy(this.resize, this));
  13. this.resize();
  14. }
  15. };
  16. /**
  17. * Prototype for new instances.
  18. *
  19. * @since 1.2.3
  20. * @property {Object} prototype
  21. */
  22. FLBuilderGalleryGrid.prototype = {
  23. /**
  24. * A CSS selector for the element that wraps
  25. * the gallery items.
  26. *
  27. * @since 1.2.3
  28. * @property {String} wrapSelector
  29. */
  30. wrapSelector : '.fl-gallery-grid',
  31. /**
  32. * A CSS selector for the gallery items.
  33. *
  34. * @since 1.2.3
  35. * @property {String} itemSelector
  36. */
  37. itemSelector : '> *',
  38. /**
  39. * The maximum width of the items.
  40. *
  41. * @since 1.2.3
  42. * @property {Number} itemWidth
  43. */
  44. itemWidth : 400,
  45. /**
  46. * A ratio to use for the item height.
  47. *
  48. * @since 1.2.3
  49. * @property {Number} itemHeight
  50. */
  51. itemHeight : 0.75,
  52. /**
  53. * RTL support
  54. *
  55. * @since 1.10.8
  56. * @property {Boolean} isRTL
  57. */
  58. isRTL : false,
  59. /**
  60. * Callback that fires when the window is resized
  61. * to resize the gallery items.
  62. *
  63. * @since 1.2.3
  64. * @method resize
  65. */
  66. resize: function()
  67. {
  68. if ( ! $(this.wrapSelector).length ) {
  69. return;
  70. }
  71. var winWidth = $(window).width(),
  72. wrap = $(this.wrapSelector),
  73. wrapWidth = wrap[0].getBoundingClientRect().width,
  74. numCols = winWidth > 480 ? Math.ceil(wrapWidth/this.itemWidth) : 1,
  75. items = wrap.find(this.itemSelector),
  76. itemWidth = wrapWidth/numCols,
  77. itemHeight = itemWidth * this.itemHeight,
  78. direction = this.isRTL ? 'right' : 'left';
  79. // Browser bug fix. One column images are streched otherwise.
  80. if ( 1 === numCols ) {
  81. itemWidth -= 0.5;
  82. }
  83. // Set the item width and height.
  84. items.css({
  85. 'float' : direction,
  86. 'height' : itemHeight + 'px',
  87. 'width' : itemWidth + 'px'
  88. });
  89. }
  90. };
  91. })(jQuery);