What is bumpbox?
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.
Bumpbox works in all major browsers, including IE6.
How to implement ?
Follow the steps below and you are ready to roll:
Into your head section go these lines:
<script language=“javascript“ type=“text/javascript“ src=“js/mootools.js“></script>
<script language=“javascript“ type=“text/javascript“ src=“js/bumpbox.js“></script>
If you intent to use flv or swf movies, add this line too:
<script language=“javascript“ type=“text/javascript“ src=“js/flowplayer.min.js“></script>
Demo link structure
Now use class=“bumpbox“ on any link that should open a bumpbox:
<a href=“image1.jpg“ class=“bumpbox“ title=“My Image“>Open my image</a>
Update 22-05-2010: No more PDF plugin required! PDF's are included by google docs viewer. Make sure your PDF is available online and add a full path.
Try the demos:
