Elevate Your Website's Image Carousel with Owl Carousel Two, Elevated Zoom, and Fancybox Integration

<div id="slider" class="main-carousel owl-carousel positive-relative">
  <div class="item">
    <a href="images/one.jpg" data-fancybox="gallery">
      <img id="zoom_05" src="images/one.jpg" data-zoom-images="images/one.jpg" alt="">
    </a>
  </div>
  <!-- Add more carousel items here -->
</div>

 // Activate Fancybox for a sleek image viewing experience.
$('.fancybox').fancybox();
// Enable Elevated Zoom for larger screens (min-width: 992px)
if (window.matchMedia('(min-width: 992px)').matches) {
  $('#zoom_05').ezPlus({
    zoomType: 'inner',
    cursor: 'crosshair'
  });
}
// Initialize Owl Carousel for a dynamic image carousel
$(document).ready(function() {
  $(".main-carousel").owlCarousel({
    direction: 'vertical',
    loop: false,
    items: 1,
    margin: 0,
    stagePadding: 0,
    autoplay: false,
    responsive: {
      0: {
        items: 1,
        nav: true,
        navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
      },
      700: {
        items: 1,
      }
    }
  })
  // Enhance carousel with dynamic zoom functionality
  if (window.matchMedia('(min-width: 992px)').matches) {
    dotcount = 1;
    jQuery('.owl-dot').each(function() {
      jQuery(this).addClass('dotnumber' + dotcount);
      jQuery(this).attr('data-info', dotcount);
      dotcount = dotcount + 1;
    });
    slidecount = 1;
    jQuery('.owl-item').not('.cloned').each(function() {
      jQuery(this).addClass('slidenumber' + slidecount);
      slidecount = slidecount + 1;
    });
    jQuery('.owl-dot').each(function() {
      grab = jQuery(this).data('info');
      slidegrab = jQuery('.slidenumber' + grab + ' img').attr('src');
      if (typeof slidegrab === 'undefined') {
        jQuery(this).css("background-image", "url('assets/images/youtube.png')");
      } else {
        jQuery(this).css("background-image", "url(" + slidegrab + ")");
      }
    });
    amount = $('.owl-dot').length;
    gotowidth = 300 / amount;
    jQuery('.owl-dot').css("height", gotowidth + "%");
    // Update zoom when changing carousel items
    $('.main-carousel').on('translated.owl.carousel', function(event) {
      var currentItem = event.item.index + 1;
      $('.owl-item:nth-child(' + currentItem + ')').find('img').attr('id', 'zoom_05');
      $('#zoom_05').ezPlus({
        zoomType: 'inner',
        cursor: 'crosshair'
      });
    });
    // Detach zoom when changing carousel items
    $('.main-carousel').on('changed.owl.carousel', function(event) {
      var currentItem = event.item.index + 1;
      $(".zoomContainer").detach();
      $('.owl-item img').removeAttr('id');
    });
  }
});