A lightbox alternative - Bumpbox

Lightbox is a common way of showing images nowadays. I searched high and low for a script that was able to produce not only images this way, but even more content. And I think I've found one. It's called Bumpbox, and how it works calls for a quote from their website:

"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."

In order to demonstrate what can be achieved by this I have prepared a few links here:

This bumpbox uses the flowplayer© media player to show flv files. So if you intend showing flv files, you need download this and upload it to your server. Then change the path (and add reference in head tag) and update the flow player.min.js and flowplayer.swf to current version.

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 files, the downloaded flowplayer-3.1.2.min.js as well as the flowplayer-3.1.2.swf and flowplayer-3.1.2.controls.swf into your desired folder (The one's provided in the Bumpbox download is out of date, a newer version of Flowplayer is out).


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="path to/mootools.js"></script>
3. <script language="javascript" type="text/ecmascript" src="path to/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.
class="bumpbox" tell the script to check which links should use the bumpbox function.

 

Notes

DISCLAIMER

This is my personal site, and I try to perform accordingly to webstandards. However, Internet Explorer cannot submit fully to this, and therefor I do not code my own site to support Internet Explorer. Again p-ahlqvist.com do not support Internet Explorer (IE). And anything not behaving as expected in IE is, well... Please download a proper web browser, and make your browsing experience a better one. I do personally use Mozilla Firefox and do recommend it.

p-ahlqvist.com CREDITS

This site is based upon Poppolls sNews version sNews4in1. I would like to thank him for this. I would without further ado, also thank the following for more or less helping me either with this site, or with other things which have led to this site's re-launch. So, my heartwarming thanks and eternal pal'ship to:

Poppoll
Philmoz
Sasha
Keyrock
Luka
Luka is also responsible for the creation of sNews CMS

If I have forgotten to mention anyone whom have been of value to me, this wasn't intentionally. Please contact me and I will of course adjust this immediately.

What CMS should I use ?

There is a lot of discussions about what CMS is the best, and everybody have their own say on the matter. I say, it all depends on your needs.

I am speaking highly, and using both on my own site and the one's I make, of sNews CMS. sNews is a completely free, standards compliant, PHP and MySQL driven Content Management System. sNews is extremely lightweight, simple and customizable. It's easy to install, and easy to use via a simple web interface. sNews consists of only one core engine file, one independent template file and its accompanying CSS stylesheet file, plus an .htaccess file that makes all URLs search engine friendly.

If you have any doubts about wht CMS to choose, please try sNews CMS

CSS resource.
AJAX resource.
Photoshop resource.

Website 4 U

I'am at your service. I will produce a CSS/XHTML valid site based upon sNews CMS, a single file, SEO optimized, content managment system. And Joomla, another free CMS.

Advertising

Advertising on p-ahlqvist.com is cheap. If you want to place an ad with me, please contact me for a free consultation.

Rock Band

You're in a local Rock Band in my region. Please contact me if you want free online exposure. You will get visible to many people, and possibly this will lead to something.

Sponsors

  • Eatlon.com
  • sNews CMS
  • iWebtool