component: Gallery

[NautHnil]

File: src/include/gallery.html

src/_sass/layouts/_components/_gallery.scss

src/js/plugins/jquery.magnific-popup.min.js src/js/plugins/imagesloaded.pkgd.min.js src/js/plugins/masonry.pkgd.min.js src/js/plugins/isotope.pkgd.min.js src/js/plugins/jquery.hoverdir.js src/js/main.js

src/_data/gallery.yml

HTML

---
title: Gallery
layout: default
revoslider: none

---

<h1 class="text-center">Gallery</h1>

<section class="bx-gallery" data-init="gallery">
    <div class="container">
        <nav class="bx-filters group-filter text-center text-uppercase" data-type="filter-isotope">
            <a href="#" title="" data-filter="*" class="current">All <span class="count"></span></a>
            <a href="#" title="" data-filter=".branding">Branding <span class="count"></span></a>
            <a href="#" title="" data-filter=".decor">Decor <span class="count"></span></a>
            <a href="#" title="" data-filter=".fashion">Fashion <span class="count"></span></a>
            <a href="#" title="" data-filter=".photography">Photography <span class="count"></span></a>
        </nav>
        <div class="bx-gallery__container clearfix" data-init="isotope" data-imgloaded="imagesLoaded" data-cols="4" data-gap="30">
            <div class="grid-sizer"></div>
            {% for item in site.data.gallery %}
            <div class="bx-gallery__item bx-gallery__item--clearfix {{ item.filter }}" data-grid="grid-item">
                <div class="bx-gallery__media">
                    <div class="bx-gallery__img is-loading" data-gal="gallery">
                        <a href="{{ item.img }}" title="{{ item.name }}">
                            <img src="{{ item.img }}" alt="{{ item.name }}">
                            <div class="bx-gallery__hover bx-gallery__hover--text-inside">
                                <div class="bx-gallery__info">
                                    <p class="bx-gallery__title">{{ item.name }}</p>
                                    <p class="bx-gallery__author"><small>{{ item.author }}</small></p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <!-- /.bx-gallery__item -->
            {% endfor %}
        </div>
    </div>
</section>

SCSS

/*
 * GALLERY
 * ========================================
 */

.bx-gallery {
  padding: 50px 0;
}

.bx-filters {
  margin-bottom: 60px;
  font-weight: 700;

  @extend .h4;

  a {
    display: inline-block;
    padding: 10px 30px;
  }

  .count {
    display: inline-block;
    vertical-align: middle;
    color: #999;

    @extend .h6;
  }

  .current {
    color: $brand-primary;
  }
}

