Add sortable and fullwidth gallery of images on your website using these reusable blocks. Here is the code for Web-Boots theme’s gallery block elements as you can see in the demo.
Ensure to replace the text, image and video content in the demo code with your own content. Also smaller images with less than 350px height so that the carousel will look good without touching the bottom.
Gallery 1
<section class="wn-gallery wn-slider-carousel cid-rkNL8UM4Xk" id="gallery1-1o">
<div class="container">
<div>
<!-- Gallery -->
<div class="wn-gallery-row">
<div class="wn-gallery-layout-default">
<div>
<div>
<div class="wn-gallery-item wn-gallery-item--p1" data-video-url="false" data-tags="Awesome">
<div href="#lb-gallery1-1o" data-slide-to="0" data-toggle="modal">
<img src="assets/images/background1.jpg" alt="" title=""><span class="icon-focus"></span><span class="wn-gallery-title wn-fonts-style display-7">Type caption here</span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p1" data-video-url="false" data-tags="Responsive">
<div href="#lb-gallery1-1o" data-slide-to="1" data-toggle="modal">
<img src="assets/images/background2.jpg" alt="" title=""><span class="icon-focus"></span><span class="wn-gallery-title wn-fonts-style display-7">Type caption here</span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p1" data-video-url="false" data-tags="Creative">
<div href="#lb-gallery1-1o" data-slide-to="2" data-toggle="modal">
<img src="assets/images/background3.jpg" alt="" title=""><span class="icon-focus"></span><span class="wn-gallery-title wn-fonts-style display-7">Type caption here</span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p1" data-video-url="false" data-tags="Animated">
<div href="#lb-gallery1-1o" data-slide-to="3" data-toggle="modal">
<img src="assets/images/background4.jpg" alt="" title=""><span class="icon-focus"></span><span class="wn-gallery-title wn-fonts-style display-7">Type caption here</span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p1" data-video-url="false" data-tags="Awesome">
<div href="#lb-gallery1-1o" data-slide-to="4" data-toggle="modal">
<img src="assets/images/background5.jpg" alt="" title=""><span class="icon-focus"></span><span class="wn-gallery-title wn-fonts-style display-7">Type caption here</span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p1" data-video-url="false" data-tags="Awesome">
<div href="#lb-gallery1-1o" data-slide-to="5" data-toggle="modal">
<img src="assets/images/background6.jpg" alt="" title=""><span class="icon-focus"></span><span class="wn-gallery-title wn-fonts-style display-7">Type caption here</span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p1" data-video-url="false" data-tags="Responsive">
<div href="#lb-gallery1-1o" data-slide-to="6" data-toggle="modal">
<img src="assets/images/background7.jpg" alt="" title=""><span class="icon-focus"></span><span class="wn-gallery-title wn-fonts-style display-7">Type caption here</span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p1" data-video-url="false" data-tags="Animated">
<div href="#lb-gallery1-1o" data-slide-to="7" data-toggle="modal">
<img src="assets/images/background8.jpg" alt="" title=""><span class="icon-focus"></span><span class="wn-gallery-title wn-fonts-style display-7">Type caption here</span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Lightbox -->
<div data-app-prevent-settings="" class="wn-slider modal fade carousel slide" tabindex="-1" data-keyboard="true" data-interval="false" id="lb-gallery1-1o"><div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/background1.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background2.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background3.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background4.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background5.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background6.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background7.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background8.jpg" alt="" title="">
</div>
</div>
<a class="carousel-control carousel-control-prev" role="button" data-slide="prev" href="#lb-gallery1-1o"><span class="wns-left wn-iconfont" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
<a class="carousel-control carousel-control-next" role="button" data-slide="next" href="#lb-gallery1-1o"><span class="wns-right wn-iconfont" aria-hidden="true"></span><span class="sr-only">Next</span></a>
<a class="close" href="#" role="button" data-dismiss="modal"><span class="sr-only">Close</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Gallery 2
<section class="wn-gallery wn-slider-carousel cid-rkNL6kg1yF" id="gallery3-1m">
<div>
<div>
<!-- Gallery -->
<div class="wn-gallery-row">
<div class="wn-gallery-layout-default">
<div>
<div>
<div class="wn-gallery-item wn-gallery-item--p0" data-video-url="false" data-tags="Awesome">
<div href="#lb-gallery3-1m" data-slide-to="0" data-toggle="modal">
<img src="assets/images/background1.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p0" data-video-url="false" data-tags="Responsive">
<div href="#lb-gallery3-1m" data-slide-to="1" data-toggle="modal">
<img src="assets/images/background2.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p0" data-video-url="false" data-tags="Creative">
<div href="#lb-gallery3-1m" data-slide-to="2" data-toggle="modal">
<img src="assets/images/background3.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p0" data-video-url="false" data-tags="Animated">
<div href="#lb-gallery3-1m" data-slide-to="3" data-toggle="modal">
<img src="assets/images/background4.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p0" data-video-url="false" data-tags="Awesome">
<div href="#lb-gallery3-1m" data-slide-to="4" data-toggle="modal"><img src="assets/images/background5.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p0" data-video-url="false" data-tags="Awesome">
<div href="#lb-gallery3-1m" data-slide-to="5" data-toggle="modal">
<img src="assets/images/background6.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p0" data-video-url="false" data-tags="Responsive">
<div href="#lb-gallery3-1m" data-slide-to="6" data-toggle="modal">
<img src="assets/images/background7.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p0" data-video-url="false" data-tags="Animated">
<div href="#lb-gallery3-1m" data-slide-to="7" data-toggle="modal">
<img src="assets/images/background8.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Lightbox -->
<div data-app-prevent-settings="" class="wn-slider modal fade carousel slide" tabindex="-1" data-keyboard="true" data-interval="false" id="lb-gallery3-1m">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/background1.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background2.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background3.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background4.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background5.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background6.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background7.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background8.jpg" alt="" title="">
</div>
</div>
<a class="carousel-control carousel-control-prev" role="button" data-slide="prev" href="#lb-gallery3-1m"><span class="wns-left wn-iconfont" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
<a class="carousel-control carousel-control-next" role="button" data-slide="next" href="#lb-gallery3-1m"><span class="wns-right wn-iconfont" aria-hidden="true"></span><span class="sr-only">Next</span></a>
<a class="close" href="#" role="button" data-dismiss="modal"><span class="sr-only">Close</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Gallery 3
<section class="wn-gallery wn-slider-carousel cid-rkNL76fGIi" id="gallery2-1n">
<div class="container">
<div><!-- Filter -->
<div class="wn-gallery-filter container gallery-filter-active">
<ul buttons="0">
<li class="wn-gallery-filter-all"><a class="btn btn-md btn-primary-outline active display-7" href="">All</a></li>
</ul>
</div>
<!-- Gallery -->
<div class="wn-gallery-row">
<div class="wn-gallery-layout-default">
<div>
<div>
<div class="wn-gallery-item wn-gallery-item--p2" data-video-url="false" data-tags="Awesome">
<div href="#lb-gallery2-1n" data-slide-to="0" data-toggle="modal">
<img src="assets/images/background1.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p2" data-video-url="false" data-tags="Responsive">
<div href="#lb-gallery2-1n" data-slide-to="1" data-toggle="modal">
<img src="assets/images/background2.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p2" data-video-url="false" data-tags="Creative">
<div href="#lb-gallery2-1n" data-slide-to="2" data-toggle="modal">
<img src="assets/images/background3.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p2" data-video-url="false" data-tags="Animated">
<div href="#lb-gallery2-1n" data-slide-to="3" data-toggle="modal">
<img src="assets/images/background4.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p2" data-video-url="false" data-tags="Awesome">
<div href="#lb-gallery2-1n" data-slide-to="4" data-toggle="modal"><img src="assets/images/background5.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p2" data-video-url="false" data-tags="Awesome">
<div href="#lb-gallery2-1n" data-slide-to="5" data-toggle="modal">
<img src="assets/images/background6.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p2" data-video-url="false" data-tags="Responsive">
<div href="#lb-gallery2-1n" data-slide-to="6" data-toggle="modal"><img src="assets/images/background7.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
<div class="wn-gallery-item wn-gallery-item--p2" data-video-url="false" data-tags="Animated">
<div href="#lb-gallery2-1n" data-slide-to="7" data-toggle="modal">
<img src="assets/images/background8.jpg" alt="" title=""><span class="icon-focus"></span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Lightbox -->
<div data-app-prevent-settings="" class="wn-slider modal fade carousel slide" tabindex="-1" data-keyboard="true" data-interval="false" id="lb-gallery2-1n">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/background1.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background2.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background3.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background4.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background5.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background6.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background7.jpg" alt="" title="">
</div>
<div class="carousel-item">
<img src="assets/images/background8.jpg" alt="" title="">
</div>
</div>
<a class="carousel-control carousel-control-prev" role="button" data-slide="prev" href="#lb-gallery2-1n"><span class="wns-left wn-iconfont" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
<a class="carousel-control carousel-control-next" role="button" data-slide="next" href="#lb-gallery2-1n"><span class="wns-right wn-iconfont" aria-hidden="true"></span><span class="sr-only">Next</span></a>
<a class="close" href="#" role="button" data-dismiss="modal"><span class="sr-only">Close</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>