<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 ---------->
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lightgallery.min.css" rel="stylesheet">
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/js/lightgallery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
</head>
<body>
<section id="lookbook">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-md-8" id="child_bg_main">
<div class="row justify-content-self">
<div class="col-md-12">
<div class="my-grid grid" data-masonry='{ "itemSelector": ".item", "columnWidth": auto, "horizontalOrder": true }'>
<div class="item">
<div class="demo-gallery">
<ul id="lightgallery">
<li data-src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg"
data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it" data-tweet-text="share on twitter ">
<a href="">
<img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg">
</a>
</li>
<li data-src="https://i.pinimg.com/originals/86/d7/5c/86d75c395349ee09bcbc94008ae20250.jpg"
data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it" data-tweet-text="share on twitter ">
<a href="">
<img class="img-responsive" src="https://i.pinimg.com/originals/86/d7/5c/86d75c395349ee09bcbc94008ae20250.jpg">
</a>
</li>
<li data-src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg"
data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it" data-tweet-text="share on twitter ">
<a href="">
<img class="img-responsive" src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg">
</a>
</li>
<li data-src="https://cdn.mos.cms.futurecdn.net/FUE7XiFApEqWZQ85wYcAfM.jpg"
data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it" data-tweet-text="share on twitter ">
<a href="">
<img class="img-responsive" src="https://cdn.mos.cms.futurecdn.net/FUE7XiFApEqWZQ85wYcAfM.jpg">
</a>
</li>
</ul>
</div>
</div>
<div class="item">
<div class="demo-gallery">
<ul id="lightgallery_2">
<li data-src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg"
data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it" data-tweet-text="share on twitter ">
<a href="">
<img class="img-responsive" src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
body {
background: #F6F9FC;
}
* {
margin: 0;
padding: 0;
}
/*pinterest css*/
.my-grid {
width: 90%;
margin: 15px auto;
}
.item {
width: 220px;
background: #fff;
float: left;
margin-right: 15px;
margin-bottom: 15px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
}
.item img {
width: 100%;
}
/*pinterest css end*/
.small {
font-size: 11px;
color: #999;
display: block;
margin-top: -10px
}
.cont {
text-align: center;
}
.page-head {
padding: 60px 0;
text-align: center;
}
.page-head .lead {
font-size: 18px;
font-weight: 400;
line-height: 1.4;
margin-bottom: 50px;
margin-top: 0;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-decoration: none;
}
.btn-lg {
border-radius: 2px;
font-size: 18px;
line-height: 1.33333;
padding: 10px 16px;
}
.btn-primary:hover {
background-color: #fff;
color: #152836;
}
.btn-primary {
background-color: #152836;
border-color: #0e1a24;
color: #ffffff;
}
.btn-primary {
border-color: #eeeeee;
color: #eeeeee;
transition: color 0.1s ease 0s, background-color 0.15s ease 0s;
}
.page-head h1 {
font-size: 42px;
margin: 0 0 20px;
color: #FFF;
position: relative;
display: inline-block;
}
.page-head h1 .version {
bottom: 0;
color: #ddd;
font-size: 11px;
font-style: italic;
position: absolute;
width: 58px;
right: -58px;
}
.demo-gallery > ul {
margin-bottom: 0;
padding-left: 15px;
}
.demo-gallery > ul > li {
margin-bottom: 15px;
width: 180px;
display: inline-block;
margin-right: 15px;
list-style: outside none none;
}
.demo-gallery > ul > li a {
border: 3px solid #FFF;
border-radius: 3px;
display: block;
overflow: hidden;
position: relative;
float: left;
}
.demo-gallery > ul > li a > img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery > ul > li a:hover > img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
opacity: 1;
}
.demo-gallery > ul > li a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery > ul > li a .demo-gallery-poster > img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery > ul > li a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .justified-gallery > a > img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery .justified-gallery > a:hover > img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
opacity: 1;
}
.demo-gallery .justified-gallery > a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery .justified-gallery > a .demo-gallery-poster > img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .video .demo-gallery-poster img {
height: 48px;
margin-left: -24px;
margin-top: -24px;
opacity: 0.8;
width: 48px;
}
.demo-gallery.dark > ul > li a {
border: 3px solid #04070a;
}
// lightgallery
$(document).ready(function() {
$('#lightgallery').lightGallery({
pager: true
});
$('#lightgallery_2').lightGallery({
pager: true
});
});
