// ==UserScript== | |
// @name Expand All Images | |
// @namespace zombiearmy.expandimage | |
// @description Expand all images in a 4chan thread | |
// @match *://boards.4chan.org/* | |
// @match *://boards.4channel.org/* | |
// @version 2 | |
// @grant none | |
// ==/UserScript== | |
var expanded = false; | |
//add expand buttons for desktop | |
var navlink = document.getElementsByClassName("navLinks desktop"); | |
for(var i = 0; i < navlink.length; i++) { | |
navlink[i].innerHTML += " [<a href='javascript:toggleImages()'>Toggle Images</a>] "; | |
} | |
//add expand buttons for mobile | |
navlink = document.getElementsByClassName("navLinks mobile"); | |
for(i = 0; i < navlink.length; i++) { | |
navlink[i].innerHTML += '<span class="mobileib button"><a href="javascript:toggleImages()">Expand Images</a></span>'; | |
} | |
window.toggleImages = function() { | |
var thumbs = document.getElementsByClassName("fileThumb"); | |
if(!expanded) { | |
expanded = true; | |
for(var i = 0; i < thumbs.length; i++) { | |
var img = thumbs[i].getElementsByTagName('img')[0]; | |
if (img.alt != "File deleted.") { | |
ImageExpansion.expand(img); | |
} | |
} | |
}else{ | |
expanded = false; | |
var collapseWebm = document.getElementsByClassName("collapseWebm"); | |
var expandedWebm = document.getElementsByClassName("expandedWebm"); | |
while(collapseWebm.length > 0){ | |
collapseWebm[0].remove(); | |
} | |
while(expandedWebm.length > 0){ | |
expandedWebm[0].remove(); | |
} | |
for(var i = 0; i < thumbs.length; i++) { | |
if(thumbs[i].style.display=="none"){ | |
thumbs[i].style.display = null; | |
} | |
var img = thumbs[i].getElementsByTagName('img')[1]; | |
if (img !== undefined) { | |
ImageExpansion.contract(img); | |
} | |
} | |
} | |
} |
Thanks! Here is the above code in bookmarklet form:
var t=document.getElementsByClassName("fileThumb");
for(var i=0;i<t.length;i++){ImageExpansion.expand(t[i].getElementsByTagName('img')[0]);}
(without the fancy button and toggle behavior)
True bookmarklet with the (function(){...})(); IIFE wrapper:
javascript:(function(){var t=document.getElementsByClassName("fileThumb");for(var i=0;i<t.length;i++){ImageExpansion.expand(t[i].getElementsByTagName('img')[0]);}})();
The links are showing on the page, but when I click them in Firefox 58.0.22 nothing happens. The console says ReferenceError: toggleImages is not defined
. I've tried messing around but can't find a solution. Any help would be appreciated.
The script would stop if it encountered a deleted image in a thread. Here there is a quick fix:
Edit: Videos weren't collapsing, fixed that too.
window.toggleImages = function() {
var thumbs = document.getElementsByClassName("fileThumb");
if(!expanded) {
expanded = true;
for(var i = 0; i < thumbs.length; i++) {
var img = thumbs[i].getElementsByTagName('img')[0];
if (img.alt != "File deleted.") {
ImageExpansion.expand(img);
}
}
}else{
expanded = false;
var collapseWebm = document.getElementsByClassName("collapseWebm");
var expandedWebm = document.getElementsByClassName("expandedWebm");
while(collapseWebm.length > 0){
collapseWebm[0].remove();
}
while(expandedWebm.length > 0){
expandedWebm[0].remove();
}
for(var i = 0; i < thumbs.length; i++) {
if(thumbs[i].style.display=="none"){
thumbs[i].style.display = null;
}
var img = thumbs[i].getElementsByTagName('img')[1];
if (img !== undefined) {
ImageExpansion.contract(img);
}
}
}
}
Also the the includes should be updated to this:
// @include *://boards.4chan.org/*
// @include *://boards.4channel.org/*
Not sure if anyone is still using this in 2022 (I'm not!) but I just updated it with Maurogch's fixes (thank you!!!!) because this page still seems to still come up on google searches, so it might as well be functional :)
If anyone is confused on how To use this code, right click the page -> inspect element -> console -> paste this code in
Then go to the bottom of the 4chan thread and click "Toggle Images"
Done!
perfect way to enlarge all images in a 4chan thread to easily download them in full resolution. +1 !!!