Opening images in a new window when clicked on

[JetStreamVelocity]

When a picture on a page is clicked on, have it to open in a new window.

[TracyGJG]

There are three options:

1. Anchor links - Browser/HTML
2. showModalDialog - JavaScript
3. HTML panel - CSS (and probably some JavaScript)

My recommendation would be the latter. The next question is, do you need it to be JS-disabled safe. The chances are, your site is already JS dependent. Using JS makes the HTML simpler but is only used to copy the selected post to the panel.

[JetStreamVelocity]

JS dependent option is fine. How would you recommend incorporating the solution?

Presently, the following markdown for adding images

![image-title](https://path.to/image.png){:class="github"}

generates

<img src="https://path.to/image.png" alt="image-title" class="github" />

Style is defined in a file - github-styles.css

Example from this post

[TracyGJG]

What I am suggesting is having some JS at startup that instruments either all images or just those with a specific js- class (e.g. js-openable). Clicking on the selected images would have the following result.

1. Locate the popup-div, if not found then create it at the bottom of the html page and install some html including an image tag.
2. Copy the src of the clicked image into the image tag of the popup-div and display the popup-div, full screen.
3. Hide the popup-div when clicked.

I will have a go at preparing a Gist to demonstrate the idea.
Check out https://gist.github.com/TracyGJG/afc156ff6b481380fd83e5df110e26a4 [REMOVED]

[TracyGJG]

JSBin and Plnkr could not handle the embedded images, which are on the large side. So, I have created a samplers folder in my Netlify account an uploaded it here.

[TracyGJG]

In the example, a border can be added to the pop-up image using the following css.
.popupPanel img { width: 620px; position: relative; top: 50%; transform: translateY(-50%); border: 1px solid #000; padding: 9px; background-color: #fff; }
Netlify version updated to reference container.