InstaZoom

Show actual size image when clicking on it

当前为 2020-05-12 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name InstaZoom
  3. // @namespace http://www.jeroendekort.nl
  4. // @version 0.11
  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. $('body').find('#nljugglerLightbox #lightboxImage').attr('src', $divWithImage.attr('src'));
  20. $('#nljugglerLightbox').show();
  21.  
  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.  
  28. var $imageInTimeline = $(this).closest('._8Rm4L');
  29. if ($imageInTimeline.length == 0){
  30. $('[role="dialog"] > div > button.wpO6b').click();
  31. }
  32. });
  33.  
  34. $('#lightboxImage').click(function() {
  35. $(this).parent().hide();
  36. });
  37.  
  38. function createLightbox(){
  39. var lightbox = "<div id='nljugglerLightbox'><img id='lightboxImage'/></div>";
  40. $('body').append(lightbox);
  41. }
  42. function addStyleSheet (){
  43. 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; }'+
  44. '#lightboxImage {width: auto; }');
  45. console.log('InstaZoom styles added');
  46. }
  47.  
  48. function addCss(cssString) {
  49. var head = document.getElementsByTagName('head')[0];
  50. var newCss = document.createElement('style');
  51. newCss.type = "text/css";
  52. newCss.innerHTML = cssString;
  53. head.appendChild(newCss);
  54. }
  55. });