[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


[Userscript] Image viewer - Hỗ trợ xem ảnh có nền trong suốt và ảnh lớn YOBYNp4
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 wallpaper to highlight transparent image. Support to view the large image by holding the right mouse and drag.
// @version      2.1.0
// @icon        http://i.imgur.com/ItcjCPc.png
// @author      Zzbaivong
// @oujs:author  baivong
// @license      MIT; https://baivong.mit-license.org/license.txt
// @match        http://*/*
// @match        https://*/*
// @noframes
// @supportURL  https://github.com/lelinhtinh/Userscript/issues
// @run-at      document-start
// @grant        none
// ==/UserScript==

(function () {

    'use strict';

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


    // Do not change the code below this line, unless you know how.
    var doc = document,
        color = theme === 'light' ? ['#eee', 'white'] : ['gray', '#444'];

    if (doc.contentType.indexOf('image/') !== 0) return;

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

    }

    function addstyle(aCss) {
        var head = doc.getElementsByTagName('head')[0];
        if (!head) return null;
        var style = doc.createElement('style');
        style.setAttribute('type', 'text/css');
        style.textContent = aCss;
        head.appendChild(style);
        return style;
    }

    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


https://devs.forumvi.com/viewimage.forum?u=https://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