Gallery
Showcase your latest works by creative professionals across industries.
Gallery #1
HTML:
<div class="position-relative w-lg-60 mx-auto">
<div class="row mx-gutters-2">
<div class="col-5 align-self-end px-2 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../assets/img/1920x1080/img2.jpg"
data-fancybox="lightbox-gallery-hidden"
data-caption="Front in frames - image #01"
data-speed="700">
<img class="img-fluid rounded" src="../assets/img/320x320/img1.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-7 px-2 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../assets/img/1920x1080/img4.jpg"
data-fancybox="lightbox-gallery-hidden"
data-caption="Front in frames - image #02"
data-speed="700">
<img class="img-fluid rounded" src="../assets/img/450x450/img1.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-5 offset-1 px-2 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../assets/img/1920x1920/img1.jpg"
data-fancybox="lightbox-gallery-hidden"
data-caption="Front in frames - image #03"
data-speed="700">
<img class="img-fluid rounded" src="../assets/img/280x310/img1.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
<div class="col-5 px-2 mb-3">
<a class="js-fancybox u-media-viewer" href="javascript:;"
data-src="../assets/img/1920x1080/img3.jpg"
data-fancybox="lightbox-gallery-hidden"
data-caption="Front in frames - image #04"
data-speed="700">
<img class="img-fluid rounded" src="../assets/img/300x180/img1.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<figure class="w-100 u-content-centered-y z-index-minus-1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1109.8 797.1" style="enable-background:new 0 0 1109.8 797.1;" xml:space="preserve">
<path class="u-fill-primary" opacity=".05" d="M105.1,267.1C35.5,331.5-3.5,423,0.3,517.7c5.8,145.3,110.7,314.2,588,273.1c753-64.7,481.3-358.3,440.4-398.3
c-4-3.9-7.9-7.9-11.7-12L761.9,104.8C639.4-27.6,432.5-35.6,299.9,87L105.1,267.1z"/>
</svg>
</figure>
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSPopup.init('.js-fancybox');
});
</script>
Gallery #2
HTML:
<div class="cbp"
data-layout="mosaic"
data-animation="quicksand"
data-x-gap="15"
data-y-gap="15"
data-load-more-selector="#cubeLoadMore"
data-load-more-action="auto"
data-load-items-amount="4"
data-media-queries='[
{"width": 1500, "cols": 4},
{"width": 1100, "cols": 4},
{"width": 800, "cols": 3},
{"width": 480, "cols": 2},
{"width": 400, "cols": 2}
]'>
<div class="cbp-item">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="../assets/img/1920x1080/img28.jpg" data-title="Front in frames - image #01">
<img class="img-fluid rounded" src="../assets/img/500x805/img1.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<div class="cbp-item">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="../assets/img/1920x1080/img27.jpg" data-title="Front in frames - image #02">
<img class="img-fluid rounded" src="../assets/img/380x227/img1.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<div class="cbp-item">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="../assets/img/1920x1920/img16.jpg" data-title="Front in frames - image #03">
<img class="img-fluid rounded" src="../assets/img/380x360/img23.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<div class="cbp-item">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="../assets/img/1920x1080/img23.jpg" data-title="Front in frames - image #04">
<img class="img-fluid rounded" src="../assets/img/380x227/img2.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<div class="cbp-item">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="../assets/img/1920x1080/img25.jpg" data-title="Front in frames - image #05">
<img class="img-fluid rounded" src="../assets/img/380x360/img24.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<div class="cbp-item">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="../assets/img/1920x1080/img21.jpg" data-title="Front in frames - image #06">
<img class="img-fluid rounded" src="../assets/img/380x360/img22.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<div class="cbp-item">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="../assets/img/1920x1080/img26.jpg" data-title="Front in frames - image #07">
<img class="img-fluid rounded" src="../assets/img/380x227/img3.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/cubeportfolio/css/cubeportfolio.min.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.cubeportfolio.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of cubeportfolio
$.HSCore.components.HSCubeportfolio.init('.cbp');
});
</script>
Gallery #3
- Show all
- Branding
- Abstract
- Graphic
- Illustration
HTML:
<div class="container u-cubeportfolio">
<ul id="cubeFilter" class="list-inline cbp-l-filters-alignRight d-flex">
<li class="list-inline-item cbp-filter-item cbp-filter-item-active u-cubeportfolio__item mr-auto" data-filter="*">Show all</li>
<li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter=".branding">Branding</li>
<li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter=".abstract">Abstract</li>
<li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter=".graphic">Graphic</li>
<li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter=".illustration">Illustration</li>
</ul>
<div class="cbp mb-7"
data-controls="#cubeFilter"
data-animation="quicksand"
data-x-gap="16"
data-y-gap="16"
data-load-more-selector="#cubeLoadMore"
data-load-more-action="auto"
data-load-items-amount="2"
data-media-queries='[
{"width": 1500, "cols": 4},
{"width": 1100, "cols": 4},
{"width": 800, "cols": 3},
{"width": 480, "cols": 2},
{"width": 300, "cols": 1}
]'>
<div class="cbp-item rounded abstract">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="../assets/img/1920x1920/img2.jpg" data-title="Dashboard<br>by Paul Flavius">
<img src="../assets/img/500x700/img1.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<div class="cbp-item rounded branding">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="../assets/img/1920x1080/img9.jpg" data-title="World Clock<br>by Alex">
<img src="../assets/img/480x320/img1.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<div class="cbp-item rounded abstract">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="../assets/img/1920x1920/img10.jpg" data-title="To-Do Dashboard<br>by Tiberiu Neamu">
<img src="../assets/img/500x700/img5.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
<div class="cbp-item rounded branding">
<div class="cbp-caption">
<a class="cbp-lightbox u-media-viewer" href="../assets/img/1920x1920/img4.jpg" data-title="Events and More<br>by Tiberiu Neamu">
<img src="../assets/img/450x450/img7.jpg" alt="Image Description">
<span class="u-media-viewer__container">
<span class="u-media-viewer__icon">
<span class="fa fa-plus u-media-viewer__icon-inner"></span>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/cubeportfolio/css/cubeportfolio.min.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.cubeportfolio.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of cubeportfolio
$.HSCore.components.HSCubeportfolio.init('.cbp');
});
</script>
Gallery #4
HTML:
<div class="js-slick-carousel u-slick u-slick--gutters-2"
data-infinite="true"
data-slides-show="1"
data-slides-scroll="1"
data-center-mode="true"
data-center-padding="200px"
data-pagi-classes="text-center u-slick__pagination mt-5 mb-0"
data-responsive='[{
"breakpoint": 992,
"settings": {
"centerPadding": "120px"
}
}, {
"breakpoint": 768,
"settings": {
"centerPadding": "80px"
}
}, {
"breakpoint": 554,
"settings": {
"centerPadding": "50px"
}
}]'>
<div class="js-slide rounded u-bg-img-hero min-height-450" style="background-image: url(../assets/img/1200x800/img1.jpg);"></div>
<div class="js-slide rounded u-bg-img-hero min-height-450" style="background-image: url(../assets/img/1200x800/img2.jpg);"></div>
<div class="js-slide rounded u-bg-img-hero min-height-450" style="background-image: url(../assets/img/1200x800/img3.jpg);"></div>
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Gallery #5
HTML:
<div class="js-slick-carousel u-slick u-slick--gutters-2"
data-infinite="true"
data-slides-show="2"
data-slides-scroll="1"
data-center-mode="true"
data-center-padding="200px"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2,
"centerPadding": "120px"
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1,
"centerPadding": "80px"
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1,
"centerPadding": "50px"
}
}]'>
<div class="js-slide rounded u-bg-img-hero min-height-300" style="background-image: url(../assets/img/900x450/img6.jpg);"></div>
<div class="js-slide rounded u-bg-img-hero min-height-300" style="background-image: url(../assets/img/900x450/img7.jpg);"></div>
<div class="js-slide rounded u-bg-img-hero min-height-300" style="background-image: url(../assets/img/900x450/img8.jpg);"></div>
<div class="js-slide rounded u-bg-img-hero min-height-300" style="background-image: url(../assets/img/900x450/img9.jpg);"></div>
<div class="js-slide rounded u-bg-img-hero min-height-300" style="background-image: url(../assets/img/900x450/img10.jpg);"></div>
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>