InstaZoom

Show actual size image when clicking on it. It also unmutes the stories automatically
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         InstaZoom
// @namespace    http://www.jeroendekort.nl
// @version      0.17
// @description  Show actual size image when clicking on it. It also unmutes the stories automatically
// @icon         https://cdn.iconscout.com/icon/free/png-256/instagram-53-151118.png
// @author       nljuggler
// @license      MIT
// @match        https://*.instagram.com/*
// @grant        unsafeWindow
// @require      https://code.jquery.com/jquery-2.2.4.js
// ==/UserScript==

$(function(){
  var muteOverride = false;
  addStyleSheet();
  createLightbox();

    $(document).on("click","article .html-div div[role=button] > div > div > div[role=button] div:nth-child(2), article div > div > div[role=button][aria-hidden=true] div:nth-child(2)", function(e) {
    // Ignore clicks coming from carousel next/prev buttons
    if ($(e.target).closest('button, [aria-label*="Next"], [aria-label*="Previous"], [aria-label*="Volgende"], [aria-label*="Vorige"]').length) return;
    if (!$(e.target).closest($(this)).length) return;

    var $divWithImage = $(this).parent().find('img');
    $('body').find('#nljugglerLightbox #lightboxImage').attr('src', $divWithImage.attr('src'));
    $('#nljugglerLightbox').show();

    if ($(this).hasClass("_si7dy")){
      alert('Found!');
      $(this).remove();
    }
    // Remove Instagrams own overlay (if at all displayed),
    // so you don't need to click twice to hide the current image.

    var $imageInTimeline = $(this).closest('._8Rm4L');
    if ($imageInTimeline.length == 0){
        $('[role="dialog"] > div > button.wpO6b').click();
    }
  });

    // Right click on insta video to enable video controls
    $(document).on("contextmenu","div[role='presentation']", function(e) {
        const el = $(this).parent();
        el.remove();
        e.stopPropagation();
    });

  $('#lightboxImage').click(function() {
    $(this).parent().hide();
    $(this).attr('src', '');
  });

  // Unmute story when muted
    // Select the target node
const targetNode = document.querySelector('body');

// Create a MutationObserver instance
const mutationObserver = new MutationObserver((mutationsList, observer) => {
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            // Check if the added nodes match the selector
            const addedNodes = mutation.addedNodes;
            for (const node of addedNodes) {
                if (node.matches('div[aria-label*="udio"] svg')) {
                    if (!muteOverride) {
                        const audioButton = document.querySelector('div[aria-label*="udio"] svg');
                        if (audioButton && audioButton.getAttribute('aria-label').includes('muted')) {
                            audioButton.click();
                        }
                    }
                }
            }
        }
    }
});

// Configuration of the observer:
const config = { childList: true, subtree: true };

// Start observing the target node for DOM changes
mutationObserver.observe(targetNode, config);



  //$('body').on('DOMSubtreeModified', '._ac0a', function(){
  //  if (!muteOverride && $('button[aria-label*="udio"] svg')[0] != undefined && $('button[aria-label*="udio"] svg').attr('aria-label').includes('muted'))
 //   {
 //      $('button[aria-label*="udio"]').click();
 //    }
//  });

  // (Un)mute by hitting the M key
  $(document).keyup(function(e) {
     if (e.which == 86)
     {
         console.log('check');
       $('div[aria-label*="udio"]').click();
       muteOverride = true;
     }
  });

  function createLightbox(){
    var lightbox = "<div id='nljugglerLightbox'><img id='lightboxImage'/></div>";
    $('body').append(lightbox);
    $('#nljugglerLightbox').hide();
  }

  function addStyleSheet (){
    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; }'+
           '#lightboxImage {width: auto; }');
    console.log('InstaZoom styles added');
  }

  function addCss(cssString) {
    var head = document.getElementsByTagName('head')[0];
    var newCss = document.createElement('style');
    newCss.type = "text/css";
    newCss.innerHTML = cssString;
    head.appendChild(newCss);
  }
});