☰

4chan json Image Viewer

All images in a thread in a simple image only view.

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