CODEWITHSUNDEEP
javascriptjqueryhtmlcss
nTuply
nTuply

Reputation: 1364

Increasing size of image on click JQuery

I'm having a problem with my click function in Jquery. Basically, I have a row of products and on hover(using CSS), I Have an effect which enlarges the image. Now, I made a click function in JQuery such that on selecting a product, the selected image stays bigger than the rest and when I select another product, the previously enlarged image goes back to normal.

Now I have written a few lines of code but can't get it right. I am assuming there is some sort of conflict between the hover and the click function but I can't figure out how to fix it.

Here's a JSFiddle link(All the codes are there. I added the JQuery below):

https://jsfiddle.net/svjyqva5/

$(document).ready(function(){
    //Select Item
    $(".anItem").click(function(){  
        // $(".anItem").each(function() {
        //      $(this).removeClass("selectedItem");
        // });

        if($(this).hasClass("selectedItem")){
            $(this).removeClass("selectedItem");
            itemColor = "";
        }else{
            itemColor = $(this).data("color");
            $(this).addClass("selectedItem");
    //      $("#oneBtn").show();
        }                       
    });
});

Would appreciate some help.

Upvotes: 0

Views: 331

Answers (3)

user407283
user407283

Reputation:

Add a class 'active' to clicked element and removed from other element fiddile 

$(document).ready(function(){

    $(".anItem").click(function(){  

  $(".active").removeClass("active");
  $(this).addClass("active");

    });
});

Upvotes: 0

empiric
empiric

Reputation: 7878

Change this in your CSS:

.anItem:not(.selectedItem):hover{
    -webkit-transform: scale(1.25); 
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
}

.selectedItem {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  transform: scale(1.25);
}

And in your JS add:

$(".anItem").not(this).removeClass("selectedItem");

at the beginning of your click-handler.

Demo

Upvotes: 2

Kalpesh Singh
Kalpesh Singh

Reputation: 1717

Logic -

Apply CSS Transform Scale on selected (this) item and remove it from rest (from common class). 

$(document).ready(function(){
	//Select Item
	$(".anItem").click(function(){	
  $(".anItem").css('transform','scale(1)')
		$(this).css('transform','scale(1.25)');
    
		
		if($(this).hasClass("selectedItem")){
			$(this).removeClass("selectedItem");
			itemColor = "";
		}else{
			itemColor = $(this).data("color");
			$(this).addClass("selectedItem");
	//		$("#oneBtn").show();
		}						
	});
});
.orderRow{
	width: 60%;
	/*border: 1px solid #000;*/
	height: 180px;
	margin-top: 20px;
	display: block;
	margin: 0 auto;
	padding-bottom: 10px;
}

.singleItem{
	width: 240px;
	height: 180px;
	float: left;
	/*border: 1px solid #000;*/
}

.lMargin{
	margin-left: 2.7%;
}

.anItem{
	width: 200px;
	height: auto;
	display: block;
	margin: 0 auto;
	cursor: pointer;
}

.anItem:hover{
    -webkit-transform: scale(1.25); 
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
}

.anItem{
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
}

.selectedItem{
	width: 220px;
	height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="orderRow">
                    <div class="singleItem lMargin">
                        <h4>Blue</h4>
                        <img class="anItem" data-color="blue" src="http://bigstartups.co.za/permiclip/website/images/blue.png" />
                    </div>   

                    <div class="singleItem lMargin">
                        <h4>Grey</h4>
                        <img class="anItem" data-color="grey" src="http://bigstartups.co.za/permiclip/website/images/grey.png" />
                    </div>   

                    <div class="singleItem lMargin">
                        <h4>Red</h4>
                        <img class="anItem" data-color="red" src="http://bigstartups.co.za/permiclip/website/images/red.png" />
                    </div>                         
                </div>

Upvotes: 0

Related Questions