☰

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.6
  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 ;
  48. // displays Thread number (Lower right corner)
  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. var ITL = obj.posts[0].images;
  60.  
  61.  
  62. function dem(){
  63.     var cox = "";
  64.     for(var i = 0; i < ITL ; i++){
  65.         if( obj.posts[i].tim === undefined ){
  66.         }else{
  67.                 var content = `
  68.                     <a href="`+ LocIMG + obj.posts[i].tim + obj.posts[i].ext +`" target="_blank">
  69.                         <img src="`+ LocIMG + obj.posts[i].tim +`s.jpg" height="`+ obj.posts[i].tn_h +`" width="`+ obj.posts[i].tn_w +`"/>
  70.                     </a>
  71.                 `;
  72.             cox += "<li>"+ content +"</li>";
  73.         }
  74.     };
  75.  
  76.     return cox;
  77. };
  78.  
  79.  
  80. el =`
  81. <!--- CSS --->
  82. <style>
  83.  
  84.     /* hide <pre> object */
  85.     pre{
  86.         display: none;
  87.     }
  88.  
  89.     ul{
  90.         list-style-type: none;
  91.         margin:5px;
  92.         padding-left:0px;
  93.     }
  94.     ul li {
  95.         list-style-type: none;
  96.         padding-left:0px;
  97.         border:solid 1px black;
  98.         display:inline-block;
  99.     }
  100.  
  101. </style>
  102.  
  103.  
  104. <!--- --->
  105.     <div style="background:#eeeeee; position: absolute; top:25px; margin-left:auto; margin-right:auto; left:0; right:0; text-align:center;">
  106.  
  107.             <ul>`+ dem() +`</ul>
  108.  
  109. 	</div>
  110.  
  111. 	<div style="position:fixed; bottom:0px; right:0px;">
  112.         <h1>`+dirhref+`</h1>
  113.     </div>`;
  114.  
  115. //ADDS el to PAGE
  116. document.body.innerHTML += el;
  117. })();