So far I used a no-javascript way to toggle an image from compressed to expanded, using input and label tags. That solution works, but I think that from a semantic point of view it is not correct. In other words it’s just a trick.
So I wonder if there is a jquery (or vanilla js) solution to toggle an image size, using css max-width.
My css should be:
What code should I write to get the image expanded by clicking it?
Create CSS class with required constrains and toggle it on click
Thank you. Yes this code works, I have only to do some further attempts in my websites.
EDIT
ops… in my local websites this code doesn’t work…
Any modern browser has developer tools, press F12 and check the Console, it will contain errors if you did something wrong
If there are no errors in the Console, check your markup - tags, classes, script tags.
No errors, and this is the code
<html>
<head>
<style type="text/css">
p {text-align: justify;}
body {margin-left: 5px; margin-right: 5px; font-family: sans-serif, ubuntu, arial;}
.image {
cursor:pointer;
}
.image-small {
max-width: 20vw;
}
</style>
<script type="text/javascript">
//expand image al posto di label e input
document.querySelectorAll('.image').forEach(imageElement => {
imageElement.addEventListener('click', e => {
e.preventDefault()
imageElement.classList.toggle('image-small')
})
})
//-->
</script>
</head>
<body>
<img src="http://localhost/mypath/myfile.jpg" class="image image-small" />
</body>
</html>
The script is in the head which is encountered before the body and as such your image does not exist yet so nothing is found. Move the script to before the closing body tag so that the page has loaded before the script fires.
<body>
<img src="http://localhost/mypath/myfile.jpg" class="image image-small" />
<script">
//expand image al posto di label e input
document.querySelectorAll('.image').forEach(imageElement => {
imageElement.addEventListener('click', e => {
e.preventDefault()
imageElement.classList.toggle('image-small')
})
})
</script>
</body>
</html>
Just follow @PaulOB 's directions above 
or, even better, create file called script.js next to your html file, put your JS code there and include it right before the closing </body> tag:
<body>
<img src="http://localhost/mypath/myfile.jpg" class="image image-small" />
<script src="script.js"></script>
</body>
This approach will keep your markup much cleaner
Yes, in this way the code works.
But there is this double class that bother me a bit.
Where is said to javascript that .image = max-width: none?
Max-width none is the default rule for that element so there’s no need to say it.
You are adding a class that says max-width:20vw but when you remove that class the element goes back to its default of max-width:none.
OK, I understand this.
I’m not able to explain , but that two classes bother me, because it seems not enough “semantic”.
So I have modified your code as following:
<html>
<head>
<style type="text/css">
p {text-align: justify;}
body {margin-left: 5px; margin-right: 5px; font-family: sans-serif, ubuntu, arial;}
.image {
cursor:pointer;
}
.image-small {
max-width: 20vw;
}
</style>
</head>
<body>
<img src="http://localhost/imypath/myimage.jpg" class="image-small" />
<script type="text/javascript">
//expand image al posto di label e input
document.querySelectorAll('img').forEach(imageElement => {
imageElement.addEventListener('click', e => {
e.preventDefault()
imageElement.classList.toggle('image-small')
})
})
//-->
</script>
</body>
</html>
And it works! Doesn’t it?
Well you’re free to rename those classes to make them more semantic. For example,
<img class="clickable thumbnail" ... >
Usually it is very bad idea to bind events by tag name, because later you’ll decide to add other type of image to the page (say, ad banner) which shouldn’t react on clicks in the same way as your thumbnails
Yes, I know. I will consider your suggestion.
Thank you very much.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.