Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  

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

    Quản trị viên

    avatar

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     on 09.08.16 14:23 

    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==
    // @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);

        }

    }());



    Ứng dụng xem ảnh trong forumotion

    Demo: http://devs.forumvi.com/viewimage.forum?u=http://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
    You cannot reply to topics in this forum