Enlarge Clicked Image using jQuery and CSS

(Last Updated On: August 11, 2016)

Enlarge Clicked Image using jQuery and CSS:

Enlarging the image by clicking on it can be done using jQuery and CSS.  When you need to highlight the particular image you can make use of this enlargement as part of the highlighting. It can be done in easy way using 30 plus jQuery plugins. Here we have done using jQuery and CSS.

 

Enlarge Clicked Image

demo
download

 

 

 

 

CSS Source:

We are using two classes named activeImg and inactiveImg. activeImg is to highlight the clicked images with opacity 1. inactiveImg class is having the opacity 0.2.

 

<style type="text/css">
/* Image display styles - Javadomain.in */
div.online-shopper{
    float: left;
    margin-left: 124px;
    margin-top: 150px;
    cursor:pointer;
}

/* Image active and inactive classes  - Javadomain.in */

a img.activeImg {
    background-position: -1px 1px;
    opacity: 1;
    padding: 10px;
}

a img.inactiveImg {
    background-position: -1px 0;
    -moz-opacity: 0.2;
    opacity:.20;
    filter: alpha(opacity=20);
    padding: 10px;
    border: 1px solid black;
}

</style>

jQuery Source:

We are increasing the width and height for the clicked image. So it will be enlarged dynamically. Also decreasing the width and heights for all other images to keep the already clicked images in normal size.

<script type="text/javascript">
$(document).ready(function(){
	$("img").click(function() {
	$("img").not(this).addClass("inactiveImg");
	/* Removing the height/width styles to default - Javadomain.in */
	$("img").not(this).css("height","60px");
	$("img").not(this).css("width","70px");
	$(this).removeClass('inactiveImg');
	$(this).addClass("activeImg");
	/* Adding the height/width styles to enlarge the image - Javadomain.in */
	$(this).css("width","180px");
	$(this).css("height","140px");
	});
});
</script>

Output:

Enlarging clicked image output

 

jQuery Recommended Books:

 

 

 

 

322 total views, 0 views today

Leave a Reply

Your email address will not be published. Required fields are marked *