Freddy February 2016

How to display enlarged images upon click in a new pop up window similar to Twitter?

An image on Twitter, will enlarge in a pop up window which can be closed using the x. I have seen similar questions such as How to expand an image in HTML by clicking on it but I want the image to open, enlarged, in a separate window rather than being enlarged on the page.

At the moment, I realize <a></a> tags are commonly used to achieve enlarged images, but a pop up window seems more aesthetically pleasing.

Answers


jaykum February 2016

If you create a link with the <a></a> tag and set the target to something like "_blank" it will force the image to pop up in its own window.

 <a href="url" target = "_blank"> <img src="url"/></a>

The inner <img/> tag will display the image from the url (which can be a local directory in your project such as "/images/test.jpg" or an external source). The <a></a> tag surrounding it will make the image clickable and open the href in a new window because the target is set as above.

Post Status

Asked in February 2016
Viewed 1,966 times
Voted 4
Answered 1 times

Search




Leave an answer