Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML - JS How to open an image in an image popup by clicking on it?

Tags:

html

image

popup

I should write some code in html or javascript or other to open a popup window by clicking on an image. I have already seen the window.open() method, but this isn't what I am looking for. Precisely I want to open an image popup like Twitter does: overshadowing the background and displaying the image enlarged in the middle of the screen.

Any suggestions?

like image 582
Alessio Avatar asked Oct 05 '15 18:10

Alessio


People also ask

How do you make an image clickable in HTML?

How To Create A Clickable Image In HTML? The <img> and the <a> tags together is the most common way of adding a clickable image link in HTML. In a webpage, after adding an image using the <img> tag, make it clickable by adding a <a> tag along with it.

Can we add images inside a popup?

Images can be fitted in modal popup using Bootstrap by including <img> tag in the “modal-body” div. The “modal-body” div determines the main content of modal popup. By using the <img> tag, an image can be inserted into it.

How do I open a pop up in HTML?

The syntax to open a popup is: window. open(url, name, params) : url. An URL to load into the new window.

How do you add a modal pop up in HTML?

Open a Modal Use any HTML element to open the modal. However, this is often a button or a link. Add the onclick attribute and point to the id of the modal (id01 in our example), using the document. getElementById() method.


2 Answers

You can use a lightbox to do it.

There is a simple example in this link:

http://lokeshdhakar.com/projects/lightbox2/

like image 120
Jack Avatar answered Nov 11 '22 02:11

Jack


You can use a lightbox.

It's really simple to use. Include the script tags and CSS stylesheets in your HTML file, and then simply use:

<a class="example-image-link" href="images/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="images/thumb-1.jpg" alt="Girl looking out people on beach"></a>
like image 40
frontender_amsterdam Avatar answered Nov 11 '22 03:11

frontender_amsterdam