☰

ETI Image Width

Prevents images from stretching pages sideways with an optional max width

当前为 2015-05-01 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name           ETI Image Width
  3. // @namespace      pendevin
  4. // @description    Prevents images from stretching pages sideways with an optional max width
  5. // @include        http://endoftheinter.net/inboxthread.php*
  6. // @include        http://boards.endoftheinter.net/showmessages.php*
  7. // @include        https://endoftheinter.net/inboxthread.php*
  8. // @include        https://boards.endoftheinter.net/showmessages.php*
  9. // @version        2
  10. // @grant          none
  11. // @require        http://code.jquery.com/jquery-2.1.3.min.js
  12. // ==/UserScript==
  13.  
  14. //set this if you want to have a max width for images
  15. const MAX_WIDTH=1200;
  16. const USE_MAX_WIDTH=false;
  17.  
  18. //ll breaks without noconflict jquery
  19. this.$ = this.jQuery = jQuery.noConflict(true);
  20.  
  21. //livelinks compatiblity *JQUERY
  22. //calls the function on each message-container in a document, including ones added by livelinks
  23. function livelinks(func,extraParams){
  24. 	if(extraParams==undefined)
  25. 		extraParams=null;
  26. 	//run the function on the message-containers currently on the page
  27. 	$('#u0_1 .message-container').each(function(i,container){
  28. 		func(container,extraParams);
  29. 	});
  30. 	//run it on any message-containers added in the future
  31. 	$('#u0_1').on(
  32. 		'DOMNodeInserted',
  33. 		extraParams,
  34. 		function(e){
  35. 			if($(e.target).children('.message-container').length){
  36. 				$(e.target).children('.message-container').each(function(i,container){
  37. 					func(container,e.data);
  38. 				});
  39. 			}
  40. 		}
  41. 	);
  42. }
  43.  
  44. //adds a style to a document and returns the style object *JQUERY
  45. //css is a string, id is an optional string that determines the object's id
  46. function addStyle(css,id){
  47. 	//create a style
  48. 	var style=$('<style type="text/css">');
  49. 	//add the css data to it
  50. 	style.html(css);
  51. 	if(id){
  52. 		//remove any style that has our id
  53. 		$('#'+id).remove();
  54. 		//give our style the id after removing the other stuff. idk if it matters, but i'm too lazy to find out
  55. 		style.attr('id',id);
  56. 	}
  57. 	//add the style into the head
  58. 	$('head').append(style);
  59. 	//we're outta here
  60. 	return style;
  61. }
  62.  
  63. //if the image is a side stretcher, fix it
  64. function getSmall(place){
  65. 	//need all the unloaded images
  66. 	var images=$(place).find('.img-placeholder');
  67. 	images.each(function(i,img){
  68. 		img=$(img);
  69. 		var imgWidth=img.width();
  70. 		//this image is too big
  71. 		if(imgWidth>pageWidth){
  72. 			var ratio=img.height()/imgWidth;
  73. 			var id=img.attr('id');
  74. 			var css='\n\
  75. 				.message #'+id+', .message #'+id+' > img{\n\
  76. 					max-width:'+pageWidth+'px;\n\
  77. 					max-height:'+parseInt(pageWidth*ratio)+'px;\n\
  78. 				}\
  79. 			';
  80. 			addStyle(css,'imgWidth_'+id);
  81. 		}
  82. 	});
  83. }
  84.  
  85. //get width of userbar and subtract junk from it
  86. var pageWidth=$('.userbar').width();
  87. pageWidth-=6;
  88. //if we've got avatars on
  89. if($('.userpic').length>0){
  90. 	pageWidth-=156;
  91. }
  92. //if we are using a max width, make sure it's not smaller than the page width
  93. if(USE_MAX_WIDTH&&pageWidth>MAX_WIDTH){
  94. 	pageWidth=MAX_WIDTH;
  95. }
  96.  
  97. livelinks(getSmall);