Lightbox Thumbnail
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Lightbox Gallery - With Thumbnails
WoodPecker using Bootstrap Cards to set the layouts for a Lightbox Gallery. This gives you the flexibility to play with the WoodPecker® card variables and yet apply the power of Lightbox Gallery! The HTML structure is flexible to add elements to the Lightbox> Have Fun!
<div id = "wdpk-light-gallery-1" class = "card-columns wdpk-light-gallery">
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-1.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-1.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-2.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-2.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-3.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-3.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-4.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-4.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-5.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-5.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-6.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-6.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-7.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-7.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-8.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-8.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-9.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-9.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
</div>
$wdpk-card-border-width: 0px !default;
$wdpk-card-border-radius: 0px !default;
$wdpk-card-columns-gap: 0px !default;
$wdpk-card-columns-margin: 0px !default;
$wdpk-card-inner-border-radius: 0px !default;
$wdpk-light-gallery-hover-bg-color: rgba(255, 255, 255, 0.9) !default;
$wdpk-light-gallery-icon-border-radius: 0px !default;
jQuery(document).ready(function ()
{
if (jQuery(".wdpk-light-gallery").length !== 0)
{
let obj = {
selectorID: 'wdpk-light-gallery-1',
thumbnail: true,
animateThumb: true,
showThumbByDefault: true,
};
require(["app/shortcodes/wdpkLightGallery"], function (e)
{
e.publicCall(obj);
});
}
});
