asked on

Increasing the image size

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">

lenamtl

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

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

lenamtl

Also it is better to use % instead of px

Zvonko

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 Martin

ASKER

Thank you..I will review those options and get back to you......

Omar Martin

ASKER

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()">

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.