Skip to content

Instantly share code, notes, and snippets.

@SushantPatial

SushantPatial/index.html

Created January 7, 2022 12:00
Show Gist options
  • Save SushantPatial/6589c7a2dddcf21c9cb5e16dcdc4ffee to your computer and use it in GitHub Desktop.
Save SushantPatial/6589c7a2dddcf21c9cb5e16dcdc4ffee to your computer and use it in GitHub Desktop.
Download ZIP
Masonry Slider Gallery With Lightbox
Raw
index.html
<div class="architecturalmillwork-lyt">
<div class="arch-slider">
<div class="arch-slider-item 3">
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img2.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img2.jpg" alt="Architectural Mill Work 1" style="width:241px">
</div>
</a>
</div>
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img3.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img3.jpg" alt="Architectural Mill Work 2" style="width:321px">
</div>
</a>
</div>
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img4.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img4.jpg" alt="Architectural Mill Work 3" style="width:567px">
</div>
</a>
</div>
</div>
<div class="arch-slider-item 2">
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img5.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img5.jpg" alt="Architectural Mill Work 4" style="width:423px">
</div>
</a>
</div>
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img6.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img6.jpg" alt="Architectural Mill Work 5" style="width:423px">
</div>
</a>
</div>
</div>
<div class="arch-slider-item 3">
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img7.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img7.jpg" alt="Architectural Mill Work 6" style="width:549px">
</div>
</a>
</div>
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img8.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img8.jpg" alt="Architectural Mill Work 7" style="width:293px">
</div>
</a>
</div>
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img9.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img9.jpg" alt="Architectural Mill Work Gallery 8" style="width:251px">
</div>
</a>
</div>
</div>
<div class="arch-slider-item 3">
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img10.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img10.jpg" alt="Architectural Mill Work 10" style="width:247px">
</div>
</a>
</div>
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img11.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img11.jpg" alt="Architectural Mill Work 11" style="width:290px">
</div>
</a>
</div>
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img12.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img12.jpg" alt="Architectural Mill Work 12" style="width:542px">
</div>
</a>
</div>
</div>
<div class="arch-slider-item 2">
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img13.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img13.jpg" alt="Architectural Mill Work 13" style="width:370px">
</div>
</a>
</div>
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img14.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img14.jpg" alt="Architectural Mill Work 14" style="width:370px">
</div>
</a>
</div>
</div>
<div class="arch-slider-item 3">
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img18.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img18.jpg" alt="Architectural Mill Work 18" style="width:265px">
</div>
</a>
</div>
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img19.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img19.jpg" alt="Architectural Mill Work 19" style="width:235px">
</div>
</a>
</div>
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img20.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img20.jpg" alt="Architectural Mill Work 20" style="width:505px">
</div>
</a>
</div>
</div>
<div class="arch-slider-item 2">
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img21.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img21.jpg" alt="Architectural Mill Work 21" style="width:393px">
</div>
</a>
</div>
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img22.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img22.jpg" alt="Architectural Mill Work 22" style="width:393px">
</div>
</a>
</div>
</div>
<div class="arch-slider-item 3">
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img23.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img23.jpg" alt="Architectural Mill Work 23" style="width:556px">
</div>
</a>
</div>
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img24.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img24.jpg" alt="Architectural Mill Work 24" style="width:306px">
</div>
</a>
</div>
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img25.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img25.jpg" alt="Architectural Mill Work 25" style="width:245px">
</div>
</a>
</div>
</div>
<div class="arch-slider-item 1">
<div class="arc-link-wrap">
<a href="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img26.jpg" class="arc-link">
<div class="arc-images">
<img src="https://cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/architecturalmillwork/img26.jpg" alt="Architectural Mill Work " style="width:906px">
</div>
</a>
</div>
</div>
</div>
</div>
Raw
script.js
$(document).ready(function () {
$(".arch-slider").slick({
slidesToShow: 3,
slidesToScroll: 1,
infinite: false,
arrows: true,
variableWidth: true,
prevArrow:
'<div class="prev"><svg width="23" height="39" viewBox="0 0 23 39" style="transform: scale(1);"><path id="_250_middle_right_copy_3" data-name="250 middle right copy 3" class="slideshow-arrow" d="M154.994,259.522L153.477,261l-18.471-18,18.473-18,1.519,1.48L138.044,243Z" transform="translate(-133 -225)"></path></svg></div>',
nextArrow:
'<div class="next"><svg width="23" height="39" viewBox="0 0 23 39" style="transform: scale(1);"><path id="_250_middle_right_copy_2" data-name="250 middle right copy 2" class="slideshow-arrow" d="M857.005,231.479L858.5,230l18.124,18-18.127,18-1.49-1.48L873.638,248Z" transform="translate(-855 -230)"></path></svg></div>',
responsive: [
{
breakpoint: 1000,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 650,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
$(window).on("load resize", slederResizer);
function slederResizer() {
$(".slick-slide").each(function () {
var w = 0;
$(this)
.find("img")
.each(function () {
if ($(this).width() > w) {
w = $(this).width();
}
});
$(this).css("width", w);
});
}
slederResizer();
$(".arch-slider").slickLightbox({
itemSelector: ".arc-link"
});
});
// Main content container
var $container = $(".arch-slider-item");
function loadmas() {
$container.packery({
// selector for entry content
itemSelector: ".arc-link-wrap",
percentPosition: true
});
}
// Masonry + ImagesLoaded
$container.imagesLoaded(function () {
loadmas();
});
$(window).resize(function () {
loadmas();
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/2.1.2/packery.pkgd.min.js"></script>
Raw
style.css
.arch-slider {
margin: 0;
padding: 30px 0;
background: #e8e8e8
}
.arc-images {
position: relative
}
.arc-images:before {
content: " ";
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 0;
z-index: 1
}
a.arc-link:hover .arc-images:before {
background: rgba(8,8,8,.75);
background: rgba(51,51,51,0.6) !important
}
.architecturalmillwork-lyt .slick-lightbox-close {
color: rgba(0,110,158,1) !important;
font-size: 26px !important;
width: 38px !important;
HEIGHT: 44px !important;
margin-top: 30px;
margin-right: 80px;
right: 0 !important;
top: 2px !important
}
.architecturalmillwork-lyt .slick-lightbox-close:before {
font-family: progallery-svg-font-icons !important;
display: inline-block;
vertical-align: middle;
line-height: 1 !important;
font-weight: 400;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
content: "\F10A" !important;
font-size: inherit;
color: rgba(0,0,0,1) !important
}
.arch-slider .slick-arrow {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
margin-top: -55px;
z-index: 111;
padding: 20px 38.5px;
cursor: pointer
}
.arch-slider .slick-arrow.next {
right: 0
}
.arch-slider .slick-arrow svg {
-webkit-filter: drop-shadow(0 1px .15px #b2b2b2);
filter: drop-shadow(0 1px .15px #b2b2b2);
display: inline-block
}
.slideshow-arrow {
fill: #e8e8e8
}
.arch-slider {
margin: 0;
padding: 30px 0;
background: #e8e8e8
}
.arc-images {
position: relative
}
.arc-images:before {
content: " ";
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 0;
z-index: 1
}
a.arc-link:hover .arc-images:before {
background: rgba(8,8,8,.75);
background: rgba(51,51,51,0.6) !important
}
.architecturalmillwork-lyt .slick-lightbox-inner {
background-color: rgba(232,232,232,1) !important;
z-index: 1111
}
.architecturalmillwork-lyt .slick-lightbox-inner .slick-arrow {
z-index: 111;
width: 100px;
height: 100px;
background-image: url(//cdn2.hubspot.net/hubfs/4795157/Idxcorporation_December2018/Images/arrow.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 27px;
margin-top: -50px
}
.architecturalmillwork-lyt .slick-lightbox-inner .slick-arrow:before {
display: none
}
.architecturalmillwork-lyt .slick-lightbox-inner .slick-prev {
left: 0
}
.architecturalmillwork-lyt .slick-lightbox-inner .slick-next {
right: 0;
transform: rotate(180deg)
}
.architecturalmillwork-lyt .slick-lightbox-close {
color: rgba(0,110,158,1) !important;
font-size: 26px !important;
width: 38px !important;
HEIGHT: 44px !important;
margin-top: 30px;
margin-right: 80px;
right: 0 !important;
top: 2px !important
}
.architecturalmillwork-lyt .slick-lightbox-close:before {
font-family: progallery-svg-font-icons !important;
display: inline-block;
vertical-align: middle;
line-height: 1 !important;
font-weight: 400;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
content: "\F10A" !important;
font-size: inherit;
color: rgba(0,0,0,1) !important
}
Raw
styles
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet" />
<link href="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css" rel="stylesheet" />
<link href="https://mreq.github.io/slick-lightbox/gh-pages/bower_components/slick-carousel/slick/slick-theme.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment