By Vishal Basumatary in javascript — Mar 24, 2023

show image in popup from owl carousel pop up

When it comes to displaying images in a carousel format, Owl Carousel is an easy-to-use and popular choice. One question that often comes up is how to make a popup appear when a user clicks on a specific image in the carousel. In this post, I will explain how to achieve this using HTML and jQuery.

Step-by-Step Guide

First, we need to include the necessary files for Owl Carousel and jQuery in the <head> section of our HTML document:


<head>
  <link rel="stylesheet" href="owl.carousel.min.css">
  <link rel="stylesheet" href="owl.theme.default.min.css">
  <script src="jquery.min.js"></script>
  <script src="owl.carousel.min.js"></script>
</head>

Next, we need to create the HTML structure for our carousel. This can be done using the <div> and <img> tags. Each image will have a unique ID attribute:


<div class="owl-carousel">
  <img src="image1.jpg" id="image1">
  <img src="image2.jpg" id="image2">
  <img src="image3.jpg" id="image3">
</div>

We then need to initialize our Owl Carousel using jQuery:


$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
      0:{
        items:1
      },
      600:{
        items:3
      },
      1000:{
        items:5
      }
    }
  });
});

Now comes the fun part! We need to create a popup that will appear when a user clicks on a specific image. We can do this using the jQuery .click() function and the .fadeIn() function for the popup:


$('#image1').click(function(){
  $('#popup').fadeIn();
});

Finally, we need to create the HTML structure for our popup. This can be done using the <div>, <img>, and <span> tags:


<div id="popup">
  <img src="image1.jpg">
  <span class="close">×</span>
</div>

We also need to create a way for the user to close the popup. This can be done using CSS and the jQuery .fadeOut() function:


#popup {
  display: none;
}
.close {
  position: absolute;
  right: 20px;
  top: 0;
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
.close:hover {
  color: #ccc;
}


$('.close').click(function(){
  $('#popup').fadeOut();
});

And there you have it! With just a few lines of code, we have created a popup that appears when a user clicks on a specific image in our Owl Carousel.

Alternate Method

Another way to achieve this is by using a plugin called Magnific Popup. This plugin allows you to create responsive popups with just a few lines of code. Here's how you can use it with Owl Carousel:

Include the necessary files for Magnific Popup and Owl Carousel:


<head>
  <link rel="stylesheet" href="owl.carousel.min.css">
  <link rel="stylesheet" href="owl.theme.default.min.css">
  <link rel="stylesheet" href="magnific-popup.css">
  <script src="jquery.min.js"></script>
  <script src="owl.carousel.min.js"></script>
  <script src="jquery.magnific-popup.js"></script>
</head>

Create the HTML structure for our carousel:


<div class="owl-carousel">
  <a href="image1.jpg" class="popup-link"><img src="image1.jpg"></a>
  <a href="image2.jpg" class="popup-link"><img src="image2.jpg"></a>
  <a href="image3.jpg" class="popup-link"><img src="image3.jpg"></a>
</div>

Initialize Owl Carousel and Magnific Popup:


$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
      0:{
        items:1
      },
      600:{
        items:3
      },
      1000:{
        items:5
      }
    }
  });
  
  $('.popup-link').magnificPopup({
    type: 'image'
  });
});

And there you have it! With just a few lines of code, we have created a responsive popup that appears when a user clicks on a specific image in our Owl Carousel using Magnific Popup.

Show Image in Popup from Owl Carousel Pop Up

Step-by-Step Guide

Alternate Method

Subscribe to The Poor Coder | Algorithm Solutions