☰

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