Slideshow with Lightbox

Description: 

  • Slideshow Image
  • Lightbox on click
  • View Demo – Password: abc

Initial

Slideshow with lightbox 1

Lightbox

Slideshow with lightbox 2

#1. Install Code

Click Gear icon on page where you want to use Slideshow

Slideshow with lightbox 3

Click Advanced > Paste the code

<!-- @tuanphan - slideshow with lightbox -->
<link rel="stylesheet" href="https://code.beaverhero.com/file?filename=1760167269218slideshowlightbox.css"/>
<script src="https://code.beaverhero.com/file?filename=1760167297808slideshowlightbox.js">
</script>

Slideshow with lightbox 4

#2. Usage

Edit page where you want to place Slideshow > Add a Markdown Block

Plugin02v3 (free) 4

Paste all Image URLs. You can follow this guide to get URL.

Plugin02v3 (free) 5

Save and reload the page.

#3. Customize

To adjust height of Images on Desktop – Mobile, you can add this code under Plugin code

<style>
body {
    --img-height-mobile: 300px !important;
    --img-height-desktop: 450px !important;
}
</style>

Slideshow with lightbox 5

Buy me a coffee