Đă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 trên firefox

    Quản trị viên

    avatar

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     on 21.08.15 13:48 

    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.

    Lưu ý: Image viewer chỉ hoạt động trên Firefox

    Trước đây mình dùng add-on Pic Style, sau một thời gian dùng, mình thấy trình duyệt hơi chậm, xem trong dev tool mới phát hiện lỗi sinh thẻ style không ngừng, dùng càng lâu thì nó lặp càng nhiều, vì thế mình mới viết userscript này.
    Lỗi của add-on Pic Style:


    Cài đặt: http://goo.gl/Gaadhv

    Code:
    // ==UserScript==
    // @name         Image viewer
    // @namespace    http://devs.forumvi.com/
    // @version      1.0
    // @icon         http://i.imgur.com/ItcjCPc.png
    // @description  Image viewer for Firefox
    // @include      *
    // @copyright    2014+, Zzbaivong
    // @run-at       document-end
    // @downloadURL  https://dl.dropboxusercontent.com/u/126946313/Userscript/image-viewer/image_view.user.js
    // @updateURL    https://dl.dropboxusercontent.com/u/126946313/Userscript/image-viewer/image_view.meta.js
    // @grant        none
    // ==/UserScript==
    (function () {
       var theme = "light"; // dark|light
       var url;
       if (theme == "light") {
          url = 'data:image/gif;base64,R0lGODlhCgAKAIAAAAAAAP///yH5BAEAAAAALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw=='
       } else {
          url = 'data:image/gif;base64,R0lGODlhCgAKAPAAACIiIgAAACH5BAHoAwEALAAAAAAKAAoAAAIRjA2Zhwoc3GMSykqd1VltzxQAOw=='
       }
       if (document.contentType.indexOf("image/") == 0) {
          var theme = document.createElement("style");
          theme.type = "text/css";
          theme.innerHTML = "body{background:url(" + url + ") repeat scroll rgba(0, 0, 0, 0.3);}\
            body > img.decoded{background-color: rgba(0, 0, 0, 0.1);}\
            body > img.decoded:hover{outline: 3px solid #333;}";
          document.head.appendChild(theme);
       }
    }());



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

    Zzbaivong

    Tags: #userscript
    You cannot reply to topics in this forum