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>
<script src="photobox/photobox.js"></script>
<script src="photobox/photobox.declar.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>
photobox_begining()
</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>
<script src="photobox/photobox.js"></script>
<script src="photobox/photobox.declar.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>
photobox_begining()
</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>
<script src="photobox/photobox.js"></script>
<script src="photobox/photobox.declar.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>
photobox_begining()
</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
image2.jpg
      ...
image[N].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[1]="Album1Name"

   pbx_album[2]="Album2Name"
                     ...
   pbx_album[N]="AlbumNName", where N is the Album number and AlbumNName represents each album's name

- var pbx_maxphoto=new Array(Album_Count), where "Album_Count" is the number of albums you have

- pbx_maxphoto[1]=M1
   pbx_maxphoto[2]=M2
               ...
   pbx_maxphoto[N]=MQ, where N is the Album number and MQ is the number of photos in each album
 

 

For example, let's say you have 4 albums:

 

- "Miami_Holiday", containing 20 pictures
- "Home", containing 8 pictures
- "Sweetheart", containing 147 pictures
- "Work", containing 1 picture

 

You will declare these in the following way:

 

var pbx_album=new Array(4);
pbx_album[1]="Miami_Holiday";
pbx_album[2]="Home";
pbx_album[3]="Sweetheart";
pbx_album[4]="Work";

var pbx_maxphoto=new array(4);
pbx_maxphoto[1]=20;
pbx_maxphoto[2]=8;
pbx_maxphoto[3]=147;
pbx_maxphoto[4]=1;

 

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;
   the default value is 2

- pbx_speed - sets the opening/closing speed of the photobox;
   0.001 opens it instantly;
   the default value is 2

- pbx_move_arrows - determines the behaviour of the arrows
   if it is set to "yes", the arrows will attach to the image
   if it is set to "no", the arrows will stay fixed at the sides of the page

 - 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)
   there are to logical settings, "yes" and "no"
   the default value is "yes"

   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 text to any of your images; to add text, declare it in "pbx_phototext[Z]", where Z is calculated as AlbumNumber*1000+ImageNumberInTheAlbum.
 a non declaration will not trigger the textbox.

The order in which the script considers the text is:
- first verifies if the file has a special text defined, an individual text for a single picture; if no, it will check if there's an album text defined, and if both fails, then the image will have no text to it.
- only declare special text for the calculated numbers needed !!!! 

- you can add an entire album situated somewhere else than the working directory (pictures)
 you have to make sure that the images inside are "image1.jpg","image2.jpg",....."imageN.jpg"
 to define the special path to that directory, declare the path as pbx_albumpath[N]="Your_Relative_Path"

- you can add images from random folders to an album; all you have to do is specify the whole path and name of the file in pbx_photopath[Z]="Path+Name.jpg", where Z is calculated as being AlbumNumber*1000+TheNumberOfTheImageInThatAlbum

The order in which the script considers the path is:
- first verifies if the file has a special Path+Name defined; if no, it will check if there's a special album, and if both fails, then will load the image from the predefined path (pictures/AlbumN/imageM.jpg)
- only declare special paths for the calculated numbers needed !!!!

 

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)
 - declare the image with a special path and name: --- pbx_photopath[13252]="../oldies/I_was_young.jpg" (13252 is obtained by calculating the AlbumNumber*1000+TheImageNumber -- 13*1000=13000 +252=13252)

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
 - declare the special path to this album: -- pbx_albumpath[4]="../Holidays/Miami/Beach"

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"
- declare a special text entry for only the 6th picture of the 2nd album -- pbx_phototext[2006]="Doing nothing" (2006 is calculated as AlbumNumber*1000+ImageNumber -- 2*100=2000 +6=2006)
-...and...that's it -as 3rd album text is not declared, it won't be displayed.

 

 

 

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" ?

 A: No, you don't have to copy or move anything. What you will do is declare them so "photobox" will find
the images and use them.

So, in "photobox.declar.js" you'll have to put:

  - pbx_album[1]="NameOfTheFirstAlbum"
  - pbx_album[2]="NameOfTheSecondAlbum" - gathers info about the first and second album
  - pbx_maxphoto[1]=NumberOfPhotosInFirstAlbum
  - pbx_maxphoto[2]=NumberOfPhotosInSecondAlbum
  - pbx_albumpath[3]="PathAndNameOfTheThirdAlbum]" - initializes the third album and records it's special path
  - pbx_maxphoto[3]=NumberOfPhotosInThirdAlbum
  - pbx_photopath[(2*1000+(N+1))]="PathAndNameToSpecialImage1" - where N is the number of pictures originally in the second album - Adds the first picture to the second album and initializes its path
  - pbx_photopath[(2*1000+(N+2))]="PathAndNameToSpecialImage2" - where N is the number of pictures originally in the second album - Adds the second picture to the second album and initializes its path
  - don't forget to modify pbx_maxphoto[2]=N+2 - to allow photobox to "see" the newly added pictures as
well

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 ?

 A: Yes, it is. In the first place, even if you declared a text for the entire album, this will be overridden by a phototext declaration for a specific picture. And in concerns of the lack of text, just enter an empty string.
So, the way you have to make your declarations is:

 - pbx_albumtext[6]="TextThatDisplayedForEveryPicture]
 - pbx_phototext[6013]="TextDisplayedOnThe13thPictureOnly" - 6013, calculated as Album (6) *1000 + PictureNumber (13)
 - pbx_phototext[6027]="" - 6027, calculated as Album (6) *1000 + PictureNumber (27); you'll declare it as empty (""), so no text will be displayed.

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 ?

 A: No, you do not need separate "photobox" bundles for each page ! All that will differ is the declaration script. So make as many copies of "photobox.declar.js" as you need, and rename them, let's say, as "photobox1.declar.js", "photobox2.declar.js",...etc., and in each of it declare only what you locally need.
Just make sure to call the right declaration script in each of your pages (<script src="photobox/photobox.declar[N].js"></script>).

 

    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  !