<!-- Image -->
<a data-bigpicture='{"imgSrc": "../demo.files/images/unsplash/icons8-team-yTwXpLO5HAA-unsplash.jpg"}' href="#">
<img src="../demo.files/images/unsplash/icons8-team-yTwXpLO5HAA-unsplash.jpg" class="img-fluid" alt="..." data-caption="Example of an optional caption.">
</a>
<!-- Youtube video -->
<a data-bigpicture='{"ytSrc": "zpOULjyy-n8"}' href="#">
<img class="img-fluid" src="https://img.youtube.com/vi/zpOULjyy-n8/maxresdefault.jpg" alt="...">
</a>
<!-- Vendor : BigPicture -->
<script src="../assets/vendors/bigpicture/dist/BigPicture.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll("[data-bigpicture]").forEach(function(el) {
let conf = el.getAttribute('data-bigpicture');
conf = conf ? JSON.parse( conf ) : {};
el.addEventListener("click", function(e) {
e.preventDefault();
BigPicture( Object.assign({ el: e.target }, conf) );
});
});
});
</script>
