☰

InstaZoom

Show actual size image when clicking on it. It also unmutes the stories automatically

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

  1. // ==UserScript==
  2. // @name         InstaZoom
  3. // @namespace    http://www.jeroendekort.nl
  4. // @version      0.15
  5. // @description  Show actual size image when clicking on it. It also unmutes the stories automatically
  6. // @icon         https://cdn.iconscout.com/icon/free/png-256/instagram-53-151118.png
  7. // @author       nljuggler
  8. // @license      MIT
  9. // @match        https://*.instagram.com/*
  10. // @grant        unsafeWindow
  11. // @require      https://code.jquery.com/jquery-2.2.4.js
  12. // ==/UserScript==
  13.  
  14. $(function(){
  15.   var muteOverride = false;
  16.   addStyleSheet();
  17.   createLightbox();
  18.   $(document).on("click","._si7dy, .FFVAD, .KL4Bh, ._9AhH0, .eLAPa _23QFA,._aagu ._aagw", function() {
  19.     var $divWithImage = $(this).parent().find('img');
  20.     $('body').find('#nljugglerLightbox #lightboxImage').attr('src', $divWithImage.attr('src'));
  21.     $('#nljugglerLightbox').show();
  22.  
  23.     if ($(this).hasClass("_si7dy")){
  24.       $(this).remove();
  25.     }
  26.     // Remove Instagrams own overlay (if at all displayed),
  27.     // so you don't need to click twice to hide the current image.
  28.  
  29.     var $imageInTimeline = $(this).closest('._8Rm4L');
  30.     if ($imageInTimeline.length == 0){
  31.         $('[role="dialog"] > div > button.wpO6b').click();
  32.     }
  33.   });
  34.  
  35.   $('#lightboxImage').click(function() {
  36.     $(this).parent().hide();
  37.     $(this).attr('src', '');
  38.   });
  39.  
  40.   // Unmute story when muted
  41.   $('body').on('DOMSubtreeModified', '._a3gq', function(){
  42.     if (!muteOverride && $('button[aria-label*="audio"] svg').attr('aria-label').includes('muted'))
  43.      {
  44.        $('button[aria-label*="audio"]').click();
  45.      }
  46.   });
  47.  
  48.   // (Un)mute by hitting the M key
  49.   $(document).keyup(function(e) {
  50.      if (e.which == 77)
  51.      {
  52.        $('button[aria-label*="audio"]').click();
  53.        muteOverride = true;
  54.      }
  55.   });
  56.  
  57.   function createLightbox(){
  58.     var lightbox = "<div id='nljugglerLightbox'><img id='lightboxImage'/></div>";
  59.     $('body').append(lightbox);
  60.     $('#nljugglerLightbox').hide();
  61.   }
  62.  
  63.   function addStyleSheet (){
  64.     addCss('#nljugglerLightbox { position: fixed; top: 10px; left: 40%; width: auto; transform: translateX(-40%); max-height:1000px; z-index:1000; overflow:scroll; border:solid 2px black; }'+
  65.            '#lightboxImage {width: auto; }');
  66.     console.log('InstaZoom styles added');
  67.   }
  68.  
  69.   function addCss(cssString) {
  70.     var head = document.getElementsByTagName('head')[0];
  71.     var newCss = document.createElement('style');
  72.     newCss.type = "text/css";
  73.     newCss.innerHTML = cssString;
  74.     head.appendChild(newCss);
  75.   }
  76. });