HTML image enlarge onclick

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

<script>
$(function () {
$('#myImg').on('click', function () {
$(this).width($(this).width() * 2);
});
})
</script>

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>

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.