diff --git a/board/static/board/post.js b/board/static/board/post.js
index 906a449..37e4433 100644
--- a/board/static/board/post.js
+++ b/board/static/board/post.js
@@ -215,6 +215,34 @@ $(window.top).on("load", () => {
window.top.jsFrame = new JSFrame();
}
});
+$(window).on("load", (e) => {
+ $(".post_image").on("mouseover", (e) => {
+ // Load the original image and display it
+ let thumbnail = e.target;
+ let url = $(thumbnail).attr("data-url");
+ $("")
+ .attr("src", url)
+ .attr("id", "image_hover")
+ .css("display", "none")
+ .appendTo("body")
+ .on("load", (e) => {
+ let thumbRect = thumbnail.getBoundingClientRect();
+ // get max width based on thumbnail size so there isn't overlap
+ let maxWidth = window.innerWidth - thumbRect.right - 10;
+ let maxHeight = window.innerHeight;
+ $(e.target)
+ .css("max-width", maxWidth)
+ .css("max-height", maxHeight)
+ .css("width", "auto")
+ .css("height", "auto")
+ .css("display", "block");
+ });
+ });
+
+ $(".post_image").on("mouseout", (e) => {
+ $("#image_hover").remove();
+ });
+});
window.menuItemFactories = [];
window.menuItemFactories.push(
diff --git a/board/static/board/style.css b/board/static/board/style.css
index d3f2c05..959e4a8 100644
--- a/board/static/board/style.css
+++ b/board/static/board/style.css
@@ -140,6 +140,12 @@ th {
text-decoration: line-through;
}
+#image_hover {
+ position: fixed;
+ top: 0px;
+ right: 0px;
+}
+
/* Misc */
a:link {
diff --git a/board/templates/board/post_snippet.html b/board/templates/board/post_snippet.html
index 768540e..2c5ec20 100644
--- a/board/templates/board/post_snippet.html
+++ b/board/templates/board/post_snippet.html
@@ -50,7 +50,7 @@ at {{post_created}}
{# Image thumbnail #}