Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // ==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('<style>#hover_overlay{width:100%;height:100%;top:0;right:0;position:fixed;pointer-events:none;display:flex;z-index:300}#hover_overlay_image{max-height:100%;max-width:100%;margin:auto;display:none}</style>');
- $('body').append('<div id="hover_overlay"></div>');
- 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 ? '<video />' : '<img />', {
- 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);
- })();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement