Menu
I'm currently playing around with creating a new image slider for a project, but had a question. The task is to have an image displayed on page that will open the full size onclick. However, I'd like to make it so the function goes away and the image returns to the original state onclick again.
Here's my code:
<html>
<head>
<title>Fullscreen</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<img src="//path" onClick="full()" id="image" />
<script type="text/javascript">
function full() {
$(function () {
$('#image').on('click', function () {
$(this).width(1000);
});
});
}
</script>
</body>
</html>
The image opens in a larger state which is good, but how would I implement a second onclick function to take away the first?
Thanks for the help!
715
asked Apr 27 '26 20:04
To take an event previously assigned use
$('#image').off('click')
To scale back the image, use
var size = 0;
function full() {
$(function () {
$('#image').on('click', function () {
if (size === 0) {
size = $(this).width();
$(this).width(1000);
} else {
$(this).width(size);
size = 0;
}
});
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
