There are 3 previous versions of this script.
// ==UserScript==
// @name Server Index Image Viewer
// @namespace http://ajnasz.hu/server-index-image-viewer
// @description You can use this function to view images as sliedshow on a page, which is generated by a web server. It's support jpg, jpeg, gif and png files. Click on the "Run Image Viewer" menu item in the Greasemonkey Script Commands menu to run the script;
// @include *
// ==/UserScript==
(function() {
var getBody = function() {
return document.getElementsByTagName('body')[0];
};
var cImgCont = function() {
var body = getBody();
body.innerHTML += '<div id="slideshow""><a id="prev">Prev</a><a id="next">Next</a><a id="auto"></a><div id="icont"><p id="stat"></p></div></div>';
css = "#prev, #next, #auto {color:#000;padding:2px 5px;font-weight: bold; cursor: pointer;text-decoration: none; border: 1px solid #ccc;background-color:#ccc;} #next:hover, #prev:hover {background-color:#eee;} #slideshow {font-family:sans-serif;background-image: url('http://ajnasz.googlepages.com/izebg.png');color: #fff; position: absolute;top:0;left:0;width:100%;} #icont {text-align:center;} #icont img {border: 3px solid #ccc;} #icont p {color: #fff;font-size: 12px;} #auto {float:right;} a {color: #ccc;} #auto {display:none;}";
addGlobalStyle(css, 'slideShow');
var sl = document.getElementById('slideshow');
sl.style.height = document.body.scrollHeight + 'px';
setLinks();
};
var loadBG = function() {
var body = getBody();
GM_xmlhttpRequest({
method: 'get',
url: 'http://ajnasz.googlepages.com/izebg.png',
onload: function() {
preImage = document.createElement('img');
preImage.src = 'http://ajnasz.googlepages.com/izebg.png';
body.appendChild(preImage);
body.removeChild(preImage);
cImgCont();
}
});
};
var addImg = function(img) {
document.getElementById("icont").innerHTML = '<p id="stat"></p><a id="m" href="'+img+'"><img src="'+img+'" /></a>';
document.getElementById('icont').getElementsByTagName('img')[0].addEventListener('click', showNext, false);
};
var setLinks = function() {
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var auto = document.getElementById('auto');
var startStop = document.getElementById('I_box');
var imgs = getImgs();
if(imgs.length < 1) {
setError('I didn\'t found any image on the page or this is not a server indexed page.<br />If I failed, please send a mail with url of this page and a short description to the <a href="mailto:ajnasz@ajnasz.hu">ajnasz@ajnasz.hu</a> mail address!');
delete imgs, prev, next, auto;
return;
}
prev.setAttribute('value', 0);
next.setAttribute('value', 1);
next.addEventListener('click', showNext, false);
prev.addEventListener('click', showPrev, false);
auto.addEventListener('click', startAuto, false);
startStop.removeEventListener('click', runSlideShowBox, false);
startStop.addEventListener('click', stopSlideShow, false);
addImg(imgs[0]);
setStat(imgs);
};
var setStat = function(imgs) {
var stat = document.getElementById('stat');
stat.innerHTML = imgs.length+' images';
};
var setError = function(err) {
var i = document.getElementById('icont');
i.setAttribute('style', 'background-color:#fff;color:#000;border:1px solid red;width:80%;margin:auto;margin-top:100px;padding: 30px;font-size: 1.5em;');
i.innerHTML = ''+err+'';
};
var startAuto = function() {
// window.setInterval("showNext)", 1000);
alert('Still not working!');
};
var showNext = function() {
var imgs = getImgs();
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var nextval = next.getAttribute('value');
var prevval = prev.getAttribute('value');
if(nextval >= imgs.length) { return; }
addImg(imgs[nextval]);
nnext = parseInt(nextval)+1;
nprev = nnext-2;
setStat(imgs);
prev.setAttribute('value', nprev);
next.setAttribute('value', nnext);
preload(imgs, nnext);
};
var showPrev = function() {
var imgs = getImgs();
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var icont = document.getElementById('icont');
var nextval = next.getAttribute('value');
var prevval = prev.getAttribute('value');
if(prevval < 0) { return; }
addImg(imgs[prevval]);
setStat(imgs);
pprev = parseInt(prevval)-1;
pnext = pprev+2;
prev.setAttribute('value', pprev);
next.setAttribute('value', pnext);
preload(imgs, pprev);
};
var preload = function(imgs, img) {
preImage = new Image(25, 25);
preImage.src = imgs[img];
};
var addGlobalStyle = function(css, cl) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.className = cl;
style.innerHTML = css;
head.appendChild(style);
};
var removeGlobalStyle = function() {
var head, styles;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
styles = head.getElementsByTagName('style');
for(var i = 0; i<styles.length; i++) {
if(styles[i].className == 'slideShow') {
head.removeChild(styles[i]);
}
}
};
var getImgs = function() {
var links = document.getElementsByTagName('a'), link, picsR = new RegExp('(jpg|png|gif|jpeg)$', 'i');
this.imgs = [];
for(var i=0; i<links.length; i++) {
link = links[i];
if(link.href.match(picsR) && imgs.indexOf(link) == -1 && link.id != 'm') {
imgs.push(link);
}
}
return imgs;
};
var runSlideShow = function() {
loadBG();
};
var stopSlideShow = function() {
removeGlobalStyle()
var s = document.getElementById('slideshow');
var b = getBody();
b.removeChild(s);
var a = document.getElementById('I_box');
var body = getBody();
a.removeEventListener('click', stopSlideShow, false)
a.addEventListener('click', runSlideShowBox, false);
a.innerHTML = 'Start Viewer';
document.removeEventListener('keydown', checkKey, true);
};
var checkPage = function() {
var h1 = document.getElementsByTagName('h1')[0];
if(!h1) {
var b = document.getElementsByTagName('b')[0];
if(!b) return false;
if(b.innerHTML.match(/^Index of/i)) {
return true;
}
} else {
if(h1.innerHTML.match(/^Index of/i)) {
return true;
} else {
return false;
}
}
};
var runSlideShowBox = function() {
runSlideShow();
var a = document.getElementById('I_box');
if(!a) {
addBox();
var a = document.getElementById('I_box');
}
var body = getBody();
a.innerHTML = 'Stop Viewer';
document.addEventListener('keydown', checkKey, true);
};
var addBox = function() {
var d = document.createElement('div');
var body = getBody();
d.id = 'I_box';
d.style.height = document.scrollHeight + 'px';
d.addEventListener('click', runSlideShowBox, false);
d.appendChild(document.createTextNode('Start Viewer'));
body.appendChild(d);
css = "#I_box {border-left: 1px solid #666;border-right: 1px solid #666;border-bottom: 1px solid #666;text-align:center;position:fixed;top:0;right:20px;padding: 2px 5px;height:12px;cursor:pointer;font-size:10px;z-index:1000;color:#000;background-color:#ccc;font-family:sans-serif;}";
addGlobalStyle(css, 'wee');
};
var createBox = function() {
if(checkPage()) {
addBox();
document.addEventListener('keydown', s, true);
}
};
var checkKey = function(e) {
k = e.keyCode
if(k == 39 || k == 32 || k == 78) {
/*
* 32 = space
* 78 = n
* 39 = right arrow
*/
showNext();
} else if(k == 37 || k == 8 || k == 80) {
/*
* 8 = backspace
* 80 = p
* 37 = left arrow
*/
showPrev();
} else if(k == 81 || k == 27) {
/*
* 81 = q
* 37 = Esc
*/
stopSlideShow();
}
delete k;
};
var s = function(e) {
if(!document.getElementById('slideshow')) {
if(e.keyCode == 83) {
runSlideShowBox();
}
}
}
createBox();
GM_registerMenuCommand('Run Image Viewer', runSlideShowBox);
})();
