Localization of Slimbox

Slimbox is a light version (with some enhancements like navigation) of Lightbox JS. Lightbox can be described as a simple, unobtrusive script used to overlay images on the current page. You might seen both of them on numerous web sites.

Example of Lightbox:

Example of Slimbox:

But how to localize Slimbox into, for example, Slovenian language?

There are few things to do:

1. Localize the images (Next, Prev, Close)

2. Localize the text Image … of …

3. Change the keyboard keys which control Next, Prev and Close

1. Localize the images (Next, Prev, Close)

Under the folder /images you have four gif files: closelabel.gif, loading.gif, nextlabel.gif and prevlabel.gif. Just open the files (in bold) in yout image editor and delete existing text with localized version. Be also careful about the letter that will used for navigation - in original Slimbox c is used to close the overlay, n for next, p for previous (some other keys are also available) - and underline the appropriate letter.

Original Slimbox labels:

Localized Slimbox labels (in Slovenian language):

You can also download these three files as zip file.

2. Localize the text Image … of …

As you can see under the picture there is an indication of the number of pictures in the gallery and the number of the picture you are viewing.

For example: Image 1 of 5

You can change this in the file slimbox.js, line 144. Just replace words Image and of into appropriate words.

3. Change the keyboard keys which control Next, Prev and Close

In original Slimbox you can navigate between images with the following keyboard keys:

Next: n and right arrow
Previous: p and left arrow
Close: Esc, x and c

These can also be changed in slimbox.js, lines 106-108.

You must use JavaScript Character codes to represent different letters on the keyboard.

Therefore the keys are coded as:

Next: n (case 78) and right arrow (case 39)
Previous: p (case 80) and left arrow (case 37)
Close: Esc (case 27), x (case 88) and c (case 67)

And when you want to localize it, just map the right keys.

Example of Slovenian localization:

Next - Naprej: n (case 78) and right arrow (case 39)
Previous - Nazaj: j (case 74) and left arrow (case 37)
Close - Zapri: Esc (case 27) and z (case 90)

Example of the localized code (slimbox.js, lines 106-108):

case 27: case 90: this.close(); break;
case 37: case 74: this.previous(); break;
case 39: case 78: this.next();

Have fun using Slimbox!