InstaZoom

Show actual size image when clicking on it

当前为 2017-09-29 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name InstaZoom
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.3
  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. console.log('Running...');
  15. createLightbox();
  16. $(document).on("click","._si7dy, ._4rbun", function() {
  17. console.log('click');
  18. var $otherDiv = $(this).parent().find('._4rbun');
  19. console.log($otherDiv.find('img').attr('src'));
  20. $('body').find('#nljugglerLightbox #lightboxImage').attr('src', $otherDiv.find('img').attr('src'));
  21. $('#nljugglerLightbox').show();
  22. if ($(this).hasClass("_si7dy")){
  23. $(this).remove();
  24. }
  25. });
  26.  
  27. $('#lightboxImage').click(function() {
  28. $(this).parent().hide();
  29. });
  30.  
  31. function createLightbox(){
  32. var lightbox = "<div id='nljugglerLightbox' style='position: fixed; top: 10px; left: 50%;transform: translateX(-50%); max-height:900px; z-index:100; overflow:auto; border:solid 2px black;'><img id='lightboxImage' width='100%' /></div>";
  33. $('body').append(lightbox);
  34. }
  35. });