CODEWITHSUNDEEP
jqueryelevatezoom
Deepesh Gautam
Deepesh Gautam

Reputation: 21

Elevate Zoom not working for image inside bootstrap carousel

If I use elevatezoom to any image directly as shown below: it will works.

<div class="col-md-6">
    <img class="zImage img-fluid" src="http://localhost/project/public/uploads/images/i4.jpg" alt="">
</div>

$('.zImage ').elevateZoom();

However, If I try to implement same logic inside bootstrap carousel it doesnot work neither shows any error.

<div class="carousel-inner zoomImage">
  <div class="carousel-item active">
    <img class="d-block w-100 img-responsive" src="http://localhost/project/public/uploads/images/i4.jpg" alt="i4.jpg">
  </div>
  <div class="carousel-item ">
    <img class="d-block w-100 img-responsive" src="http://localhost/project/public/uploads/images/fff.png" alt="fff.png">
  </div>
  <div class="carousel-item ">
    <img class="d-block w-100 img-responsive" src="http://localhost/project/public/uploads/images/r4.jpg" alt="r4.jpg">
  </div>
</div>

$('.zoomImage .active img').elevateZoom(); 

// this also doesn't work:
$('img').elevateZoom();

How can I fix it?

Upvotes: 1

Views: 590

Answers (0)

Related Questions