<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-12">
<div class="photo-gallery-popup d-flex justify-content-center gallery-link">Click For Photos</div>
<!-- START PHOTO GALLERY WRAPPER -->
<!-- <section class="photo-gallery-wrapper"> -->
<div class="container">
<div class="row d-flex justify-content-center align-items-center">
<!-- START PHOTO GALLERY -->
<div id="magnific-gallery" class="container photo-gallery white-popup mfp-hide d-flex flex-column col-12 col-sm-8 col-xl-6">
<!-- START PHOTO TOOLBAR -->
<div class="toolbar"></div>
<!-- END PHOTO TOOLBAR -->
<!-- MAIN GALLERY IMAGE -->
<div class="gallery-slider">
<!-- MAIN IMG -->
<div class="main-img">
<img src="https://images.unsplash.com/photo-1516540310664-bd1ee8c979fc?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=9fc7af02c1efd8e89835e47267495d3c" class="img-fluid">
</div>
<!-- END MAIN IMG -->
<!-- MAIN IMG -->
<div class="main-img">
<img src="https://images.unsplash.com/photo-1529793618684-30573c8734a7?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7c714e5ae3cf957bbc6d596202681706" class="img-fluid">
</div>
<!-- END MAIN IMG -->
<!-- MAIN IMG -->
<div class="main-img">
<img src="https://images.unsplash.com/photo-1506875644286-0fa3dc4df91f?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f89a37f488ed856df8259cd569fb9597" class="img-fluid">
</div>
<!-- END MAIN IMG -->
<!-- MAIN IMG -->
<div class="main-img">
<img src="https://images.unsplash.com/photo-1470921346718-b615f097684b?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=259d9c7d2c8cd1e03f24d74315f7ab0b" class="img-fluid">
</div>
<!-- END MAIN IMG -->
<!-- MAIN IMG -->
<div class="main-img">
<img src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=cb90cc176910c4c3ddfdc2f00db45af9" class="img-fluid">
</div>
<!-- MAIN IMG -->
<!-- MAIN IMG -->
<div class="main-img">
<img src="https://images.unsplash.com/photo-1446770145316-10a05382c470?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=3121ef6d7f0799182d0d151ba430729b" class="img-fluid">
</div>
<!-- MAIN IMG -->
</div>
<!-- END MAIN GALLERY IMAGE -->
<!-- THUMBNAIL SLIDER -->
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="photos" role="tabpanel" aria-labelledby="-photos-tab">
<div class="thumb-slider">
<div class="thumb"><img src="https://images.unsplash.com/photo-1516540310664-bd1ee8c979fc?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=9fc7af02c1efd8e89835e47267495d3c" /></div>
<div class="thumb"><img src="https://images.unsplash.com/photo-1529793618684-30573c8734a7?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7c714e5ae3cf957bbc6d596202681706" /></div>
<div class="thumb"><img src="https://images.unsplash.com/photo-1506875644286-0fa3dc4df91f?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f89a37f488ed856df8259cd569fb9597" /></div>
<div class="thumb"><img src="https://images.unsplash.com/photo-1470921346718-b615f097684b?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=259d9c7d2c8cd1e03f24d74315f7ab0b" /></div>
<div class="thumb"><img src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=cb90cc176910c4c3ddfdc2f00db45af9" /></div>
<div class="thumb"><img src="https://images.unsplash.com/photo-1446770145316-10a05382c470?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=3121ef6d7f0799182d0d151ba430729b" /></div>
</div>
</div>
<!-- END THUMBNAIL SLIDER -->
</div>
</div>
</div>
</div>
</div><!-- end col -->
</div><!-- end row -->
</div><!-- end container -->
@charset "UTF-8";
p,
h1,
h2,
h3,
a {
font-size: 12px;
}
body {
background-color: #5559eb;
}
ul {
list-style-type: none;
}
.mfp-container {
padding-left: 0px !important;
padding-right: 0px !important;
min-height: 100vh;
}
.toolbar {
height: 53px;
background-color: #eaeaf0;
top: 0;
width: 100%;
font-size: 1.6rem;
border-radius: 4px 4px 0 0;
}
.toolbar ul {
display: flex;
align-items: center;
height: 53px;
}
.toolbar ul li {
margin-right: 30px;
}
.toolbar ul li a {
color: blue;
}
.photo-gallery {
background: #fff;
border-radius: 4px;
min-height: 100vh;
position: relative;
padding-left: 0 !important;
padding-right: 0 !important;
}
@media only screen and (max-width: 768px) {
.photo-gallery {
height: 100%;
width: 60vw;
}
}
@media only screen and (min-width: 992px) {
.photo-gallery {
max-width: 55vw;
}
}
.photo-gallery .gallery-slider {
padding: 10px 25px;
box-sizing: border-box;
}
.photo-gallery .gallery-slider .slick-next,
.photo-gallery .gallery-slider .slick-prev {
z-index: 9999;
height: 10px !important;
}
.photo-gallery .gallery-slider .slick-next:before,
.photo-gallery .gallery-slider .slick-prev:before {
color: blue;
font-size: 3.5rem;
font-family: FontAwesome;
}
.photo-gallery .gallery-slider .slick-prev {
left: 13px;
}
.photo-gallery .gallery-slider .slick-prev:before {
font-size: 31px;
content: "";
font-family: FontAwesome;
color: #333;
}
.photo-gallery .gallery-slider .slick-next {
right: 13px;
}
.photo-gallery .gallery-slider .slick-next:before {
font-size: 31px;
content: "";
font-family: FontAwesome;
color: #333;
}
.photo-gallery .gallery-slider .main-img img {
display: block;
margin: 0 auto;
max-height: 18rem;
max-width: 80%;
cursor: pointer;
}
@media only screen and (min-width: 768px) {
.photo-gallery .gallery-slider .main-img img {
max-width: 70%;
}
}
@media only screen and (min-width: 992px) {
.photo-gallery .gallery-slider .main-img img {
max-height: 35rem;
max-width: 70%;
}
}
.photo-gallery .photo-tabs {
margin-left: 15px;
display: flex;
font-size: 1.6rem;
max-height: 6.3rem;
width: 93%;
}
@media only screen and (min-width: 768px) {
.photo-gallery .photo-tabs {
justify-content: flex-start;
}
}
.photo-gallery .photo-tabs nav {
display: flex;
}
.photo-gallery .photo-tabs button {
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
color: lightblue;
text-align: left;
margin-bottom: 8px;
}
@media only screen and (max-width: 768px) {
.photo-gallery .photo-tabs button {
width: 12rem;
text-align: center;
}
}
.photo-gallery .thumb-slider {
padding: 15px 32px;
border-top: 1px solid #f4f5f7;
background-color: #fff;
}
.photo-gallery .thumb-slider .slick-next:before,
.photo-gallery .thumb-slider .slick-prev:before {
color: #f4f5f7;
font-size: 35px;
font-family: FontAwesome;
}
.photo-gallery .thumb-slider .slick-prev {
left: 13px;
}
.photo-gallery .thumb-slider .slick-prev:before {
font-size: 25px;
color: #333;
content: "";
font-family: FontAwesome;
}
.photo-gallery .thumb-slider .slick-next {
right: 13px;
}
.photo-gallery .thumb-slider .slick-next:before {
font-size: 25px;
content: "";
font-family: FontAwesome;
color: #333;
}
.photo-gallery .thumb-slider .thumb {
height: 120px;
opacity: 0.5;
}
.photo-gallery .thumb-slider .thumb img {
cursor: pointer;
padding-left: 0.5rem;
padding-right: 0.5rem;
max-width: 14rem;
margin: 10px auto;
border-radius: 4px;
}
.photo-gallery .thumb-slider .slick-current {
opacity: 1;
}
.product-popup-close {
color: black;
}
.product-popup-close:before {
content: "";
font-family: Ionicons;
content: "";
font-size: 2rem;
}
.gallery-link {
margin-top: 3rem;
cursor: pointer;
color: #fff;
}
.slick-current {
opacity: 1;
}
$('.photo-gallery-popup').magnificPopup({
items: {
src: '#magnific-gallery',
type: 'inline'
},
closeMarkup:"<button title='%title%' type='button' class='mfp-close product-popup-close'></button>",
midClick: true,
focus: '#productPhotos',
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in',
callbacks: {
open: function() {
$('.gallery-slider').slick('setPosition');
$('.thumb-slider').slick('setPosition');
}
}
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('.thumb-slider').slick('setPosition');
});
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
$(document).ready(function(){
$('.gallery-slider').slick({
centerMode: true,
focusOnSelect: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.thumb-slider'
});
$('.thumb-slider').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.gallery-slider',
dots: false,
arrows: true,
centerMode: false,
centerPadding: '20px',
focusOnSelect: true,
responsive: [
{
breakpoint: 450,
settings: {
slidesToShow: 1
}
},
{
breakpoint: 700,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 1500,
settings: {
slidesToShow: 3
}
}
]
});
});
