jQuery addClass example

Change class name on click in jQuery

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.min.js"></script>
<div class="owl-carousel" id="gallery-images">
      <div class="gallery-image-wrapper item">
        <a href="https://via.placeholder.com/500/0000FF/808080" data-lightbox="gallery1"><img src="https://via.placeholder.com/220/0000FF/808080" width="220" height="147"></a>
      </div>
      <div class="gallery-image-wrapper item">
        <a href="https://via.placeholder.com/500/FF0000/FFFFFF" data-lightbox="gallery2"><img src="https://via.placeholder.com/220/FF0000/FFFFFF" width="220" height="147"></a>
      </div>
      <div class="gallery-image-wrapper item">
        <a href="https://via.placeholder.com/500/FFFF00/000000" data-lightbox="gallery3"><img src="https://via.placeholder.com/220/FFFF00/000000" width="220" height="147"></a>
      </div>
      <div class="gallery-image-wrapper item">
        <a href="https://via.placeholder.com/500/000000/FFFFFF" data-lightbox="gallery4"><img src="https://via.placeholder.com/220/000000/FFFFFF" width="220" height="147"></a>
      </div>
    </div>

JavaScript

$("#gallery-images").owlCarousel({
      margin: 15,
      lazyLoad: true,
      slideBy: 1,
      dots: false,
      responsiveRefreshRate: 200,
      responsive: {
        0: {
          items: 2,
          nav: false
        },
        541: {
          items: 3,
          nav: true,
          navText: ["<", ">"],
          slideBy: 1
        }
      },
    });

    $(document).on('click', '.lightbox', function(e) {
      console.log("lightbox");
      if ($(e.target).has('.lightbox').length) {
        console.log("lightbox e", e.target);
        $(".lightbox").hide();
      }
    });