Page 1 of 1
HTML image enlarge onclick
Posted: Wed May 17, 2017 12:47 am
by allgoo
I use HTML in many sections in my website , mainly to display catalouge images ,
i usually put the width 100% as most of the customers use mobile to browse the site
Code: Select all
<img id="myImg" src="xxxx" alt="cat 1" width="100%" >
i need a code to enlarge the image when clicked on to 200% or more
thanks in advanced
Re: HTML image enlarge onclick
Posted: Wed May 17, 2017 5:54 am
by thekrotek
Why do you need to enlarge image to 200%? It'll look like crap. The best way is to upload high res images and zoom them with lightbox.
Re: HTML image enlarge onclick
Posted: Wed May 17, 2017 10:08 am
by viethemes
allgoo wrote: ↑Wed May 17, 2017 12:47 am
I use HTML in many sections in my website , mainly to display catalouge images ,
i usually put the width 100% as most of the customers use mobile to browse the site
Code: Select all
<img id="myImg" src="xxxx" alt="cat 1" width="100%" >
i need a code to enlarge the image when clicked on to 200% or more
thanks in advanced
You can try following steps below to do that
1. Install my free extension Custom JavaScript
2. Add below code into the extension
Code: Select all
<script>
$(function () {
$('#myImg').on('click', function () {
$(this).width($(this).width() * 2);
});
})
</script>
Re: HTML image enlarge onclick
Posted: Sun May 21, 2017 9:16 pm
by allgoo
viethemes wrote: ↑Wed May 17, 2017 10:08 am
allgoo wrote: ↑Wed May 17, 2017 12:47 am
I use HTML in many sections in my website , mainly to display catalouge images ,
i usually put the width 100% as most of the customers use mobile to browse the site
Code: Select all
<img id="myImg" src="xxxx" alt="cat 1" width="100%" >
i need a code to enlarge the image when clicked on to 200% or more
thanks in advanced
You can try following steps below to do that
1. Install my free extension Custom JavaScript
2. Add below code into the extension
Code: Select all
<script>
$(function () {
$('#myImg').on('click', function () {
$(this).width($(this).width() * 2);
});
})
</script>
thank you,, that worked perfectly , but it keeps getting bigger and bigger with every click , how can i control that so first click enlarge it , the second click reduce it again to original size ?
aslo what if there is several images , should i place the code again and again with different ID or once is enough ?
appreciating your help
Re: HTML image enlarge onclick
Posted: Sun May 21, 2017 10:28 pm
by allgoo
thekrotek wrote: ↑Wed May 17, 2017 5:54 am
Why do you need to enlarge image to 200%? It'll look like crap. The best way is to upload high res images and zoom them with lightbox.
most of the customers are using mobiles , so the images appear are very small , so i want to add this option to them when they click on the image it enlarge a bit so they get to see the details and then close again , i will look for lightbox , if you have another idea , am all ears , thanks