Gallery Slider Owl Caraousel + Lightbox

<!--lightbox Library-->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>

<!--owl library-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- sample HTML -->
<div class="your_slider owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
</div>

jQuery(document).ready(function(){

  var owl = jQuery('.your_slider');
  owl.owlCarousel({
  	loop:true,
    //loop: jQuery('.item img').lenght >1 ? true : false,
  	margin:10,
  	lazyLoad: true,
    touchDrag:true,
    mouseDrag:true,
  	responsive:{
  		0:{
  			items:1.2
  		},
  		600:{
  			items:2.2
  		},
  		1000:{
  			items:2.2
  		}
  	},
  	autoplay:true,
      autoplayTimeout:4000,
      autoplayHoverPause:true
  });


  jQuery('.next').click(function() {
      owl.trigger('next.owl.carousel');
  })

  jQuery('.prev').click(function() {
      // With optional speed parameter
      // Parameters has to be in square bracket '[]'
      owl.trigger('prev.owl.carousel', [300]);
  })

  jQuery('.dokumentasi_proyek img').each(function ()
  {
     var currentImage = $(this); 
     currentImage.wrap("<a href='" + currentImage.attr("src") + "' class=lightbox>");
  });

     var lightboxDescription = GLightbox({
    selector: '.lightbox',
    openEffect: 'fade',
    closeEffect: 'none'
  });
});