/ best free open source web resources /

Graphic Resources

Bumpbox – A Lightbox Clone that Supports PDFs

Posted · Category: License Free, Popup

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.


Requirements: Mootools Framework 1.2
Demo: http://www.artviper.net/bumpbox.php
License: License Free

  • mootools rules ;)
    good job!

  • A bit overdone animations in my opinion.

  • I suspect the animation being one of the algorithms one may chose, so this should be an easy fix. I usually go for the KAZAM! 0.2sec transitions.

    Most frameworks has around 25-50 algortithms to choose from, or tweens. I am convinced MoTools has the excact same.

  • @Kim & @Gustavs:

    You’re absolutely right. Mootools offers a vast range of effects like any other framework, so simply replace the Bounce.easeOut with the one of your liking. I added this effect as it carries the name of the whole thing – bumpbox.

  • @frank

    Do you know if it is possible to run Mootols together with Prototype and jQuery (compability mode)? I seem to remember Mootols not running together with Prototype? I know it’s off topic, but if you have the answer I would love to hear from you.

  • @Kim

    Well I know of a solution to run jQuery together with mootools but I didn’t come across a workaround to get prototype to work with it.

    Using jQuery & mootools is done by using jQuery selectors like this: jQuery(‘xxx’), otherwise it would conflict with the same selector in mootools. Yet you could edit the jQuery library itself to replace the dollar selector with something else, which would yield the same effect.

  • Awesome! It’s amazing you can keep finding cool stuff like this.

  • Mo

    Very cool.

  • David

    It didn’t work for me. It asked me to download the PDF file. I’m on OSX 10.5.8 on Firefox 3.5.2 I agree it’s heavy on the animations. But I like that it is using Flowplayer. I wish Shadowbox used Flowplayer. I hate JW FLV Player.

  • johnny_n

    Yes, doesn’t display .pdfs in OSX 10.5.8 & Firefox 3.0.13 either… works on Safari.

    Wondering if it requires Acrobat Reader plugin/extension to work properly. If you have that installed, then what’s the point?


  • MAC users need a browser plugin for PDF to be able to view PDF’s inside the bumpbox.

    We’ve added more features now to bumpbox, namely CSS3 styles, previous|next buttons, audio mp3 player, inline content and a new media detection routine. Just try it.

  • Susan

    Do you expect to have a fix in the near future for the Firefox problem on the Mac? I like the app and would like to use it, but want all my users to be able to see the content in the Lightbox.


  • Hi Susan,

    like mentioned before, it’s not a problem of the script, it is a missing plugin for your browser. This here might help: https://addons.mozilla.org/de/firefox/addon/7518


  • Susan

    Thanks Frank. I missed that.

  • hi…help me to add scrollbar to bumpbox

  • Josh

    Frank, thank you for creating this, it’s fantastic! I also had missed the PDF plugin, so thanks for posting that as well.

  • Hi again :)

    Gone the time when you needed a PDF plugin – now you can use bumpbox on any OS without restriction. The PDF is now displayed through google doc viewer, removing the necessity of propietary plugins. Think that was a good choice.


  • Andrew


    I’m running the latest version of bumpbox and when running in Firefox 3.6.6 on a mac, the pdfs aren’t working with bump box unless I download this PDF plugin.

  • Cannot get the bumpbox to work on wordpress 3.0.1. What’s the secret?

    I added all of the scripts to the header like suggested, and still nothing.

    Is it not wp-compatible?


Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons