[Userscript] Image viewer - Hỗ trợ xem ảnh có nền trong suốt và ảnh lớn

  Bài viết hay nhất1
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



Hiển thị rõ phần trong suốt của ảnh


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==
// @name         Image viewer
// @namespace    http://devs.forumvi.com/
// @description  Use grid background to highlight transparent image. Support to view the large image by holding the right mouse and drag.
// @version      2.0.0
// @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';

    /**
     * Background mode
     * @type {string} dark
     *                light
     */
    var theme = 'dark',


        color,
        doc = document;

    if (theme === 'light') {
        color = ['#eee', 'white'];
    } else {
        color = ['gray', '#444'];
    }

    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-attachment: fixed !important; background-position: 0px 0px, 10px 10px !important; background-size: 20px 20px !important; background-image: linear-gradient(45deg, ' + color[0] + ' 25%, transparent 25%, transparent 75%, ' + color[0] + ' 75%, ' + color[0] + ' 100%),linear-gradient(45deg, ' + color[0] + ' 25%, ' + color[1] + ' 25%, ' + color[1] + ' 75%, ' + color[0] + ' 75%, ' + color[0] + ' 100%) !important;} body > img {background-color: transparent !important; background-image: none !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);

    }

}());



Ứng dụng xem ảnh trong forumotion


Demo


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

Hướng dẫn


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)}

Tags: #userscript #photo #viewer
  Bài viết hay nhất2
Cập nhật

Sửa lỗi trong phiên bản Firefox mới.
  Bài viết hay nhất3
Cập nhật v2.0.0 : Sửa lỗi mất lưới nền do trình duyệt cập nhật phiên bản mới.
  Bài viết hay nhất4
You cannot reply to topics in this forum