- View Demo – Password
#1. Install code
First, click Gear icon on page where you want to apply this lightbox image feature.
Next, click Advanced > Paste this code
<!-- @tuanphan - List Image Lightbox Popup --> <link rel="stylesheet" href="https://code.beaverhero.com/file?filename=1760494578459listimglightbox.css"/> <div class="lightbox-overlay" id="lightbox"><button class="gallery-lightbox-close-btn" aria-label="Close"><div class="gallery-lightbox-close-btn-icon"><svg viewBox="0 0 40 40"><path d="M4.3,35.7L35.7,4.3"></path><path d="M4.3,4.3l31.4,31.4"></path></svg></div></button><button class="lightbox-nav prev" aria-label="Previous"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></button><div class="lightbox-content"><img class="lightbox-image" src="" alt=""></div><button class="lightbox-nav next" aria-label="Next"><svg class="caret-right-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="1.6,1.2 6.5,7.9 1.6,14.7"></polyline></svg></button></div> <script src="https://code.beaverhero.com/file?filename=1760494539577listimglightbox.js"></script>
#2. Usage
Make sure you use List Simple layout
