Open Image in New Window with Javascript Problem

Question

Open Image in New Window with Javascript Problem

180 Views Asked by Timothy Dungan At 10 April 2025 at 18:29

I have a sort-of working script to open all images in a specific div (called "note-viewer") in a new window. The div can't be edited by me to simply place regular anchors around the images or add an onclick function, and the images are too small in the div to view properly.

The problem is that it works perfectly the first time you click an image. If you click another image after that, you have to click it twice to make it work. Once you try for a third image, nothing happens. It doesn't throw any kind of error. You click and it just sits there.

I need it to be one click on any and every image to open it in a new window.

Here's the code:

$("#note-viewer img").click(function () {
        var imageLink = $(this).attr("src");
        $("#note-viewer img").each(function () {
            var myWindow = window.open("", "Image", "_blank", "toolbar=no,scrollbars=no,resizable=yes");
            myWindow.document.write("<head><title>Image</title></head>");
            myWindow.document.write("<img src=" + imageLink + ">");
            return myWindow;
        });
    });

I know; I'm using document.write when I shouldn't. "Bad, Dev. Bad!" But it's only for use internally in our department.

UPDATE

I just tried simplifying it by trying to use jQuery to wrap the image tags with anchor tags as below:

$(function () {
        $('#note-viewer img').wrap(function () {
            return '<a href="' + $(this).attr('src') + '"></a>';
        });
    });

That didn't work at all.

Original Q&A

There are 1 best solutions below

**Timothy Dungan** · Answer 1

Here's the best working solution I've come up with which is a modification of something posted by @Jazmit with a bit of jQuery thrown in:

https://stackoverflow.com/a/62285566/11420625

const noteViewer = document.getElementById('note-viewer');
noteViewer.addEventListener('click', openLink, false);
noteViewer.addEventListener('trix-change', linkImg, false);

function findLink(el) {
   if (el.tagName == 'A' && el.href) {
      return el.href;
   } else if (el.parentElement) {
      return findLink(el.parentElement);
   } else {
      return null;
   }
}

function openLink(e) {
   const link = findLink(e.target);
   if (link == null) { return; }
   e.preventDefault();
   var base64Check = link.slice(0, 4);
   if (base64Check == 'data') {
      window.open().document.body.innerHTML = '<img src="' + link + '">';
      return;
   }
   window.open(link, '_blank');
}

function linkImg(e) {
   $("#note-viewer figure").each(function () {
      var images = this.getElementsByTagName('img');
      for (var i = 0, image = images[i]; i < images.length; i++) {
         var imageLink = $(image).attr("src");
         $(this).wrap('<a href="' + imageLink + '">');
      }
   });
}

After the first image is clicked, the rest still require two clicks for some reason, but they all work. Also, it eliminates the document.write.

QUICK ADDITION: Turns out that it requires two clicks because the Trix Editor is focusing me (the user) on the image to add a caption on the first click. I have no idea why it doesn't behave that way on the very first image you click.

Open Image in New Window with Javascript Problem

UPDATE

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in EVENTS

Related Questions in EVENT-HANDLING

Related Questions in CLICK

Related Questions in TRIX

Trending Questions

Popular # Hahtags

Popular Questions