newsscroller nextnews resume previousnews
 

Bumpbox - with support for images, html files, flv videos, swf files and PDF's - a lightbox alternative

Bumpbox is another lightbox clone with a few advantages over other lightboxes - it supports not only all common media types but also PDF's.

Yet, the integration and implementation on your own site is pretty simple. Just add the scripts to your head section, 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.

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.

UPDATE:

-Fixed IE8 issue, swf files playing in background after closing bumpbox (2009-02-05)

-Fixed IE 6|7 issues (2009-11-03)

-Added support for MP3 files

-Added previous | next buttons

-Uses CSS3, rounded corners, wait image and displays the URL of the content below the bumpbox window.

-Added support for inline content

-Enhanced media detection

MAC USERS:

Mac Users will have to add a PDF plugin to their browser - otherwise the PDF will open as a download window. There are some plugins out there, for example: FreeWare Browser Plugin PDF

Demos

External addons

This bumpbox uses the flowplayer© media player to show flv files. If you do not intend showing flv files, you do not need to copy the flow player.min.js and the flowplayer.swf as well as the flowplayer.controls.swf to your doucment root.

Inline content

This is some inline content which is hidden onload, and then displayed in the bumpbox accordingly.

Simply give your inline content an ID, fill it with content. Reference the hidden content by using the bumpbox, assigning the href tag with a "^".

For example, this content's DIV ID is "myDIV" and the bumpbox link href has the content href="^myDIV". That's it.

Note: This is still XHTML valid - no worries about the ^ sign in the ID

BASIC STEPS

Copy the images to your root folder or adapt the image paths in the bumpbox.js according to your folder settings

Place the included mootools.js, the bumpbox.js and - in case you want to use flv or mp3 files, the flowplayer.min.js, flowplayer.audio.swf and flowplayer.swf and flowplayer.controls.swf into your document root.

If your paths differ, adapt the paths inside the bumpbox.js to your directory structure.

 

INSTALLATION STEPS

Open the page you want bumpbox to be used. Now add these lines to the head section of your site:

  1. <head>
  2. <script language="javascript" type="text/ecmascript" src="js/mootools12.js"></script>
  3. <script language="javascript" type="text/ecmascript" src="bumpbox.js"></script>
  4. </head>

How to modify your links to use bumpbox:

<a href="linkToYourContent" class="bumpbox" rel="640-480" title="yourTitle" />Show me</a>

Explanation:

rel = "" this is used to specify the size of the bumpbox window. ( not needed for image files, their size will be auto detected )

class="bumpbox" tell the script to check which links should use the bumpbox function.

 

DOWNLOADS

Here you can find the download of the actual bumpbox installation:

Download versions:

for mootools 1.2 Download

 

DISCUSS THIS

Read here more about it, like firing bumpbox on page load etc.

Discuss this in our blog »

COMPATIBILITY

Bumpbox works in all modern browsers. Here's a list in which browsers it has been successfully tested:

  • Firefox 3 - 3.5
  • Internet Explorer 6 | 7 | 8
  • Google Chrome
  • Apple Safari 3 | 4
  • Opera 9.04

If you find a browser that makes problems, please drop us a line and let us know about.

 

Support request

 

 We design follwing types: Logos, Corporate Identities, Corporate Design, Corporate Design Manuals, Business Cards, Presentations, Brochures, Catalogues, Flyer, Magazines and much more.

Interesting Links

Latest Blog Entries

Latest Shop Additions

  • XT Remember Bank Information
  • XT Price to Image
  • XT Search TagCloud