Userscript này sẽ thay nền xem ảnh dạng lưới, tác dụng của nó thể hiện rõ nhất khi xem ảnh trong suốt. Đối với ảnh lớn, script này hỗ trợ bạn cuộn ảnh thuận tiện hơn bằng cách giữ chuột phải và kéo.

Demo

Cài đặt

Dùng một trong các liên kết sau:

1. https://openuserjs.org/scripts/baivong/Image_viewer
   
2. https://greasyfork.org/vi/scripts/16113-image-viewer
   
3. https://github.com/baivong/Userscript/raw/master/image_viewer/Image_viewer.user.js
   

Mã nguồn

Code:

// ==UserScript==
// @id           image-viewer@devs.forumvi.com
// @name         Image viewer
// @namespace    http://devs.forumvi.com/
// @description  Use grid wallpaper to highlight transparent image. Support to see the large image by holding the right mouse and drag.
// @version      1.0.5
// @icon         http://i.imgur.com/ItcjCPc.png
// @author       Zzbaivong
// @license      MIT
// @match        http://*/*
// @match        https://*/*
// @noframes
// @supportURL   https://github.com/baivong/Userscript/issues
// @run-at       document-idle
// @grant        GM_addStyle
// ==/UserScript==

(function () {

    'use strict';

    var theme = 'light', // dark|light

        url,
        doc = document;

    if (theme === 'light') {
        url = 'data:image/gif;base64,R0lGODlhCgAKAIAAAAAAAP///yH5BAEAAAAALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==';
    } else {
        url = 'data:image/gif;base64,R0lGODlhCgAKAPAAACIiIgAAACH5BAHoAwEALAAAAAAKAAoAAAIRjA2Zhwoc3GMSykqd1VltzxQAOw==';
    }

    function scrollByDragging(container, disableH, disableV) {

        function mouseUp(e) {
            if (e.which !== 3) return;

            window.removeEventListener('mousemove', mouseMove, true);
            container.style.cursor = 'default';
        }

        function mouseDown(e) {
            if (e.which !== 3) return;

            pos = {
                x: e.clientX,
                y: e.clientY
            };

            window.addEventListener('mousemove', mouseMove, true);
            container.style.cursor = 'move';
        }

        function mouseMove(e) {
            if (!disableH) container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
            if (!disableV) container.scrollTop -= (-pos.y + (pos.y = e.clientY));
        }

        var pos = {
            x: 0,
            y: 0
        };

        container.oncontextmenu = function (e) {
            e.preventDefault();
        };

        container.addEventListener('mousedown', mouseDown, false);
        window.addEventListener('mouseup', mouseUp, false);

    }

    if (document.contentType.indexOf('image/') === 0) {

        GM_addStyle('body{background:url(' + url + ') repeat scroll rgba(0, 0, 0, 0.3);} body > img {background-color: transparent !important; display: block; margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0;} body > img:hover {background: rgba(0, 0, 0, 0.4) !important; outline: 3px solid #333;} body > img[style*="cursor: zoom-out;"], body > img.overflowing {position: relative!important;}');

        scrollByDragging(doc.body);
        scrollByDragging(doc.documentElement);

    }

}());

---

Demo: http://devs.forumvi.com/viewimage.forum?u=https://i.imgur.com/Yfl5NFO.gif

Thêm vào CSS:

Code:

/* Image viewer - devs.forumvi.com */
p + center > a[href="javascript:window.close()"]{display:block;padding:15px;background:url('data:image/gif;base64,R0lGODlhCgAKAIAAAAAAAP///yH5BAEAAAAALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==') repeat scroll #dddddd;}
p + center > a[href="javascript:window.close()"] img{border:1px solid transparent}
p + center > a[href="javascript:window.close()"] img:hover{border:1px dotted #c0c0c0;background-color:rgba(0,0,0,0.05)}

Credit

Zzbaivong

---

Tags: #firefox #userscript #photo #viewer #chromium