Photobox - a simple and animated lightbox alternative
[ Studied ...calculating..., 6 thanks ]
Trolling the net in search of a good lightbox to use in my webpages, I got tired of wasting my time with buggy, incompatible or very badly "mannered" scripts, so I came up with "photobox", a simple lightbox, coded using HTML and a bit of javascript.
Photobox is a custom simple lightbox concepted and coded by myself, using HTML and javascript. It can be used on a simple web page, and from inside an IFrame as well, solving the "lightbox" over IFrame problem.
Originally designed to show photos in an overlayed frame, "Photobox" can be used
to display entire webpages as well (being, after all, just an ordinary
IFrame).
As a photo overlay, it has a second functionality as well,
resizing your displayed photo and centering it on page.
"Photobox" allows you to group your pictures in different
categories; just be sure to rename and place your images in the right
subdirectories.
"Photobox" is probably THE ONLY lightbox that auto-resizes if the main window is resized !!!.
To see how "photobox" behaves, just click one of the pictures or select a page to open - the testing is done both within this page, and from inside an Iframe, to show that the result is the same.
Open custom page !
Example 1 - The "photobox" is called from the main page
Example 2 - The "photobox" is called from an IFrame
Ok...now time to build and use the "photobox"....
...but, before doing that, there is a small WARNING !!!
Place your "photobox.html" and "empty_photobox.html" files in the same directory as the calling page and the i_Frame page, and make sure the "photobox" folder and the "pictures" folder are direct folders in that directory !
For example:
Good practice:
------------------
...root....
[calling_page].html
photobox.html
empty_photobox.html
[iFramed_page].html
<dir>
photobox
<dir>
<dir>
pictures
<dir>
Bad practice:
-----------------
...all other
shuffles...
I.Using "photobox" with non-iFrame pages:
A.Setting up "photobox":
1. In the "<head>" section of your main page insert the code:
<script src="photobox/jquery.js"></script> |
This will load the necessary libraries.
2. In the "<body>" section of your main page, just after the <body> tag, insert the code:
<script> |
B.Triggering the "photobox":
The triggering of the "photobox" will be done by calling the "photobox()" procedure, and stating the album and picture number you want to be displayed. This will be done on the "onclick" function of each thumbnail -
<...onclick="photobox(AlbumNo,PictureNo)">
For example, to call out the 4th picture of the 2nd album, you will use:
<img border="0" src="HeresMyThumbnail.jpg" title="Let's go !" width="128" height="96" style="cursor: pointer" onclick="photobox(2,4)"> |
II.Using "photobox" with iFrame pages:
A.Setting up "photobox":
1. In the "<head>" section of your main page insert the code:
<script src="photobox/jquery.js"></script> |
This will load the necessary libraries.
2. In the "<body>" section of your main page, just after the <body> tag, insert the code:
<script> |
3. In the "<head>" section of your iFrame page insert the code:
<script src="photobox/photobox.js"></script> |
B
.Triggering the "photobox":
The triggering of the "photobox" will be done by calling the "i_photobox()" procedure, and stating the album and picture number you want to be displayed. This will be done on the "onclick" function of each thumbnail -
<...onclick="i_photobox(AlbumNo,PictureNo)"> |
For example, to call out the 4th picture of the 2nd album, you will use:
<img border="0" src="HeresMyThumbnail.jpg" title="Let's go !" width="128" height="96" style="cursor: pointer" onclick="photobox(2,4)"> |
III.Using "photobox" to open a web-page:
A.Setting up "photobox":
1. In the "<head>" section of your main page insert the code:
<script src="photobox/jquery.js"></script> |
This will load the necessary libraries.
2. In the "<body>" section of your main page, just after the <body> tag, insert the code:
<script> |
B
.Triggering the "photobox":
The triggering of the "photobox" will be done by calling the "
photobox_custom_in()" (or "i_photobox_custom_in()", for iFrames) procedure, and stating the path and name of the called webpage. This will be done on the "onclick" function of the text or image used to trigger the webpage -
<...onclick="photobox_custom_in([Your_Page])"> or <...onclick="i_photobox_custom_in([Your_Page])"> |
For example, to call out
"opensubtitles.org", you will use:
<p><font color="#0000FF" style="cursor: pointer" onclick="photobox_custom_in('http://www.opensubtitles.org')"><i><b>Open custom page !</b></i></font></p> or <p><font color="#0000FF" style="cursor: pointer" onclick="i_photobox_custom_in('http://www.opensubtitles.org')"><i><b>Open custom page !</b></i></font></p> |
IV.Adding pictures to your album and making "photobox" to "see" them:
1. In the "
pictures" directory, create new sub-folders for each album. Pay attention, for the name of each album is actually the name of the created sub-folder.
2. In each album folder place your pictures, named as:
image1.jpg |
3. Edit "photobox/photobox.declar.js" (with notepad), and modify the data accordingly:
- var pbx_album=new
Array(Album_Count), where "Album_Count" is the number
of albums you have
pbx_album[2]="Album2Name" |
For example, let's say you have 4 albums:
- "Miami_Holiday", containing 20
pictures |
You will declare these in the following way:
var pbx_album=new Array(4); |
Be carefull, as undeclared images will be ignored by the "photobox".
V.Settings and special features:
"photobox" allows you to have some control on its displaying interface and some of its special paths feature; that control is obtained through the "photobox/photobox.declar.js" script, by editing and modifying some declarations accordingly.
So, to modify one or more of these, edit "photobox/photobox.declar.js" (in notepad), and check these values:
- pbx_border - gives the width of the border surrounding the image; a
null (0) value removes it completely; |
- pbx_speed
- sets the opening/closing speed of the photobox; |
-
pbx_move_arrows - determines the behaviour of the arrows |
-
pbx_close_on_click - you can cause the photobox to close by clicking
anywhere on the screen - except the navigation arrows, of course :) - (this
in addendum to the closing button) |
You can modify any of these values (pbx_border, pbx_speed, pbx_move_arrows and/or pbx_close_on_click) programatically, from your page, by declaring new values for them (for example, pbx_close_on_click="no") |
- you can add
text to each album; to add text, declare it in
"pbx_albumtext[N], where N is the number of the album you want the text for; the
text will be applied to all images in that album, except the ones that have
a "phototext" declaration --- see next point. |
- you can
add an entire album situated somewhere else than the working directory
(pictures) |
Examples:
1. |
Let's say you have an image
called "I_was_young.jpg", situated in the "Oldies" directory, image that you
want to add to your 13th album ("conventional" one), which already contains
251 pictures. What you will have to do is: - increase the maximum numbers of images from that album --
pbx_maxphoto[13]=252
!! (251+1) |
2. |
Say you have 254 pictures, named "conventionally"
like image1.jpg,image2.jpg...etc, but situated in the subfolder "Beach" of
the "Miami" folder from the "Holidays" directory, and you want to add them
to photobox as the 14th album - but you don't want to move or copy them !
(your current folder is "Network") Well, simples : - declare the maximum photos of this album --
pbx_maxphoto[14]=254 |
3. |
Let's say you have 3 albums, "Lazy", Very lazy" and "Super lazy", and you
want to add "Just being lazy" to all the pictures in the first album, "Doing
nothing" on the 6th picture of the 2nd album, and no text for any of the
images in the 3rd album. What you need to declare is: - declare a text entry for the entire first album --
pbx_albumtext[1]="Just being lazy" |
VI.Real cases based FAQ:
1. |
Q:
I have two albums in the "pictures" directory, two separate
pictures that belongs in the second album, in different locations, and one
more album in another directory on my domain. Can I somehow use them all, or
I have to make a copy of the pictures and the third album to include them in
"pictures" ? So, in "photobox.declar.js"
you'll have to put: |
2. |
Q:
I have an album for which I have declared an pbx_albumtext, but I want the 13th
picture of that album to have a different text, and the 27th picture without
any text. Is this possible ? |
3. |
Q:
I have three different pages accessing the images from my albums, but the
first one accesses albums 1-5, the second accesses albums 6-8 and the third
one album 9. Is there a way to use "photobox" separately, or I'll have to
copy all "photobox" files for every page ? |
You can download "photobox" from my "Freeware" section by following this link.
Congratulation ! You can now use your own lightbox ! If there is something you didn't understand or anything else, just leave a comment !