IMDB Large Images [fork]

Large iMDB images when you hover over them.

目前為 2020-10-18 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name IMDB Large Images [fork]
  3. // @version 1.0.11-joey3
  4. // @description Large iMDB images when you hover over them.
  5. // @namespace https://greasyfork.org/en/scripts/11249-imdb-large-images
  6. // @homepage https://greasyfork.org/en/scripts/11249-imdb-large-images
  7. // @license ISC
  8. // @contributors joeytwiddle
  9. // @match http://imdb.com/*
  10. // @match https://imdb.com/*
  11. // @match http://*.imdb.com/*
  12. // @match https://*.imdb.com/*
  13. // @icon data:image/png;base64,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
  14. // @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
  15. // @grant none
  16. // ==/UserScript==
  17.  
  18. this.$ = this.jQuery = jQuery.noConflict(true);
  19.  
  20. /*!
  21. * hoverIntent v1.8.0 // 2014.06.29 // jQuery v1.9.1+
  22. * http://cherne.net/brian/resources/jquery.hoverIntent.html
  23. *
  24. * You may use hoverIntent under the terms of the MIT license. Basically that
  25. * means you are free to use hoverIntent as long as this header is left intact.
  26. * Copyright 2007, 2014 Brian Cherne
  27. */
  28. (function($){$.fn.hoverIntent=function(handlerIn,handlerOut,selector){var cfg={interval:100,sensitivity:6,timeout:0};if(typeof handlerIn==="object"){cfg=$.extend(cfg,handlerIn)}else{if($.isFunction(handlerOut)){cfg=$.extend(cfg,{over:handlerIn,out:handlerOut,selector:selector})}else{cfg=$.extend(cfg,{over:handlerIn,out:handlerIn,selector:handlerOut})}}var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if(Math.sqrt((pX-cX)*(pX-cX)+(pY-cY)*(pY-cY))<cfg.sensitivity){$(ob).off("mousemove.hoverIntent",track);ob.hoverIntent_s=true;return cfg.over.apply(ob,[ev])}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=false;return cfg.out.apply(ob,[ev])};var handleHover=function(e){var ev=$.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t)}if(e.type==="mouseenter"){pX=ev.pageX;pY=ev.pageY;$(ob).on("mousemove.hoverIntent",track);if(!ob.hoverIntent_s){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}}else{$(ob).off("mousemove.hoverIntent",track);if(ob.hoverIntent_s){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob)},cfg.timeout)}}};return this.on({"mouseenter.hoverIntent":handleHover,"mouseleave.hoverIntent":handleHover},cfg.selector)}})(jQuery);
  29.  
  30. $(document).ready(function() {
  31.  
  32. var cssCode = "\
  33. #largeImagePopover { \
  34. position: absolute; \
  35. box-shadow: 0 0 80px #0009; \
  36. cursor: pointer; \
  37. z-index: 1000; \
  38. } \
  39. ";
  40.  
  41. var styleElement = document.createElement("style");
  42. styleElement.type = "text/css";
  43. if (styleElement.styleSheet) {
  44. styleElement.styleSheet.cssText = cssCode;
  45. } else {
  46. styleElement.appendChild(document.createTextNode(cssCode));
  47. }
  48. document.getElementsByTagName("head")[0].appendChild(styleElement);
  49.  
  50. var hoverInFunction = function (e) {
  51. var mouseX = e.pageX;
  52. var mouseY = e.pageY;
  53.  
  54. //console.log("[imdb_large_images.user.js] Hover detected", mouseX, mouseY);
  55.  
  56. var hoveredImage = this.src ? this : $(this).find('img').get(0);
  57. hoveredImage.style.cursor = 'progress';
  58.  
  59. $('div#largeImagePopover, div.largeImagePopover').remove();
  60. $("body").css("overflow", "auto");
  61.  
  62. // setup the large image
  63. var popImage = document.createElement("img");
  64. var src = hoveredImage.src;
  65.  
  66. src = src.replace(/_V1\.?.*?_\./g,"_V1_.");
  67. src = src.replace(/_V1_?\.jpg/,"_V1_SY"+window.innerHeight+"_.jpg");
  68.  
  69. popImage.src = src
  70. popImage.alt = hoveredImage.alt;
  71. popImage.border = 0;
  72.  
  73. // setup the image link
  74. var popLink = document.createElement("a");
  75. popLink.href = $(hoveredImage).parents('a').attr('href');
  76. popLink.appendChild(popImage);
  77.  
  78. // setup the image div
  79. var popDiv = document.createElement("div");
  80. popDiv.id = 'largeImagePopover';
  81. popDiv['class'] = 'largeImagePopover';
  82. popDiv.appendChild(popLink);
  83. $(popDiv).hide();
  84.  
  85. // attach events to new image
  86. $(popImage).mouseout( function() {
  87. $(popDiv).remove();
  88. });
  89. $(popImage).mousemove( function(e) {
  90. var distX = e.pageX - mouseX;
  91. var distY = e.pageY - mouseY;
  92. var dist = Math.sqrt(distX * distX + distY * distY);
  93. //console.log("[imdb_large_images.user.js] Motion detected", dist);
  94. if (dist > 25) {
  95. $(popDiv).remove();
  96. }
  97. });
  98. $(popImage).css('cursor','crosshair');
  99.  
  100. $(popImage).load( function() {
  101. // these assignments may differ per browser
  102. var pageXOffset = window.pageXOffset;
  103. var pageYOffset = window.pageYOffset;
  104. var innerWidth = window.innerWidth;
  105. var innerHeight = window.innerHeight;
  106.  
  107. // shrink image if wider than screen
  108. if(popImage.width > innerWidth-17) {
  109. var tmpW = popImage.width;
  110. popImage.width = Math.min(popImage.width,innerWidth-17);
  111. popImage.height = (popImage.width/tmpW) * popImage.height;
  112. }
  113. if(popImage.height > innerHeight) {
  114. var tmpH = popImage.height;
  115. popImage.height = Math.min(popImage.height,innerHeight);
  116. popImage.width = (popImage.height/tmpH) * popImage.width;
  117. }
  118.  
  119. // center image on mouse cursor
  120. var x = mouseX - parseInt(popImage.width/2);
  121. var y = mouseY - parseInt(popImage.height/2);
  122.  
  123. // move image down and right if off screen to the left or top
  124. x = Math.max(x,pageXOffset);
  125. y = Math.max(y,pageYOffset);
  126.  
  127. // move image up or left if off screen to the right or bottom
  128. x = Math.min(x, pageXOffset + innerWidth - 17 - popImage.width);
  129. y = Math.min(y, pageYOffset + innerHeight - popImage.height);
  130.  
  131. // move image down and right if off screen to the left or top
  132. x = Math.max(x,pageXOffset);
  133. y = Math.max(y,pageYOffset);
  134.  
  135. $(popImage.parentNode.parentNode).css('left',x);
  136. $(popImage.parentNode.parentNode).css('top',y);
  137. $(popImage.parentNode.parentNode).show();
  138.  
  139. // For some reason the <div> is 5 pixels taller than the image, which leaves a little transparent box below the image, before the shadow starts
  140. // To prevent that, we force the desired size of the <div>
  141. $(popImage.parentNode.parentNode).css({ width: popImage.width, height: popImage.height });
  142.  
  143. hoveredImage.style.cursor = 'crosshair';
  144. });
  145.  
  146. $('body').append($(popDiv));
  147. };
  148.  
  149. $(document).keyup(function(e) {
  150. if (e.keyCode == 27) {
  151. $('div#largeImagePopover, div.largeImagePopover').remove();
  152. }
  153. });
  154.  
  155. function checkImages() {
  156. $("img[src*='_V1']").not("img[src*='_ZA']").not(".imageDone").each(function() {
  157. // For thumbnails in the recommended "More Like This" section, we need to give IMDB time to select the item and show the overview, before we overlay the large image.
  158. var interval = $(this).closest('.rec_item').length ? 300 : 100;
  159. $(this).addClass('imageDone').css('cursor','crosshair').hoverIntent({ over: hoverInFunction, interval: interval });
  160. });
  161. window.setTimeout(checkImages, 1000);
  162. }
  163.  
  164. checkImages();
  165.  
  166. });