Reel Lightbox

Description

• click Reel image will open Lightbox
• view demo – password: abc
• my friend code this, send here a coffee

#1. Install Code

#1.1. First, make sure you choose Slideshow Simple

In Anchor Link, enter word: reel2lightbox

#1.2. Hover on Page where you use Slideshow Simple > Click Gear icon

Click Advanced > Paste this code

<!-- Custom Reel Lightbox -->
<style>
   .custom-slideshow-wrapper-reel {
    --slideshow-height: 250px;
    --slideshow-mobile-height: 120px;
    position: relative;
    height: var(--slideshow-height);
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .custom-horizontal-slideshow-reel{width:100%;height:100%}section[id*="reel2lightbox"] .gallery-slideshow{display:none}.custom-horizontal-slideshow-reel .swiper-slide img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;cursor:pointer}.custom-horizontal-slideshow-reel .gallery-reel-control-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:#fff0;border:none;cursor:pointer;padding:10px}.custom-horizontal-slideshow-reel .gallery-reel-control-btn[data-previous]{left:10px}.custom-horizontal-slideshow-reel .gallery-reel-control-btn[data-next]{right:10px}.custom-horizontal-slideshow-reel .gallery-reel-control-btn-icon{width:29;height:28px}.custom-horizontal-slideshow-reel .gallery-reel-control-btn-icon svg{width:100%;height:100%;stroke:#fff;stroke-width:2}.custom-horizontal-slideshow-reel .swiper-button-prev,.custom-horizontal-slideshow-reel .swiper-button-next{display:none}.glightbox-container .gslide-description{display:none}.glightbox-container .gprev,.glightbox-container .gnext{background:#fff0;border:none;width:28;height:28;display:flex;align-items:center;justify-content:center;top:50%;transform:translateY(-50%)}.glightbox-container .gprev svg,.glightbox-container .gnext svg{width:28;height:28px;stroke:#fff;stroke-width:2;fill:none}.glightbox-container .gclose{background:#fff0;border:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center}.glightbox-container .gclose svg{width:28px;height:28px;stroke:#fff;stroke-width:2;fill:none}
</style>
<script>
const reelSlideshowConfig = {
  effect: 'slide',
  direction: 'horizontal',
  speed: 600,
  loop: true,
  navigation: {
    arrows: true,
  },
  slidesPerView: 4,
  spaceBetween: 10,
  centeredSlides: false,
  keyboard: true,
  lightbox: true,
  breakpoints: {
    768: {
      slidesPerView: 10,
      spaceBetween: 10
    }
  }
};
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
<script src="https://code.beaverhero.com/gallerys/reellightbox.js"></script>

#2. Customize

#2.1. To change image height, adjust this (Line 04 Line 05)

--slideshow-height: 250px;
   --slideshow-mobile-height: 120px;

#2.2. To change number of images on desktop, mobile, adjust these

Mobile – Line 22

slidesPerView: 4,

Desktop – Line 29

slidesPerView: 10,