Skip to content

Instantly share code, notes, and snippets.

@frumbert

frumbert/index.html

Created May 19, 2016 05:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save frumbert/b0d9f14cc288a7128c3e58a7c343ebe9 to your computer and use it in GitHub Desktop.
Save frumbert/b0d9f14cc288a7128c3e58a7c343ebe9 to your computer and use it in GitHub Desktop.
Download ZIP
HoverThumb
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>title</title>
</head>
<body>
<p>HoverThumb: mouse over a link to see a full image preview. the href of the hyperlink points to the image.</p>
<p>Adjust as required.</p>
<a data-action="hover-thumb" href="http://i.imgur.com/0WmfqDk.jpg">Hover this link to preview its image</a></p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
$(function () {
$("a[data-action='hover-thumb']")
.hover(function(e) {
var img = $("<img>").attr({
src: this.href,
id: "hoverThumb"
}).css({
"position": "absolute",
"top": (e.pageY+10) + "px",
"left": (e.pageX+10) + "px",
"box-shadow": "0 0 25px rgba(0,0,0,.25)"
});
$("body").append(img);
}, function () {
$("#hoverThumb").remove();
})
.mousemove(function(e) {
$("#hoverThumb").css({
"top": (e.pageY+10) + "px",
"left": (e.pageX+10) + "px",
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment