CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ani_css
ani_css

Reputation: 2126

How to set class only for img element?

I'm using Cycle2 Carousel plugin and this plugin sets a class for my thumbnails it's not okey so far because this plugin set .cycle-pager-active class both image and div that's why I have to set this class for only images.if you check it out my #thumbnail div bottom of the body tag you will see (inspect element) I gotta fix this problem what should I do ?

What I tried ?

I change this line

pagerActiveClass: 'cycle-pager-active',

with this line:

pagerActiveClass: 'img.cycle-pager-active',

but nothing happend

$(document).ready(function(){

   $(".mySlideShow").cycle({
       pauseOnHover: true,
       pagerActiveClass: 'cycle-pager-active',
       pager: "#thumbnail",
       pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>",
       slides: ".item"
    });
  
});
.mySlideShow img{
  width:700px;
}
#thumbnail img {
  margin:10px;
}
.cycle-pager-active{
  border:3px solid orange;
}
<div class="mySlideShow">
    <div class="item">
      <img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_tZuhzJnp6BDndutoN1lV.jpg" alt="">
    </div>

  <div class="item">
      <img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_M6XtiCxv8AvkGako7aHr.jpg" alt="">
  </div>
  
  <div class="item">
    <img src="http://cdn.anitur.com/web/images/h494/2017-07/otel_armonia-holiday-village-spa_EOUfYFhHhV3UoxBxYTAr.jpg" alt="">
  </div>
</div>
  
<div id="thumbnail">
    <div class="thumbnail-expand"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>

Codepen Demo

Upvotes: 0

Views: 89

Answers (2)

Sam Battat
Sam Battat

Reputation: 5745

Even though I think a better approach is to play around with your HTML, and make sure the thumbnails div is only used for images, here is a solution to literally achieve what you asked for :)

Modify the addClass method

(function() {
  var originalAddClassMethod = jQuery.fn.addClass;

  jQuery.fn.addClass = function() {
    // Execute the original method.
    var result = originalAddClassMethod.apply(this, arguments);

    // trigger a custom event
    jQuery(this).trigger("cssClassChanged");

    // return the original result
    return result;
  };
})();

Then listen to cssClassChanged event and remove the active class from non img elements

$(document).ready(function() {
  var $slider = $(".mySlideShow").cycle({
    pauseOnHover: true,
    pager: "#single-pager",
    pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>",
    slides: ".item",
    pagerActiveClass: "cycle-pager-active"
  });

  $("#single-pager > :not(img)").bind("cssClassChanged", function() {
    $(this).removeClass("cycle-pager-active");
  });
});

DEMO: https://codepen.io/anon/pen/ZJjEGQ

Upvotes: 1

Ovidiu Unguru
Ovidiu Unguru

Reputation: 756

Just create a div that will have the thumbnail divas the child.

<div class="first-div">
 <h1> Nice thumbnail! </h1>
 <div id="thumbnail"></div>
</div>

Your code will only add the active class to the content inside the #thumbnail

Upvotes: 0

Related Questions