<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
Select Effect :
<select id="selectImgEffect">
<option value="Fade">Fade</option>
<option value="Slide">Slide</option>
</select> Time in seconds:
<select id="selectImgDuration">
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input id="btnEnlarge" type="button" value="Enlarge" />
<input id="btnShrink" type="button" value="Shrink" />
<br /><br />
<img id="mainImage" style="border:3px solid grey" src="https://images.unsplash.com/photo-1500582850152-416b1bf23acc?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=c2610d6c40ebe7aeae215f4327a40801" height="500px"
width="540x" />
<br />
<div id="divId">
<img class="imgStyle " src="https://images.unsplash.com/photo-1500582850152-416b1bf23acc?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=c2610d6c40ebe7aeae215f4327a40801 " />
<img class="imgStyle " src="https://images.unsplash.com/photo-1504587883873-5b3537de4dd0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=223f9c1c4146d2dd5767ae83bc18ee17 " />
<img class="imgStyle " src="https://images.unsplash.com/photo-1509000730419-0df5b5e4764f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=95541976c1e8697142d2bf561d7f5499 " />
<img class="imgStyle " src="https://images.unsplash.com/photo-1503543100709-46d05b976bb0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=ba1a3bfd8a8cd53eea01a349cc7924a8 " />
<img class="imgStyle " src="https://images.unsplash.com/photo-1507041957456-9c397ce39c97?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=dab7ac0f30cd8e86ba24c3ceb0cbffb4 " />
</div>
</body>
</html>.imgStyle {
width: 100px;
height: 100px;
border: 3px solid grey;
}
$(document).ready(function() {
/*
$("#divId img").on({
mouseover: function() {
$(this).css({ cursor: "hand", borderColor: "orange" });
},
mouseout: function() {
$(this).css({ cursor: "default", borderColor: "grey" });
},
click: function() {
var imageURL = $(this).attr("src");
$("#mainImage")
.slideUp(800, function() {
$(this).attr("src", imageURL);
})
.slideDown(800);
}
});
*/
//The problem with the image gallery that we created beloww is that we are binding event handlers (mouseover, mouseout & click) to every image element. This means if you have 500 image elements, then there will be 1500 event handlers (mouseover, mouseout & click) in the memory and this may negatively affect the performance of your application.
//A better way of doing the same from a performance standpoint is shown below. In this example, the event handlers are attached to the div element and not to the individual img elements. So, even if you have 500 img elements, there are only 3 event handlers in memory.
//So how does this work
//1. When you click on an img element, the event gets bubbled up to its parent (div) as the img element does not have an event handler
//2. The bubbled event is handled by the the parent (div) element, as it has a click event handler.
$("#divId").on(
{
mouseover: function() {
$(this).css({
cursor: "hand",
"border-Color": "red"
});
},
mouseout: function() {
$(this).css({
cursor: "default",
"border-Color": "grey"
});
},
click: function() {
var imageURL = $(this).attr("src");
var effect = $("#selectImgEffect").val();
var duration = $("#selectImgDuration").val() * 1000;
if (effect == "Slide") {
$("#mainImage")
.slideUp(duration, function() {
$(this).attr("src", imageURL);
})
.slideDown(duration);
} else {
$("#mainImage")
.fadeOut(duration, function() {
$(this).attr("src", imageURL);
})
.fadeIn(duration);
}
}
},
"img"
);
var mainImageElement = $("#mainImage");
var height = parseInt(mainImageElement.attr("height"));
var width = parseInt(mainImageElement.attr("width"));
$("#btnEnlarge").click(function() {
height += 100;
width += 100;
mainImageElement.animate({ height: height, width: width });
});
$("#btnShrink").click(function() {
height -= 100;
width -= 100;
mainImageElement.animate({ height: height, width: width });
});
});
External CSS
This Pen doesn't use any external CSS resources.