Java-Scripts.net

Popup Image Viewer

Allow users to view high-resolution images in a dedicated window. This script generates a popup containing only the image, stripping away site navigation for a focused view.

Copy the Script

<script>
function viewImage(imgUrl) {
    // Open a new window
    var viewer = window.open("", "ImgViewer", "width=600,height=450,scrollbars=no");
    
    // Write the HTML for the image
    viewer.document.write("<html><body style='margin:0; text-align:center; background:#000;'>");
    viewer.document.write("<img src='" + imgUrl + "' style='max-width:100%; height:auto;'>");
    viewer.document.write("<br><a href='javascript:window.close()' style='color:#fff;'>Close Window</a>");
    viewer.document.write("</body></html>");
    viewer.document.close(); // Important to finish rendering
}
</script>

<button onclick="viewImage('photo.jpg')">View Photo</button>

Frequently Asked Questions

This specific script opens the window to a set size. To make it dynamic, you would need to preload the image to calculate its width/height before opening the window.

The script typically adds a link or click event to the image inside the new window that calls 'window.close()', allowing the user to easily dismiss it.

A 'lightbox' (modal overlay) is generally more modern and mobile-friendly. However, this popup method is useful if you want the user to be able to move the image to a second monitor.