25 Jul

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

Sponsors

Comments

http://benny89sl.deviantart.com Benny

mootools rules
good job!
http://www.krop.com/gustavs/ Gustavs

A bit overdone animations in my opinion.
http://www.steinhaug.no/ Kim Steinhaug

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.
http://www.artviper.net Frank

@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.
http://www.steinhaug.no/ Kim Steinhaug

@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.
http://www.artviper.net Frank

@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.
http://pagegardens.com/ Page Gardens

Awesome! It’s amazing you can keep finding cool stuff like this.
http://www.entersolutions.co.za/ 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?

john.
http://www.artviper.net artViper

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.

Susan
http://www.artviper.net Frank

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

Frank
Susan

Thanks Frank. I missed that.
Susan
http://www.balwadi.com/balwadi yyfreelancer

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.
http://www.artviper.net Frank

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.

best
Frank
Andrew

Frank-

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.
http://is.marketandconvert.com Leo Saraceni

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?

Thanks!

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

Open Source Resources for Web Application Developers

Bumpbox – A Lightbox Clone that Supports PDFs

Open Source Resources for You

subscribe to our newsletter - weekly free resouces for web developers

follow us on social sites - rss, facebook, google+, Twitter

Open Source Resources for You