Show actual size image when clicking on it. It also unmutes the stories automatically
// ==UserScript==
// @name InstaZoom
// @namespace http://www.jeroendekort.nl
// @version 0.16
// @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","._si7dy, .FFVAD, .KL4Bh, ._9AhH0, .eLAPa _23QFA,._aagu ._aagw", function() {
var $divWithImage = $(this).parent().find('img');
$('body').find('#nljugglerLightbox #lightboxImage').attr('src', $divWithImage.attr('src'));
$('#nljugglerLightbox').show();
if ($(this).hasClass("_si7dy")){
$(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","._aakl", function(e) {
//alert($(this).InnerHtml);
e.currentTarget.previousSibling.remove();
e.currentTarget.remove();
});
$('#lightboxImage').click(function() {
$(this).parent().hide();
$(this).attr('src', '');
});
// Unmute story when muted
$('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 == 77)
{
$('button[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);
}
});