component: Gallery Masonry

[NautHnil]

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