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

#webdev #javascript #html #css

If you're looking to elevate your website's image carousel experience, look no further than the Owl Carousel Two Integration with Elevated Zoom and Fancybox. This integration combines powerful features to enhance the way your users interact with images on your website.

Hmtl Code

<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>

Javascript Custom Code

 // 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');
    });
  }
});

GitHub Repository:
Explore the full integration on GitHub: Owl Carousel Two Elevated Zoom Fancybox Integration.

With this integration, you'll take your website's image carousel to the next level, providing users with an engaging and interactive image-viewing experience.