last updated: August 15, 2009

Introduction

s-box.js functions just like Lightbox does. The script is 12 kb (min) and it uses jQuery and SimpleModal plugin. There're some additional features which you might find useful.

• Next and previous preview thumbnails show up when the cursor is moved on arrow images in modal.
• You can place your personal logo in modal. You will see my office's logo in the demo. Please replace the png image with yours.
• Round corner background.

Download link is in bottom of this page.

DEMO

text link also works

Used Libraries

• jQuery 1.3.2
• SimpleModal 1.3

Notice

1. I havn't tested on jQuery1.2x or SimpleModal 1.2x. Please use with appropriate version of these libraries.
2. As a new feature of SimpleModal, you can close the modal by typing the escape key. It's good. :)

Quick Start

Download sboxjs101.zip from the link in the bottom of this page. It includes all related libraries, graphics and sample.

Open s-box.min.js by your text editor. Set the path to the directory which contains related graphics (arrow images, background image, logo.png, etcs) like this:

Add the include tags in your html's header just like this:

Add rel="lightbox" attribute to a tag to call modal effect. You better to write precisely 'width' and 'height' values of thumbnail images to let the script function perfectly.

Text link also works ok.

Done!
Launch your browser and see if it works okay.

You will find 'logo.png' in 's-box-graphics' directory. Please replace it with yours and enjoy. You can change logo's size and position as you wish. Please refer More Configurations and How To Set Logo section for details.

Tested Browsers

• IE 6/7/8 (PC)
• firefox 3 (PC + Mac)
• Safari 3 (Mac)
• Opera 9.5 (PC)
• Google Chrome (PC)

More Configurations

There're some options to change the appearance of modal. Open s-box.min.js by your text editor and you will find config part on top of the script.

• graphicsDir (default: ./s-box-graphics)

  Path to the directory which contains all related images (arrow images, background image, logo.png, etcs).

• logoPosition: (default: {bottom:'100px', right: '-60px'})

  It's logo's postion. In default, bottom and right attributes are set. 'top' and 'left' attributes also works of course. To disable the logo, just delete the 'logo.png' inside the directory which you set as 'graphicsDir'. As for logo, please read How To Set Logo section for more details. It's in below.

• hoverIn, hoverOut

  Css style for hover action. This style will be applied to img element wrapped by a element which has 'rel=lightbox' attribute. Please remember that it's NOT be applied to a tag. Hope you're not confused.

• bgImg (default: true)

  If true, rounded corner background image is used. If false, css-generated background is applied. I think rounded one looks nicer but the browsers' rendering speed could be faster if you don't use round corner image. It's your call. If you choose 'false', you can set 'bgColor' to change the appearance.

• bgColor (default: #ffffff)

  Background color. This option works only in case you set 'bgImg' as false.

• padding (default: 25)

  Background's padding. Set 0 (zero) if you don't like padding.

• navArrow (default: true)

  If true, arrow gif shows up. If false, never does. You may want to eliminate the arrow images on bottom of the jpg in order to let the script show jpg in maximum size. The arrows sometimes disturbs art works' atomosphare. If so, set this option as 'false'. The arrows won't show up.

• navThumbMaxW, navThumbMaxH (default: 200)

  Maximum size of prev and next thumbnail images.

How To Set Logo

To let your logo show up in modal, you need to do following:

1. Prepare your own png image for the logo.
2. Name it as 'logo.png'.
3. Upload 'logo.png' to the directory which you set as 'graphicsDir' directory.
4. Set the logoPosition parameter as you like.

The script searches 'logo.png' inside the directory which you set as 'graphicsDir' at first loading. If found, the script try to grab logo's size and logoPosion paramter, then it shows up. If not found, it's just ignored. Therefore, if you want to disable it, just simply detele 'logo.png'.

'logo.png' inside the sample is 120 x 120 pixel but you can create your logo in any size. The script grabs its width and height when it loads.

Used IDs

Since the ids used in the css must be unique (not allowed duplicates), please make sure that your html and css won't cause any conflicts. Followings are all ids this script uses. You shoud not use these ids.

• modalOverlay
• modalCon
• modalWrap
• modalLoader
• modalLoader2
• modalImg
• modalNav
• modalIndex
• modalprev
• modalnext
• modalThumbPrev
• modalThumbNext
• modalBg1
• modalBg2
• modalBg3
• modalBg4
• modalLogo

Predictable Problems

You should not put too many *text links* which has rel="lightbox" in one html page. I'm not sure but up to 20 - 30 might be the limitation to browse smoothly. This script preloads all thumbnails at first. If the link has img tag, small thumbnail is supposed to be preloaded. I don't think this behavor affects too much, however, if it's a text link, big jpg image is supposed to be preloaded. Therefore, too many text links will make slower. Please be careful.

Thanks To

• jQuery
• SimpleModal
• Brent (He provided me good photos for the demo.)
• Ajaxload

Support, Contact

I, Hiroya Fujii, am a Japanese www designer and this script is my first work of jQuery programming. I know my code is not good enough yet. Any reports or comments would be much appreciated.

Since this site isn't commentable, I leave my blog's url. Its main language is Japanese but no worries, you can post your message in English to me. Here it is.

http://blog.3ot.net/design/javascript/20090603152851.html

Showcase

If you have some time, please visit following links, where you can see how the script is used to showcase photos or artworks.

• color-pencil.com (Japanese professional illustrator's site)
• reki-tan.com (Japanese historian writer's blog)

Enjoy!