[RESOLVED] Trying to get a larger image to show in new window?

I'm building a simple image viewer web page. There is javascript code to load all the images. The html code below is styled to load the images into a div element on the page.

This first code snippet is what I have now and it works fine

Code:

---

<div class='images'>
    <a href=''><img src='img1.jpg' width='450' height='auto'>
    <div class='caption'></div></a>
</div>

---

What I want to do is....when the thumbnail image is clicked on, I want the full-size image to appear on a new page.

Can I do this below:

Code:

---

<div class='images'>
    <a href=''><img src='img1.jpg' width='450' height='auto' onclick="<img src='img1.jpg' target='_blank'>">
    <div class='caption'></div></a>
</div>

---

Is this possible? If not, what is the best way to perform this?

Thanks,

You can use a div to make it look like a popup (or modal window) within your page.
Here's the tutorial: https://www.w3schools.com/howto/howto_css_modals.asp

Otherwise you can simply use the window.open() method, passing the full url of the image so that it will be displayed in another tab/window.

Hope it helps

Hii blakemckenna,

Try like this...

JS

Code:

---

function swipe() {
  var largeImage = document.getElementById('largeImage');
  largeImage.style.display = 'block';
  largeImage.style.width=200+"px";
  largeImage.style.height=200+"px";
  var url=largeImage.getAttribute('src');
  window.open(url,'Image','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
}

---

HTML

Code:

---

<img src="abc.jpg" onClick="swipe();"/>

---

Hope it helps you!!

HarshShah,

That worked great! Thank you!