CODEWITHSUNDEEP
jquerycss
Jakedk
Jakedk

Reputation: 101

addClass active to slider thumb

I'm trying to add an active class to img when .thumb is clicked.

What I'm trying to do: enter image description here

What I get: enter image description here

$(document).ready(function() {

$(".thumb").click(function() {
var IMG = $(this).find("img").addClass('active');
$(".viewer").not($(this).siblings().find('img').removeClass('active').parent().after()).remove();

var top = $(this).offset().top - 10; 
// window.scrollTo(0, top); // no animation
$('html, body').animate({ scrollTop: top }, 100);

$(this).parent().after("<div class='viewer'><div class='content-slide'><img src='' /><p class='exit'>✖</p><h2></h2><span></span></div></div>");

$(".viewer").find("img").attr("src", IMG.attr("data-HD"));
$(".viewer").find("h2").text(IMG.attr("title"));
$(".viewer").find("span").text(IMG.attr("description"));
$(".content-slide img").height($(".viewer").height());
$("p.exit").click(function() {
$(this).closest(".viewer").slideUp(200, this.remove);
$("img").removeClass('active'); 
});
});

});

Demo: http://codepen.io/anon/pen/NNrQWe

Upvotes: 2

Views: 338

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Remove the class while you are clicking on the thumbs,

var IMG = $("img").not($(this).find("img").addClass('active')).removeClass("active");

DEMO

Upvotes: 2

Related Questions