Full Screen Image Viewer

There is a site that I like to visit when I’m just looking for something fun or interesting. The site is in spanish, but that doesn’t matter because most of the time there are videos, many of them in English, and other languages. There are also images, so the fact that the site is in Spanish should not matter even if you don’t speak or understand Spanish. The site is http://malgusto.com/ and one of the sections that I enjoy a lot is the Fotografias HD section (http://www.malgusto.com/fotografias-hd/). However, I always thought it was such a shame that the images cannot be made into full screen mode for a better experience.

I decided to write my own script on Firefox’s scratchpad. Here is the simple script that I wrote:


var imgs = document.querySelectorAll('div.caja_imagenes img,marcosimple');
var dummyImg = document.createElement('img');
dummyImg.style.height = 0;
document.body.appendChild(dummyImg);
var currentIndx = 0;
var totalImgs = imgs.length;

document.addEventListener('keyup', function(e) {
    if (e.keyCode == 39) {
        if (currentIndx == totalImgs -1) {
            currentIndx = -1;
        }
        currentIndx ++;
        dummyImg.src = imgs[currentIndx].src;
    }
    if (e.keyCode == 37) {
        if (currentIndx == 0) {
            currentIndx = totalImgs;
        }
        currentIndx --;
        dummyImg.src = imgs[currentIndx].src;
    }
});

for(img in imgs) {
    if (!imgs[img].addEventListener) {
        continue;
    }
    imgs[img].idx = img;
    imgs[img].addEventListener('click', function(e) {
        currentIndx = this.idx;
        dummyImg.src = this.src;
        dummyImg.mozRequestFullScreen();
    },
    false);
}

It may or may not be the best way to do it, but it works, and in this case that is all that matters.

Here is the script made into a bookmarklet so you can save it and use it later. NOTE: Follow the bookmarklet link. WordPress would not allow me to add the javascript bookmarklet here, so I had to host it elsewhere.

How to use:

First, drag the bookmarklet link to your bookmarks bar to save it.
Then you can open one of the posts in the Fotografias HD section. For example, http://www.malgusto.com/fotografias-hd/recopilacion-de-imagenes-hd-98/#more-59444
Then, click on the bookmarklet once the page has loaded.
Now you can click any of the HD images, and it will take you to full screen mode. Use the arrows on the keyboard to navigate through the images.

Please enojoy the bookmarklet and have fun!