diff --git a/docs/release-notes/version-2.6.md b/docs/release-notes/version-2.6.md
index ccbcfb754..b2ddb7c7c 100644
--- a/docs/release-notes/version-2.6.md
+++ b/docs/release-notes/version-2.6.md
@@ -2,6 +2,7 @@
## Enhancements
+* [#2050](https://github.com/netbox-community/netbox/issues/2050) - Preview image attachments when hovering the link
* [#3187](https://github.com/netbox-community/netbox/issues/3187) - Add rack selection field to rack elevations
---
diff --git a/netbox/project-static/js/forms.js b/netbox/project-static/js/forms.js
index 55f9afbd5..43c722ae5 100644
--- a/netbox/project-static/js/forms.js
+++ b/netbox/project-static/js/forms.js
@@ -398,4 +398,43 @@ $(document).ready(function() {
// Account for the header height when hash-scrolling
window.addEventListener('load', headerOffsetScroll);
window.addEventListener('hashchange', headerOffsetScroll);
+
+ // Offset between the preview window and the window edges
+ const IMAGE_PREVIEW_OFFSET_X = 20
+ const IMAGE_PREVIEW_OFFSET_Y = 10
+
+ // Preview an image attachment when the link is hovered over
+ $('a.image-preview').on('mouseover', function(e) {
+ // Twice the offset to account for all sides of the picture
+ var maxWidth = window.innerWidth - (e.clientX + (IMAGE_PREVIEW_OFFSET_X * 2));
+ var maxHeight = window.innerHeight - (e.clientY + (IMAGE_PREVIEW_OFFSET_Y * 2));
+ var img = $('').attr('id', 'image-preview-window').css({
+ display: 'none',
+ position: 'absolute',
+ maxWidth: maxWidth + 'px',
+ maxHeight: maxHeight + 'px',
+ left: e.pageX + IMAGE_PREVIEW_OFFSET_X + 'px',
+ top: e.pageY + IMAGE_PREVIEW_OFFSET_Y + 'px',
+ boxShadow: '0 0px 12px 3px rgba(0, 0, 0, 0.4)',
+ });
+
+ // Remove any existing preview windows and add the current one
+ $('#image-preview-window').remove();
+ $('body').append(img);
+
+ // Once loaded, show the preview if the image is indeed an image
+ img.on('load', function(e) {
+ if (e.target.complete && e.target.naturalWidth) {
+ $('#image-preview-window').fadeIn('fast');
+ }
+ });
+
+ // Begin loading
+ img.attr('src', e.target.href);
+ });
+
+ // Fade the image out; it will be deleted when another one is previewed
+ $('a.image-preview').on('mouseout', function() {
+ $('#image-preview-window').fadeOut('fast')
+ });
});
diff --git a/netbox/templates/inc/image_attachments.html b/netbox/templates/inc/image_attachments.html
index 1487b5349..2fee4dc78 100644
--- a/netbox/templates/inc/image_attachments.html
+++ b/netbox/templates/inc/image_attachments.html
@@ -10,7 +10,7 @@