Show actual size image when clicking on it. It also unmutes the stories automatically
// ==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);
}
});