Listen
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h3 class="main-title">
Event Gallery
<span class="headingOverlayText">Gallery</span>
</h3>
</div>
</div>
<div class="row gallery-row">
<!-- Gallery Item 1 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 img-thumbnail gallery-item">
<a class="lightbox" href="https://vepimg.b8cdn.com/uploads/vjfnew/10084/uploads/vjf/content/misc/16952359571.jpg" data-fancybox="gallery">
<img class="img-responsive" src="https://vepimg.b8cdn.com/uploads/vjfnew/10084/uploads/vjf/content/misc/16952359571.jpg" alt="Gallery Image 1" />
</a>
</div>
<!-- Gallery Item 2 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 img-thumbnail gallery-item">
<a class="lightbox" href="https://vepimg.b8cdn.com/uploads/vjfnew/10084/uploads/vjf/content/misc/16952359792.jpg" data-fancybox="gallery">
<img class="img-responsive" src="https://vepimg.b8cdn.com/uploads/vjfnew/10084/uploads/vjf/content/misc/16952359792.jpg" alt="Gallery Image 2" />
</a>
</div>
</div>
</div>
.gallery-item,.gallery-item1,.gallery-item2,.gallery-item3 {
border: none !important;
margin-bottom: 20px;
padding: 5px;
}
.isotope-pager .previous_btn, .isotope-pager .next_btn {
display: inline-block;
padding: 5px 10px;
color: #242424;
font-size: 14px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #242424;
background: #fff;
border-radius: 5px;
vertical-align: baseline;
}
.isotope-pager .pager {
display: inline-block;
padding: 5px 10px;
color: #242424;
font-size: 14px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #242424;
background: #fff;
}
.isotope-pager .pager.active {
background: #0c1223;
color: #fff;
}
.isotope-pager2 .previous_btn, .isotope-pager2 .next_btn {
display: inline-block;
padding: 5px 10px;
color: #242424;
font-size: 14px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #242424;
background: #fff;
border-radius: 5px;
vertical-align: baseline;
}
.isotope-pager2 .pager {
display: inline-block;
padding: 5px 10px;
color: #242424;
font-size: 14px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #242424;
background: #fff;
}
.isotope-pager2 .pager.active {
background: #0c1223;
color: #fff;
}
.gallery-row .lightbox:before {
position: absolute;
top: 50%;
left: 50%;
margin-top: -13px;
margin-left: -13px;
opacity: 0;
color: #fff;
font-size: 26px;
font-family: 'Glyphicons Halflings';
content: '\e003';
pointer-events: none;
z-index: 9000;
transition: 0.4s;
}
.gallery-row .lightbox:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: rgba(0, 0, 0, 0.314);
content: '';
transition: 0.4s;
}
.gallery-row .lightbox:hover:after,
.gallery-row .lightbox:hover:before {
opacity: 1;
}
/*******/
.gallery-row1 .lightbox:before {
position: absolute;
top: 50%;
left: 50%;
margin-top: -13px;
margin-left: -13px;
opacity: 0;
color: #fff;
font-size: 26px;
font-family: 'Glyphicons Halflings';
content: '\e003';
pointer-events: none;
z-index: 9000;
transition: 0.4s;
}
.gallery-row1 .lightbox:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: rgba(0, 0, 0, 0.314);
content: '';
transition: 0.4s;
}
.gallery-row1 .lightbox:hover:after,
.gallery-row1 .lightbox:hover:before {
opacity: 1;
}
<script>
$(document).ready(function () {
var itemSelector_1 = '.gallery-item';
var $container1 = $('.gallery-row');
$container1.imagesLoaded(function () {
$container1.isotope({
itemSelector: itemSelector_1,
masonry: {
horizontalOrder: true,
},
});
});
var responsiveIsotope = [
[480, 4],
[720, 6],
];
var itemsPerPageDefault = 4;
var itemsPerPage = 16;
var currentNumberPages = 1;
var currentPage = 1;
var startPage = 1;
var currentFilter = '*';
var filterAtribute = 'data-filter';
var pageAtribute = 'data-page';
var pagerClass = 'isotope-pager';
function changeFilter(selector) {
$container1.isotope({
filter: selector,
});
}
function goToPage(n) {
currentPage = n;
var selector = itemSelector_1;
selector += '[' + pageAtribute + '="' + currentPage + '"]';
changeFilter(selector);
}
function setPagination() {
var SettingsPagesOnItems = function () {
var itemsLength = $container1.children(itemSelector_1).length;
var pages = Math.ceil(itemsLength / itemsPerPage);
var item = 1;
var page = 1;
var selector = itemSelector_1;
selector += currentFilter != '*' ? '[' + filterAtribute + '="' + currentFilter + '"]' : '';
$container1.children(selector).each(function () {
if (item > itemsPerPage) {
page++;
item = 1;
}
$(this).attr(pageAtribute, page);
item++;
});
currentNumberPages = page;
};
var CreatePagers = function () {
var $isotopePager =
$('.' + pagerClass).length == 0 ? $('<div class="' + pagerClass + ' text-center"></div>') : $('.' + pagerClass);
$isotopePager.html('');
var $page_prev_btn = $('<a type="button" class="btn btn-primary previous_btn">Previous</a>');
var $page_next_btn = $('<a type="button" class="btn btn-primary next_btn">Next</a>');
$page_prev_btn.appendTo($isotopePager);
for (var i = 0; i < currentNumberPages; i++) {
var $pager = $('<a href="javascript:void(0);" class="pager" ' + pageAtribute + '="' + (i + 1) + '"></a>');
$pager.html(i + 1);
$pager.click(function () {
var page = $(this).eq(0).attr(pageAtribute);
$('.isotope-pager a').removeClass('active');
$(this).addClass('active');
goToPage(page);
});
$pager.appendTo($isotopePager);
$isotopePager.find('a.pager:first').addClass('active');
}
$page_next_btn.appendTo($isotopePager);
$container1.after($isotopePager);
$page_prev_btn.click(function () {
if (currentPage > startPage) {
$('.previous_btn').removeAttr('disabled');
var page = currentPage - 1 < startPage ? startPage : currentPage - 1;
$('.isotope-pager a').removeClass('active');
$('.pager[data-page="' + page + '"]').addClass('active');
goToPage(page);
} else {
$('.previous_btn').attr('disabled', 'disabled');
}
});
$page_next_btn.click(function () {
if (currentPage < currentNumberPages) {
$('.next_btn').removeAttr('disabled');
var page = currentPage + 1 > currentNumberPages ? currentNumberPages : currentPage + 1;
$('.isotope-pager a').removeClass('active');
$('.pager[data-page="' + page + '"]').addClass('active');
goToPage(page);
} else {
$('.next_btn').attr('disabled', 'disabled');
}
});
};
SettingsPagesOnItems();
CreatePagers();
}
setPagination();
goToPage(1);
});
</script>