Skip to content

Instantly share code, notes, and snippets.

@radusuciu
Last active August 29, 2015 14:01
Show Gist options
  • Save radusuciu/b7954c01f51e6af82502 to your computer and use it in GitHub Desktop.
Save radusuciu/b7954c01f51e6af82502 to your computer and use it in GitHub Desktop.
(function(document) {
var previewWrap = document.createElement('div'),
preview = document.createElement('img');
previewWrap.style.position = 'absolute';
previewWrap.style.background = 'white';
previewWrap.style.border = '1px solid black';
previewWrap.style.transition = 'opacity 0.4s';
previewWrap.style.opacity = 0;
previewWrap.appendChild(preview);
document.body.appendChild(previewWrap);
function showPreview(e) {
var el = e.currentTarget,
parent = el.parentNode,
x = parent.offsetLeft - parent.clientWidth,
y = parent.offsetTop;
preview.src = el.href;
togglePreview();
onImageLoad(preview, function() {
previewWrap.style.left = x - (previewWrap.clientWidth || preview.width);
previewWrap.style.top = y + ((previewWrap.clientHeight || preview.height) / 2);
});
}
function togglePreview() {
var showing = Math.floor(previewWrap.style.opacity);
previewWrap.style.opacity = (showing) ? 0 : 1; // won't take bool lol
previewWrap.style.visility = (showing) ? 'hidden' : 'visible';
}
var imageLinks = document.querySelectorAll('tr td:last-of-type a');
for (var i = 0, n = imageLinks.length; i < n; i++) {
imageLinks[i].addEventListener('mouseout', togglePreview, false);
imageLinks[i].addEventListener('mouseover', showPreview, false);
}
// http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript
function onImageLoad(image, callback) {
if (!image.complete ||
(typeof image.naturalWidth !== "undefined" && image.naturalWidth === 0)) {
image.addEventListener('load', callback, false);
} else {
callback();
}
}
})(document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment