☰

InstaZoom

Show actual size image when clicking on it

当前为 2020-02-06 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         InstaZoom
  3. // @namespace    http://www.jeroendekort.nl
  4. // @version      0.8
  5. // @description  Show actual size image when clicking on it
  6. // @icon         https://instagramstatic-a.akamaihd.net/h1/images/ico/favicon.ico/dfa85bb1fd63.ico
  7. // @author       nljuggler
  8. // @match        https://*.instagram.com/*
  9. // @grant        unsafeWindow
  10. // @require      https://code.jquery.com/jquery-2.2.4.js
  11. // ==/UserScript==
  12.  
  13. $(function(){
  14.   addStyleSheet();  
  15.   createLightbox();
  16.   $(document).on("click","._si7dy, .FFVAD, .KL4Bh, ._9AhH0, .eLAPa _23QFA", function() {
  17.     var $divWithImage = $(this).parent().find('.FFVAD');
  18.     // Log the image url to the console for easy access.
  19.     console.log($divWithImage);
  20.     $('body').find('#nljugglerLightbox #lightboxImage').attr('src', $divWithImage.attr('src'));
  21.     $('#nljugglerLightbox').show();
  22.     if ($(this).hasClass("_si7dy")){
  23.       $(this).remove();
  24.     }
  25.     // Remove Instagrams own overlay (if at all displayed),
  26.     // so you don't need to click twice to hide the current image.
  27.     $('button.wpO6b').click();
  28.   });
  29.  
  30.   $('#lightboxImage').click(function() {
  31.     $(this).parent().hide();
  32.   });
  33.  
  34.   function createLightbox(){
  35.     var lightbox = "<div id='nljugglerLightbox'><img id='lightboxImage'/></div>";
  36.     $('body').append(lightbox);
  37.   }
  38.  
  39.   function addStyleSheet (){
  40.     addCss('#nljugglerLightbox { position: fixed; top: 10px; left: 40%; width: auto; transform: translateX(-40%); max-height:900px; z-index:1000; overflow:scroll; border:solid 2px black; }'+
  41.            '#lightboxImage {width: auto; }');
  42.     console.log('InstaZoom styles added');
  43.   } 
  44.  
  45.   function addCss(cssString) {
  46.     var head = document.getElementsByTagName('head')[0];
  47.     var newCss = document.createElement('style');
  48.     newCss.type = "text/css";
  49.     newCss.innerHTML = cssString;
  50.     head.appendChild(newCss);
  51.   }
  52. });