Increasing the image size

Omar Martin
Omar Martin used Ask the Experts™
on
I am using the handlebars template in node.js. Currently, the thumbnail images from the database are displaying at a width and height of 70 which is specified in the code. See below. How can I allow the user to click on the image in handlebars and see a larger rendition of the photo?
The current images are too small to see but I would only like for them to be increased upon clicking them.

<img id="img" src="/uploads/{{photo_image}}" width="70" height="70">
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

I'm using this script

demo https://dimsemenov.com/plugins/magnific-popup/
Doc https://dimsemenov.com/plugins/magnific-popup/documentation.html

This is very easy to use, handle several media and it is responsive.
Zvonko זְאֵבSystems architect
Top Expert 2006

Commented:
Or a simple event handler:
<img id="img" onClick="(this.width==70)?this.width=270:this.width=70;" src="https://cdn.experts-exchange.com/images/experts-exchange/header2017Q4/expertsExchangeLogo.svg" width="70" height="70" >

Open in new window

Also it is better to use % instead of px
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Zvonko זְאֵבSystems architect
Top Expert 2006

Commented:
lenamtl want to say this:
<style>
img.std {
	height: 10%;
}
img.big {
	height: 40%;
}
</style>
<img id="img" class="std" onClick="(this.className=='std')?this.className='big':this.className='std'" src="https://cdn.experts-exchange.com/images/experts-exchange/header2017Q4/expertsExchangeLogo.svg" >

Open in new window

Omar MartinBridgemaker

Author

Commented:
Thank you..I will review those options and get back to you......
Omar MartinBridgemaker

Author

Commented:
Zvonko זְאֵב

What is it using JQuery because I am using node.js and the javascript is not working.

I used this:

<img id="img" class="std" $("this.className=='std'?this.className='big':this.className='std'" src="/uploads/{{photo_image}}).toggle()">

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial