professional webdesign, AJAX and PHP solutions
Bumpbox 2.0
a lightbox clone with support for PDF, flv, swf, audio, images, inline HTML and remote html files. Now also
plays Youtube© & Vimeo© videos directly out of the
Easy implementation
Yet, the integration and implementation on your own site is pretty simple. Just add the scripts short before your closing body tag, add classes to your links that should use bumpbox, define a rel tag with the size that the bumpbox should have and you're ready to roll.
Automatic media detection
Bumpbox automatically detects what kind of filetype you wish to show in the box, so you do not need to specify the type, easing the process of integration.
Grouping and galleries
Bumpbox 2.0 now supports grouping elements, enabling you to have multiple galleries on one page. Follow the steps below to get your own gallery in seconds.
Youtube and Vimeo
Simply use the embed URL of these video portals as target.
Highly customizable
Bumpbox offers a vast range of customization options. You can influence the appearance inside a gallery easily, from the opacity of the background to the effects used on how bumpbox shows up:
  • Class name for groups and galleries
  • Fly-in and fly-out speed of the box
  • Bumpbox boxed color
  • Background color & opacity
  • Border-radius, color, weight of bumpbox
  • Box-shadow intensity & color
  • Predefined icon sets to choose from
  • Fx Transitions selectable ( Bump, linear, quad etc. )
1. Copy the files
Copy the files you have found in the RAR file to the root of your website ( usually htdocs/ ).
2. Edit your document

After copying the files, open the website you wish to edit and add the following lines right before the closing body tag ( </body> ):

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/bumpbox-2.0.1.js"></script>

If you intent to view FLV and SWF files, add the following line:

<script type="text/javascript" src="js/flowplayer.min.js"></script>
3. Choosing a class name

Now choose and apply a class name to all links that should trigger bumpbox. In the end, your links should look like this, here we use "bump" as the class name:

<a href="" class="bump">SEO</a>

Note: Grouping can be achieved by using the same class name for those elements that should be grouped.

4. Define a size for bumpbox

Each link can have a different size, matching the object size you wish to show. For that, we take the already used link from #3 and add the rel tag, which is used to determine the bumpbox size:

<a href="" class="bump" rel="800-600">SEO</a>

As you can see, we added rel="800-600", so the resulting bumpbox will be 800 x 600 pixels wide.

Note: If you add a title to your <a> tag, it will be displayed right below the main content bumpbox.

5. Activating Bumpbox

To activate bumpbox, we need to add (at least) the following script call:

<script type="text/javascript"> doBump('.bump'); </script>

This enables bumpbox, and you are now ready to use it for the first time. Yet, there are a lot more options you can define to adjust the appearance of bumpbox to your liking.

Continued on the right side...
6. Setting up options

Options available

name Class name for bumpbox objects, note the dot in front of the class name itself
inSpeed Effect speed to show bumpbox ( in ms )
outSpeed Effect speed to remove bumpbox ( in ms )
boxColor Hex color of bumpbox itself, omit #
backColor Hex color of the background overlay, omit #
bgOpacity Opacity of the background overlay, values 0 - 1
bRadius Border radius of the bumpbox client window in px
borderWeight Border weight of the bumpbox client window
borderColor Hex color of the bumpbox client window, omit #
boxShadowSize Shadow spread size in px
boxShadowColor Hex color of bumpbox shadow, omit #
iconSet Choose from 4 predefined icon sets
effectsIn Transition used for appearing see Transitions
effectsOut Transition used for disappearing - see Transitions
bgImage Background image to be used
bgPosition Background position
bgRepeat Background repeat


Using a fully customized bumpbox:

doBump( '.bump',750, 500, '111', '900', '0.8', 5, 1 ,'333', 15,'000', 4,
                 'top left',
                 'repeat-x' );

Note: If you wish to leave some of the parameters out ( i.e. the value for the background opacity, then write null instead a value ).

Adding a background image

By adding a nice background image you can enhance the impression bumpbox makes greatly. Set the image, position and repeat rules easily.

Closing a bumpbox

You can close an open bumpbox by either clicking the close icon, clicking into the background or by pressing the ESC key.

Editing icon sets

Of course you can add own icons for the close, previous and next buttons. Simply create a new folder under the "iconsets" folder, number it, and use it in your doBump() call ( using the iconset number ). Name the files according to the other icon sets ( prev.png next.png and closed.png ).

Single bumpbox item

Only one element defined as bumpbox, no previous and next icons visible. All options on default values.

Click single item »

Type test

Here we show all types, bumpbox can handle.

FLV Video »
MP3 Audio »
SWF Video »
PDF File »
Image File »
HTML File »
Inline HTML »
Youtube Video »
Vimeo Video »

Grouping bumpbox items

Multiple items added into one group, showing previous | next controls where applicable. Customized colors and effects.

Group item 1 »
Group item 2 »
Group item 3 »

Mixed groups

Multiple groups with different option settings, different icon sets and a background image set.

Group 1 - FLV »
Group 1 - MP3 »
Group 1 - SWF »

Group 2 - FLV »
Group 2 - MP3 »
Group 2 - SWF »

Tested Browsers: Firefox 3.6+, IE7, IE8, IE9, Opera 10+, Google Chrome 8+ -
Please note: Due to IE CSS3 issues, no rounded corners or box shadows apply.

This box is a hidden DIV on the page itself. Use it to show off content inside bumpbox. Use it i.e. for a login box.