4chan Gallery

Adds a gallery mode and title to customBoardList.

As of 06. 11. 2014. See the latest version.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name			4chan Gallery
// @version			1.0.8
// @description			Adds a gallery mode and title to customBoardList.
// @include			*://boards.4chan.org/*
// @namespace			https://greasyfork.org/users/3159
// ==/UserScript==

function s(q){var b = document.getElementById(q);return b}
setTimeout(function(){
var boardname = document.getElementsByClassName('boardTitle')[0].innerHTML.split('/ - ')[1];
var boardlink = document.location.href.split('thread/')[0];
var cb = document.getElementsByClassName('customBoardList'),a = 0;
cb[0].insertAdjacentHTML('afterbegin','[<a href="' + boardlink + '">' + boardname + '</a>] ');
cb[1].insertAdjacentHTML('afterbegin','[<a href="' + boardlink + '">' + boardname + '</a>] ');

if (document.location.href.indexOf('/thread/') > 0){
cb[0].insertAdjacentHTML('beforeend','[<a id="glink" href="#">Gallery</a>]');
cb[1].insertAdjacentHTML('beforeend','[<a id="glink2" href="#">Gallery</a>]');
s("glink").onclick=function(){view()};
s("glink2").onclick=function(){view()};
s('bottom').insertAdjacentHTML('afterend','<div id="bg" style="opacity:0.9;position:fixed;top:0;left:0;z-index:9999;background-color:black;width:100%;height:100%;display:none"></div><div id="inner""></div>');
var arw = 'position:absolute;z-index:10000;top:calc(50% - 15px);border-top: 15px solid transparent;border-bottom: 15px solid transparent;display:none;'
s('inner').insertAdjacentHTML('afterend','<div id="larrow" style="' + arw + 'border-right: 20px solid #bababa;left:5px"></div>');
s('inner').insertAdjacentHTML('afterend','<div id="rarrow" style="' + arw + 'border-left: 20px solid #bababa;right:5px"></div>');
s('larrow').onclick=function(){if(a>0){a--;s('inner').children[0].src = abc()[2][a];info()}};
s('rarrow').onclick=function(){if(a<(abc()[0].length-1)){a++;s('inner').children[0].src = abc()[2][a];info()}};
var thend = ' style="color:#bababa;margin:0;position:absolute;bottom:0;z-index:10000;display:none;'
s('larrow').insertAdjacentHTML('afterend','<p id="n"' + thend + 'right:0">[ ' + (a+1) + '/' + abc()[0].length + ' ]</p>');
s('larrow').insertAdjacentHTML('afterend','<p id="info"' + thend + 'left:0">[ ' + abc()[0][a] + ' ][ ' + abc()[1][a] + ' ]</p>');
s('info').onclick=function(){a=0;s('inner').children[0].src = abc()[2][a];info()};
s('n').onclick=function(){a=--abc()[0].length;s('inner').children[0].src = abc()[2][a];info()};
s('bg').onclick=function(){this.style.display = 'none';s('inner').style.display = 'none';s('larrow').style.display = 'none';s('rarrow').style.display = 'none';s('n').style.display = 'none';s('info').style.display = 'none'};

function view(){
	s('bg').style.display = 'block';
	s('inner').style.display = 'block';
	s('larrow').style.display = 'block';
	s('rarrow').style.display = 'block';
	s('n').style.display = 'block';
	s('info').style.display = 'block';
	if (a<1){
		var img = new Image();
		img.style.cssText="position:absolute;z-index:10000;max-height:calc(100% - 40px);max-width:calc(100% - 60px);top:0;bottom:0;margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;left:0;right:0";
		img.src = abc()[2][0];
		img.onclick = function(){
			if (a < (abc()[0].length - 1)){
				a++;
				img.src = abc()[2][a];
				info();
			}
		}
		s('inner').appendChild(img);
	}
	pre(abc()[2]);
}
function info(){
	s('info').innerHTML = '[ ' + abc()[0][a] + ' ][ ' + abc()[1][a] + ' ]';
	s('n').innerHTML = '[ ' + (a+1) + '/' + abc()[0].length + ' ]';
}
function abc(){
   var names = document.getElementsByClassName('fileText'),a=[],b=[],c=[],n,m;
   var imgs = document.getElementsByClassName('fileThumb');
   for (var z=0;z<names.length;z++){
      if((imgs[z].getAttribute('href').indexOf('webm')) < 0){
         n = names[z].children[0].getAttribute('title');
         if(!n)n= names[z].children[0].innerText;
         m = names[z].innerText.split(/[, ]+/).pop().split(')')[0];
         a.push(m);b.push(n);c.push(imgs[z].getAttribute('href'));
      }
   }
   return [a,b,c];
}
function pre(arrayOfImages, index) {
    index = index || 0;
    if (arrayOfImages && arrayOfImages.length && arrayOfImages.length > index) {
        var img = new Image();
        img.onload = function() {
            pre(arrayOfImages, index + 1);
        };
        img.src = arrayOfImages[index];
    }
}
document.addEventListener("keydown", function(e){
	switch(e.which){
		case 39:
			if(a<(abc()[0].length-1)){a++;s('inner').children[0].src = abc()[2][a];info()};
			break;
		case 37:
			if(a>0){a--;s('inner').children[0].src = abc()[2][a];info()};
			break;
	}
});
}
}, 1000);