@each $data-gap in 5, 10, 15, 30 {
  [data-gap="#{$data-gap}"] {
    margin: calc(-#{$data-gap}px / 2);

    .bx-gallery__item {
      padding: calc(#{$data-gap}px / 2);
    }
  }
}

[data-cols="3"] .bx-gallery__item--clearfix {
  @include media(">=md") {
    &:nth-of-type(4n+1) {
      clear: left;
    }

    &:nth-of-type(4n+4) {
      clear: right;
    }
  }
}

[data-cols="4"] .bx-gallery__item--clearfix {
  @include media(">=md") {
    &:nth-of-type(3n+1) {
      clear: left;
    }

    &:nth-of-type(3n+3) {
      clear: right;
    }
  }
}

.bx-gallery__item.bx-gallery__item--w2 {
  width: 100%;

  @include media(">=xs") {
    width: 50%;
  }
  @include media(">=sm") {
    width: 66.6667%;
  }
  @include media(">=md") {
    width: 50%;
  }
}

.bx-gallery__media {
  background: #fff;
}

.bx-gallery__img {
  overflow: hidden;
  position: relative;

  a {
    display: block;
  }

  img {
    width: 100%;
  }
}

.bx-gallery__hover {
  display: none;
  position: absolute;
  background: rgba(0,0,0,.5);
  width: 100%;
  height: 100%;

  &:after {
    color: #fff;
    font-size: 24px;
    z-index: 6;

    @include fa("\f002");
    @include center();
  }
}

.is-loading,
.is-broken {
  min-height: 150px;

  img {
    opacity: 0;
  }

  a:before,
  a:after {
    visibility: hidden !important;
  }
}

.is-loading {
  background: black url('../img/loading.gif') no-repeat center;
}

.is-broken {
  background: #be3730 url('../img/broken.png') no-repeat center;
}

.bx-gallery__info {
  padding: 15px;
}

.bx-gallery__title {
  line-height: 1.3;
  transition: all .3s ease;

  @extend .h5;
}

.bx-gallery__author:before {
  content: '\2014 \00A0';
}

.bx-gallery__hover--text-inside {
  text-align: center;

  &:after {
    display: none;
  }

  .bx-gallery__info {
    color: #bcbcbc;
    transform: translateY(-50%);

    @include absolute(50% !important,0);
  }

  .bx-gallery__title {
    color: #fff;
    line-height: 1.5;

    @extend .h4;

    &:hover {
      color: $brand-primary;
    }
  }

  .bx-gallery__author:after {
    content: '\2014 \00A0';
    margin-left: 3px;
  }
}

@for $cols from 1 through 12 {
  [data-cols="#{$cols}"] > * {
    float: left;
    width: 100%;

    @include media(">=xs", "<sm") {
      width: percentage(6 / 12);
    }
    @include media(">=sm", "<md") {
      width: percentage(4 / 12);
    }
    @include media(">=md") {
      width: percentage($cols / 12);
    }

    &[class*="--clearfix"] {
      @include media(">=xs", "<sm") {
        &:nth-of-type(2n+1) {
          clear: left;
        }

        &:nth-of-type(2n+2) {
          clear: right;
        }
      }
      @include media(">=sm", "<md") {
        &:nth-of-type(3n+1) {
          clear: left;
        }

        &:nth-of-type(3n+3) {
          clear: right;
        }
      }
    }
  }
}

JQuery

// GALLERY MAGNIFIC POPUP
function galleryMagnificPopup() {
  $('[data-init="gallery"]').each(function() {
    $(this).magnificPopup({
      delegate: '[data-gal="gallery"] a',
      type: 'image',
      gallery:{
        enabled:true
      }
    });
  });
};

// Isotope
function isotopeInit(){
  $('[data-init="isotope"]').each(function(){
    var $el = $(this);
    var $container = $el.imagesLoaded(function() {
      $container.isotope({
        itemSelector: '[data-grid="grid-item"]',
        percentPosition: true,
        getSortData: {
          name: '.name',
          price: '.price'
        },
        masonry: {
          columnWidth: '.grid-sizer'
        }
      });
    });
  });

  // Count number item
  $('[data-type="filter-isotope"] a').each(function() {
    var $el = $(this),
        _textFilter = $el.data('filter').replace('.',''),
        _length = 0;

    if(_textFilter == "*") {
      _length = $('[data-init="isotope"]').children().length;

      $el.find('.count').text('(' + (_length - 1) + ')');
    } else {
      _length = $('[data-init="isotope"]').find('.' + _textFilter).children().length;

      $el.find('.count').text('(' + _length + ')');
    }
  });

  // Click filter item
  $('[data-type="filter-isotope"] a').on('click', function(e){
      e.preventDefault();
      var filterValue = $(this).attr('data-filter');
      var sortValue = $(this).attr('data-sort');
      var textValue = $(this).text();

      $(this).parent().find('.current').removeClass('current');
      $(this).addClass('current');

      $(this).parents('.dropdown').find('.btn-name').text(textValue);

      if($(this).parent().hasClass('group-filter')){
        $('[data-init="isotope"]').isotope({
            filter: filterValue
        });
      } else if($(this).parent().hasClass('group-sort')){
        $('[data-init="isotope"]').isotope({
            sortBy: sortValue
        });
      }
  });
};

// Masonry
function masonryInit(){
  var $grid = $('[data-init="masonry"]').imagesLoaded( function() {
    // init Masonry after all images have loaded
    $grid.masonry({
      itemSelector: '[data-grid="grid-item"]',
      columnWidth: '.grid-sizer',
      percentPosition: true
    });
  });
};

// ImagesLoaded
function imagesLoadedInit() {
  var imgLoad = imagesLoaded($('[data-imgloaded="imagesLoaded"]'));
  imgLoad.on('progress', onProgress);
};

// triggered after each item is loaded
function onProgress( imgLoad, image ) {
  // change class if the image is loaded or broken
  var $item = $( image.img ).parents('[class*="__img"]');
  $item.removeClass('is-loading');
  if ( !image.isLoaded ) {
    $item.addClass('is-broken');
  }
};

DATA

- img: https://placekitten.com/360/450
  name: Lorem ipsum dolor sit amet, consectetur
  author: Lorem ipsum
  filter: branding

- img: https://placekitten.com/361/451
  name: Nulla lobortis mauris justo, in pellentesque
  author: Nulla lobortis
  filter: decor

- img: https://placekitten.com/362/452
  name: Pellentesque arcu nulla, lobortis quis
  author: Pellentesque arcu
  filter: fashion

- img: https://placekitten.com/363/453
  name: Phasellus eget tristique diam, ut iaculis metus
  author: Phasellus eget
  filter: photography

- img: https://placekitten.com/364/454
  name: Maecenas consequat, dui nec facilisis tempor
  author: Maecenas consequat
  filter: branding

- img: https://placekitten.com/365/455
  name: Duis et neque rutrum augue fringilla sagittis
  author: Duis et
  filter: branding

- img: https://placekitten.com/366/456
  name: Donec vel risus erat.
  author: Donec vel
  filter: decor

- img: https://placekitten.com/367/457
  name: Curabitur sodales nibh non ex facilisis rhoncus
  author: Curabitur sodales
  filter: fashion

- img: https://placekitten.com/368/458
  name: Quisque porta tellus vitae ante dictum
  author: Quisque porta
  filter: photography

[NautHnil]

Component: Gallery Standard

File: src/include/gallery-standard.html

src/_sass/layouts/_components/_gallery.scss

src/js/plugins/jquery.magnific-popup.min.js src/js/plugins/imagesloaded.pkgd.min.js src/js/plugins/masonry.pkgd.min.js src/js/plugins/isotope.pkgd.min.js src/js/plugins/jquery.hoverdir.js src/js/main.js

src/_data/gallery.yml

HTML

---
title: Gallery Standard
layout: default
revoslider: none
---

<h1 class="text-center">Gallery Standard</h1>

<section class="bx-gallery" data-init="gallery">
    <div class="container">
        <nav class="bx-filters group-filter text-center text-uppercase" data-type="filter-isotope">
            <a href="#" title="" data-filter="*" class="current">All <span class="count"></span></a>
            <a href="#" title="" data-filter=".branding">Branding <span class="count"></span></a>
            <a href="#" title="" data-filter=".decor">Decor <span class="count"></span></a>
            <a href="#" title="" data-filter=".fashion">Fashion <span class="count"></span></a>
            <a href="#" title="" data-filter=".photography">Photography <span class="count"></span></a>
        </nav>
        <div class="bx-gallery__container clearfix" data-init="isotope" data-imgloaded="imagesLoaded" data-cols="4" data-gap="30">
            <div class="grid-sizer"></div>
            {% for item in site.data.gallery %}
            <div class="bx-gallery__item bx-gallery__item--clearfix {{ item.filter }}" data-grid="grid-item">
                <div class="bx-gallery__media">
                    <div class="bx-gallery__img is-loading" data-gal="gallery">
                        <a href="{{ item.img }}" title="{{ item.name }}">
                            <img src="{{ item.img }}" alt="{{ item.name }}">
                            <div class="bx-gallery__hover"></div>
                        </a>
                    </div>
                    <div class="bx-gallery__info">
                        <p class="bx-gallery__title">{{ item.name }}</p>
                        <p class="bx-gallery__author"><small>{{ item.author }}</small></p>
                    </div>
                </div>
            </div>
            <!-- /.bx-gallery__item -->
            {% endfor %}
        </div>
    </div>
</section>

SCSS - JQuery - DATA (Lấy từ Component: Gallery Art)

[NautHnil]

Component: Gallery Masonry

File: src/include/gallery-masonry.html

src/_sass/layouts/_components/_gallery.scss

src/js/plugins/jquery.magnific-popup.min.js src/js/plugins/imagesloaded.pkgd.min.js src/js/plugins/masonry.pkgd.min.js src/js/plugins/isotope.pkgd.min.js src/js/plugins/jquery.hoverdir.js src/js/main.js

src/_data/gallery-masonry.yml

HTML

---
title: Gallery Masonry
layout: default
revoslider: none
---

<h1 class="text-center">Gallery Masonry</h1>

<section class="bx-gallery" data-init="gallery">
    <div class="container">
        <nav class="bx-filters group-filter text-center text-uppercase" data-type="filter-isotope">
            <a href="#" title="" data-filter="*" class="current">All <span class="count"></span></a>
            <a href="#" title="" data-filter=".branding">Branding <span class="count"></span></a>
            <a href="#" title="" data-filter=".decor">Decor <span class="count"></span></a>
            <a href="#" title="" data-filter=".fashion">Fashion <span class="count"></span></a>
            <a href="#" title="" data-filter=".photography">Photography <span class="count"></span></a>
        </nav>
        <div class="bx-gallery__container clearfix" data-init="isotope" data-imgloaded="imagesLoaded" data-cols="3" data-gap="30">
            <div class="grid-sizer"></div>
            {% for item in site.data.gallery-masonry %}
            <div class="bx-gallery__item bx-gallery__item--clearfix {{ item.width }} {{ item.filter }}" data-grid="grid-item">
                <div class="bx-gallery__media">
                    <div class="bx-gallery__img is-loading" data-gal="gallery">
                        <a href="{{ item.img }}" title="{{ item.name }}">
                            <img src="{{ item.img }}" alt="{{ item.name }}">
                            <div class="bx-gallery__hover"></div>
                        </a>
                    </div>
                    <div class="bx-gallery__info">
                        <p class="bx-gallery__title">{{ item.name }}</p>
                        <p class="bx-gallery__author"><small>{{ item.author }}</small></p>
                    </div>
                </div>
            </div>
            <!-- /.bx-gallery__item -->
            {% endfor %}
        </div>
    </div>
</section>

SCSS - JQuery (Lấy từ Component: Gallery Art)

DATA

- img: https://placekitten.com/555/328
  name: Lorem ipsum dolor sit amet, consectetur
  author: Lorem ipsum
  width: bx-gallery__item--w2
  filter: branding

- img: https://placekitten.com/360/450
  name: Nulla lobortis mauris justo, in pellentesque
  author: Nulla lobortis
  filter: decor

- img: https://placekitten.com/362/410
  name: Pellentesque arcu nulla, lobortis quis
  author: Pellentesque arcu
  filter: fashion

- img: https://placekitten.com/364/300
  name: Maecenas consequat, dui nec facilisis tempor
  author: Maecenas consequat
  filter: photography

- img: https://placekitten.com/365/412
  name: Duis et neque rutrum augue fringilla sagittis
  author: Duis et
  filter: branding

- img: https://placekitten.com/555/220
  name: Phasellus eget tristique diam, ut iaculis metus
  author: Phasellus eget
  width: bx-gallery__item--w2
  filter: branding

- img: https://placekitten.com/366/520
  name: Donec vel risus erat.
  author: Donec vel
  filter: decor

- img: https://placekitten.com/732/280
  name: Quisque porta tellus vitae ante dictum
  author: Quisque porta
  width: bx-gallery__item--w2
  filter: fashion

- img: https://placekitten.com/367/388
  name: Curabitur sodales nibh non ex facilisis rhoncus
  author: Curabitur sodales
  filter: photography

[NautHnil]

Component: Gallery Fullwide

File: src/include/gallery-fullwide.html

src/_sass/layouts/_components/_gallery.scss

src/js/plugins/jquery.magnific-popup.min.js src/js/plugins/imagesloaded.pkgd.min.js src/js/plugins/masonry.pkgd.min.js src/js/plugins/isotope.pkgd.min.js src/js/plugins/jquery.hoverdir.js src/js/main.js

src/_data/gallery-masonry.yml

HTML

---
title: Gallery Fullwide
layout: default
revoslider: none
---

<h1 class="text-center">Gallery Fullwide</h1>

<section class="bx-gallery" data-init="gallery">
    <nav class="bx-filters group-filter text-center text-uppercase" data-type="filter-isotope">
        <a href="#" title="" data-filter="*" class="current">All <span class="count"></span></a>
        <a href="#" title="" data-filter=".branding">Branding <span class="count"></span></a>
        <a href="#" title="" data-filter=".decor">Decor <span class="count"></span></a>
        <a href="#" title="" data-filter=".fashion">Fashion <span class="count"></span></a>
        <a href="#" title="" data-filter=".photography">Photography <span class="count"></span></a>
    </nav>
    <div class="bx-gallery__container clearfix" data-init="isotope" data-imgloaded="imagesLoaded" data-cols="3" data-gap="0">
        <div class="grid-sizer"></div>
        {% for item in site.data.gallery-masonry %}
        <div class="bx-gallery__item bx-gallery__item--clearfix {{ item.filter }}" data-grid="grid-item">
            <div class="bx-gallery__media">
                <div class="bx-gallery__img is-loading" data-gal="gallery">
                    <a href="{{ item.img }}" title="{{ item.name }}">
                        <img src="{{ item.img }}" alt="{{ item.name }}">
                        <div class="bx-gallery__hover bx-gallery__hover--text-inside">
                            <div class="bx-gallery__info">
                                <p class="bx-gallery__title">{{ item.name }}</p>
                                <p class="bx-gallery__author"><small>{{ item.author }}</small></p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- /.bx-gallery__item -->
        {% endfor %}
    </div>
</section>

SCSS - JQuery (Lấy từ Component: Gallery Art)

DATA (Lấy từ Component: Gallery Masonry)