☰

4chan json Image Viewer

All images in a thread in a simple image only view, Change Thread "Number".

目前為 2020-12-17 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         4chan json Image Viewer
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1.1
  5. // @description  All images in a thread in a simple image only view, Change Thread "Number".
  6. // @author       Czy [2020]
  7. // @match        https://a.4cdn.org/*/thread/*.json
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. // -- keep up to date, may add New Functions in the future.
  12.  
  13. //START// Thread Location INFORMATION -------------------------------------------------------------------------------------------|
  14. /*
  15.   //LABEL     //           URL ADDRESS + Sub +  /thread/  + Number  + .JSON
  16.   //BREAKDOWN // "https://a.4cdn.org/" + wg  + "/thread/" + 7662864 + ".json"
  17.   //FULL      // https://a.4cdn.org/wg/thread/7662864.json
  18.  
  19. // DEMO INFO LAYOUT
  20. {
  21. 	"posts":[
  22. 		{
  23. 		Simgle Occurance (first Post)
  24. 			"sub": "", 		// Thread Name
  25. 			"images": 273,	// Thread Total Images
  26. 		EACH Occurance
  27. 			"no": 7662864, 	// Post Number (Low -> High) // READ Loop ADD Repeat.
  28. 			"ext": ".jpg",	// File Extention	|	S_ext:[ ".jpg", ".png" ]
  29. 			"w": 5120,		// Full-Image Width
  30. 			"h": 2880,		// Full-Image Height
  31. 			"tn_w": 250,	// Mini-Image Width
  32. 			"tn_h": 140,	// Mini-Image Height
  33. 			"tim": 1601744276955,	// Image File Code
  34. 									// Full-Image URL: "https://i.4cdn.org/wg/"+ tim +".jpg"
  35. 									// Mini-Image URL: "https://i.4cdn.org/wg/"+ tim +"s.jpg"
  36. 		}
  37. 	]
  38. }
  39. */
  40. //END// Thread Location INFORMATION -------------------------------------------------------------------------------------------|
  41.  
  42. (function() {
  43.     'use strict';
  44.  
  45.  
  46.     var el ;
  47. function dirco(a){ return window.location.pathname.split("/")[a]};
  48. // displays Thread number (Lower right corner)
  49. var dirhref = dirco(3).replace(".json", ""); // thread number
  50. var dirthread = dirco(1); // thread name
  51.  
  52.  
  53.  
  54.  
  55. // convert page json to string
  56. var JObj = document.getElementsByTagName("pre")[0].innerHTML;
  57. console.log( JObj );
  58.     var obj = JSON.parse( JObj );
  59. console.log( obj.posts[0].tim +" /demo/ "+ obj.posts[0].ext );
  60.  
  61. var LocIMG = "https://i.4cdn.org/"+dirthread+"/";
  62.  
  63. // just data
  64. var ITL = obj.posts[0].images; // thread total images
  65. var val = document.images.length; // total page images
  66.  
  67. function dem(){
  68.     var cox = "";
  69.     for(var i = 0; i < obj.posts.length; i++){
  70.         if( obj.posts[i].tim === undefined ){
  71.         }else{
  72.                 var content = `
  73.                     <a href="`+ LocIMG + obj.posts[i].tim + obj.posts[i].ext +`" target="_blank">
  74.                         <img src="`+ LocIMG + obj.posts[i].tim +`s.jpg" height="`+ obj.posts[i].tn_h +`" width="`+ obj.posts[i].tn_w +`" />
  75.                     </a>
  76.                 `;
  77.             cox += "<li>"+ content +"</li>";
  78.         }
  79.     };
  80.  
  81.     return cox;
  82. };
  83.  
  84.  
  85. el =`
  86. <!--- CSS --->
  87. <style>
  88.  
  89.     /* hide <pre> object */
  90.     pre{
  91.         display: none;
  92.     }
  93.  
  94.     ul{
  95.         list-style-type: none;
  96.         margin:5px;
  97.         padding-left:0px;
  98.     }
  99.     ul li {
  100.         list-style-type: none;
  101.         padding-left:0px;
  102.         border:solid 1px black;
  103.         display:inline-block;
  104.     }
  105.  
  106. </style>
  107.  
  108.  
  109. <!--- --->
  110.     <div style="background:#eeeeee; position: absolute; top:25px; margin-left:auto; margin-right:auto; left:0; right:0; text-align:center;">
  111.  
  112.             <ul>`+ dem() +`</ul>
  113.  
  114. 	</div>
  115.  
  116. 	<div style="position:fixed; bottom:0px; right:0px;">
  117.         <h1>`+dirhref+`</h1>
  118.     </div>`;
  119.  
  120. //ADDS el to PAGE
  121. document.body.innerHTML += el;
  122. })();