// ==UserScript==
// @name Doushio image hover
// @namespace http://your.homepage/
// @version 0.1
// @description enter something useful
// @author You
// @match http://*.doushio.com/*
// @grant none
// ==/UserScript==
(function(){
$('head').append('');
$('body').append('
');
var mouseoverTarget;
function imageHoverPreview(e){
// Check if hovering over image or image is expanded by clicking
var $target = $(mouseoverTarget);
if (!$target.is('img') || $target.data('thumbSrc'))
return fadeOutHoverOverlay();
var src = $target.closest('a').attr('href');
var isWebm = /\.webm/i.test(src);
var $img = $(isWebm ? '' : '
', {
id: 'hover_overlay_image',
'src': src,
autoplay: true,
loop: true,
});
// Gracefully fade out previous image
var $old = $('#hover_overlay_image');
if ($old.length){
fadeOutHoverOverlay(function(){
fadeInHoverOverlay($img);
});
}
else
fadeInHoverOverlay($img);
}
function fadeInHoverOverlay($img){
$('#hover_overlay').append($img);
$('#hover_overlay_image').fadeIn({duration: 200});
}
function fadeOutHoverOverlay(cb){
// Do nothing, if image is already removed
var $img = $('#hover_overlay_image');
if (!$img.length)
return;
$img.fadeOut({duration: 200, complete: function(){
$img.remove();
// More responsive transition with fast pointer movements
imageHoverPreview();
}});
if (typeof cb === 'function')
cb();
}
$DOC.on('mouseover', function(e){
mouseoverTarget = e.target;
});
$DOC.on('mouseover', imageHoverPreview).on('click', 'img, video', fadeOutHoverOverlay);
})();