GalleryExpand Options

Option Description
inDuration Transition duration for opening the gallery in ms. Default: 300
outDuration Transition duration for closing the gallery in ms. Default: 200
responsiveThreshold Breakpoint for full width style in pixels. Default: 992
contentPadding Padding for content in the gallery in pixels. Default: 40
onShow Callback function that is fired when the gallery is opened.
defaultColor Fallback color for when color thief fails. Default: '#444'
primaryColor Primary color that overrides color thief. Default: null
secondaryColor Secondary color that overrides color thief. Default: null
fillScreen Enable the full width image transition style. Default: false
dynamicRouting Enable hash URL ids to allow dynamic routing. (Do not use with frameworks like Angular, Meteor, Vue, etc.) Default: false

Data Attributes

You can easily override the plugin options on individual galleryExpand components using data attributes. 


  <div
    class="gallery-expand"
    data-in-duration="300"
    data-out-duration="200"
    data-responsive-threshold="992"
    data-content-padding="40"
    data-default-color="#444"
    data-primary-color="#444"
    data-secondary-color="#444"
    data-fill-screen="false"
    data-dynamic-routing="false"
    >
    <!-- galleryExpand content -->
  </div>


Methods

You can programmatically open and close the GalleryExpand with our plugin methods.


// Open
$('.gallery-expand').galleryExpand('open');

// Close
$('.gallery-expand').galleryExpand('close');


Masonry

This theme utilizes Masonry for the card layout. We recommend initializing Masonry like we do below. If you are using images in your masonry items you will need imagesLoaded. 


var $masonry = $('.gallery');
$masonry.masonry({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.gallery-item',
  // use element for option
  columnWidth: '.gallery-item',
  // no transitions
  transitionDuration: 0
});

// layout Masonry after each image loads
$masonry.imagesLoaded(function() {
  $masonry.masonry('layout');
});


Filtering

You can add custom filters on masonry items by adding classes. Just add the class gallery-filter to your item and then a custom class denoting your filter. You can also add the class all instead of a custom class and it will always show up regardless of the filter. 


<!-- Visible in the custom-category filter -->
<div class="col l4 m6 s12 gallery-item gallery-expand gallery-filter custom-category">
  ...
</div>

<!-- Always Visible -->
<div class="col l4 m6 s12 gallery-item gallery-expand gallery-filter all">
  ...
</div>


<div class="categories-container">
  <ul class="categories container">
    <li><a href="#all">All</a></li>
    <li><a href="#custom-category">Custom Category</a></li>
  </ul>
</div>

Also make sure if you are using filters to initialize your Masonry on gallery-filter instead of gallery-item. 


$masonry.masonry({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.gallery-filter',
  // use element for option
  columnWidth: '.gallery-filter',
  // no transitions
  transitionDuration: 0
});


Mobile Responsive Styles

The GalleryExpand plugin has custom mobile styles for both the default and fillScreen transitions. This is controlled by the responsiveThreshold option. This options is a screen width in pixels that denotes when the plugin will switch to the mobile style.


// Only desktop style
$('.gallery-expand').galleryExpand({
  responsiveThreshold: 0
});

// Only mobile style
$('.gallery-expand').galleryExpand({
  responsiveThreshold: Infinity
});


Components in GalleryExpand

When using Materialize components within GalleryExpand you will probably need to reinitialize these components using the onShow callback.


$('.gallery-expand').galleryExpand({
  onShow: function(el) {

    // Carousel
    var carousel = el.find('.carousel.initialized');
    carousel.carousel({
      dist: 0,
      padding: 10
    });

    // Tabs
    $('ul.tabs').tabs();
  }
});




open_in_browser