Enlarge Clicked Image using jQuery and CSS

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.

 

 

 

 

 

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.

 

[html]
<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>
[/html]

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.

[html]
<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>
[/html]

Output:

 

jQuery Recommended Books: