☰

4chan json Image Viewer

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

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

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