Open NautHnil opened 8 years ago
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)
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
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)
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
SCSS
JQuery
DATA