Gallery

<div class="gallery">
    <a href='https://via.placeholder.com/800x532' class="main" title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
    <a href='https://via.placeholder.com/800x532' class="thumb" title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
    <a href='https://via.placeholder.com/800x532' class="thumb" title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
    <a href='https://via.placeholder.com/800x532' class="thumb" title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
    <a href='https://via.placeholder.com/800x532' class="thumb" title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
</div>
<div class="gallery">
  {% include '@link' with {
  'modifier': 'main',
  'link': 'https://via.placeholder.com/800x532',
  'text': '<img src="https://via.placeholder.com/800x532" alt="warme william" />'
  } %}
  {% include '@link' with {
  'modifier': 'thumb',
  'link': 'https://via.placeholder.com/800x532',
  'text': '<img src="https://via.placeholder.com/800x532" alt="warme william" />'
  } %}
  {% include '@link' with {
  'modifier': 'thumb',
  'link': 'https://via.placeholder.com/800x532',
  'text': '<img src="https://via.placeholder.com/800x532" alt="warme william" />'
  } %}
  {% include '@link' with {
  'modifier': 'thumb',
  'link': 'https://via.placeholder.com/800x532',
  'text': '<img src="https://via.placeholder.com/800x532" alt="warme william" />'
  } %}
  {% include '@link' with {
  'modifier': 'thumb',
  'link': 'https://via.placeholder.com/800x532',
  'text': '<img src="https://via.placeholder.com/800x532" alt="warme william" />'
  } %}
</div>
/* No context defined for this component. */
  • Content:
    .lg {
      .lg-toolbar {
        background-color: transparent;
      }
    
      .lg-actions {
        .lg-next,
        .lg-prev {
          width: auto;
        }
      }
    
      .lg-image {
        border-radius: 0;
      }
    }
    
    .gallery {
      > .main {
        @include tablet {
          @include make-mobile-column(12, 1%);
        }
    
        @include make-mobile-column(12);
    
        display: block;
        margin-bottom: $gutter-width;
    
        img {
          width: 100%;
        }
      }
    
      > .thumb {
        @include tablet {
          @include make-mobile-column(4, 1%);
          margin-bottom: 1%;
        }
        @include make-mobile-column(6);
    
        margin-bottom: $gutter-width;
      }
    }
    
  • URL: /components/raw/gallery/_gallery.scss
  • Filesystem Path: components/31-molecules/building-blocks/gallery/_gallery.scss
  • Size: 593 Bytes
  • Content:
    'use strict';
    
    (function ($) {
      $(document).ready(function () {
        var $gallery = $('.gallery');
    
        if ($gallery.length > 0) {
          $gallery.loadLightGallery();
        }
      });
    
    })(jQuery);
    
  • URL: /components/raw/gallery/gallery.binding.js
  • Filesystem Path: components/31-molecules/building-blocks/gallery/gallery.binding.js
  • Size: 191 Bytes
  • Content:
    /**
     * @file
     * Implements the jQuery light gallery plugin.
     *
     * @author
     * Gert-Jan Meire
     *
     */
    
    'use strict';
    
    (function ($) {
      $.fn.extend({
    
        /**
         * Creates a jQuery extension function.
         *
         */
        loadLightGallery: function () {
          $(this).lightGallery({
            download: false,
            getCaptionFromTitleOrAlt: false,
            counter: false
          });
    
        }
    
      });
    })(jQuery);
    
  • URL: /components/raw/gallery/gallery.functions.js
  • Filesystem Path: components/31-molecules/building-blocks/gallery/gallery.functions.js
  • Size: 405 Bytes

Gallery

The Gallery molecule uses the Light Gallery jQuery plugin to create slideshows of images. Just simply add this jQuery plugin and jQuery to your site to make it work.

It is important to note that anyone that wants to use this component for commercial purposes, should pay for a license! See the general README.md file for more information about the license when using this style guide!