FlashBox – Usage instructions

Quicknavigation: How to use | How to install on WordPress | Tips and Tricks

How to use

Download the lastest-zip file: in there you will find:
FlashBox zip

+ wp-flashbox (32.4 kB)
|	+ csMinimal Flash plugin version is 8!
|	|	- flashbox.css (0.5 kB)
|	+ js
|	|	- browser_detect.compressed.js (1.6 kB)
|	|	- domFunction.compressed.js.js (0.4 kB)
|	|	- browser_detect.compressed.js (1.6 kB)
|	|	- flashbox.compressed.js (5.1 kB)
|	|	- swfobject.compressed.js.js (6.1 kB)
|	- flashbox_v01.swf (11.2 kB)
|	- readme.txt (3.7 kB)
|	- wp-flashbox.php (3.4 kB)

Part 1 – Setup

Flashbox uses Javascript files, don’t forget them to include in your header.

Include the Flashbox CSS file (or append your active stylesheet with the Flashbox styles).

Part 2 – Activate

Add a rel="flashbox" attribute to any link tag to activate the flashbox. For example:

image #1

Optional: Use the title attribute if you want to show a caption.

If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

image #1
image #2
image #3

And because it also works with lightbox:

image #1
image #2
image #3

No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

Install on WordPress

Usage instructions

  • Download the latest-zip file and decompress into wp-content/plugins.
  • Go to your Plugins screen in the WordPress admin area, and activate “Flashboxâ€?.
  • Activate FlashBox in WordPress admin

  • In the code view, you get a “Flashboxâ€?-button where you can fill in url of the image, the caption and the groupname

Check all images: How to use FlashBox in WordPress.

FlashBox button in code editor
FlashBox url
FlashBox caption
FlashBox groupname
FlashBox result

Tips and Tricks

Minimal Flash plugin version is 8!

tip 1: How to create a gallery without showing every image.
put this in the source of you html page:
image gallery
and where every in the page

The display:none will make the whole block (div) disappear for the viewer but, it will still be “visible” for the FlashBox code

tip 2: How to create a large gallery without showing every image, but some step inbetween.
put this in the source of you html page:

image 1 - 25
image 26 - 50

The display:none will make the whole block (div) disappear for the viewer but, it will still be “visible” for the FlashBox code. In html it will look like this:

image 1-25
image 26 – 50

Flash FlashBox Open source / Freeware WordPress Plugin

FlashBox v1.2: fixed error with comma in title

I came across a big bug in the caption. If you placed a comma in the title (which is used for caption) example: title=”bla, bla, bla” the image and the captions got hussled. I fixed this and added some new features (read more).

You can follow my progress in the Flashbox directory. A gallery example: Badass Robots used in film.

Transformers Movie Optimus Prime
Robot B9 from Lost In Space
ABC Warrior from Judge DreddCain
Roy Batty

Download WordPress Plugin – Download FlashBox v1.2

If you have FlashBox v1.1 installed, you should delete the directory!

Download wp-FlashBox v1.2 (20,1 kB)

Flash FlashBox Open source / Freeware WordPress Plugin

FlashBox v1.1: fixed visibility bug FF2 (Apple)

Update #1: Tested on Opera on Apple and Pc

Update #2: Another bug seems to appear in Firefox 2 for the Mac: goto Flashbox directory, click on rel=”flashbox[test]” (you should see a mecha-robot with sword). If you scroll to the top of the page, FlashBox disappears and when you scroll down, you will see it again…

Update #3: Images of bug in Firefox 2 (Apple) [1] [2] [3]

Update #4: another bug, but for all browsers: if you type title=”bla bla bla, bla bla” (title with a komma) the images used in the won’t show.

I love feedback…. and the feedback on FlashBox was that it didn’t work correctly on Firefox 2 on the Mac.
This was a serious bug… and it took me some time to figure out where it was created.

You can follow my progress in the Flashbox directory. A gallery example: Badass Robots used in film.

Transformers Movie Optimus Prime
Robot B9 from Lost In Space
ABC Warrior from Judge Dredd
Roy Batty

So the code is tested on:

  • Firefox, Opera 9.10 and Safari 1.3.2 on Apple
  • Firefox, Opera 9.10 and IE 7.0 on Pc

Sadly I have no access to a Intel Mac with Flock

(Please let me know if it works / or not in other browsers)

Download WordPress Plugin – Download FlashBox v1.1

Download wp-FlashBox v1.1 (19,2 kB)

I haven’t updated the link in, because I don’t want the same mistake (not testing on different browsers) twice

FlashBox WordPress Plugin

Flashbox is added to

For some shameless promotion of wp-flashbox plugin I added the plugin into

I hope the get some feedback soon. See if people are interested in “another box”.

Flash Flash experiments FlashBox Open source / Freeware WordPress Plugin

My second WordPress plugin: wp-flashbox

Update #1: There are some problems with the plugin in Firefox 2 for the Mac and Flock: FlashBox is loaded, the images are loaded into it, but FlashBox is not visible.
I am looking into it, sorry Mac users!
There is also a difference between Firefox for the PC and IE for the PC: it works perfectly, but in Firefox FlashBox will be restarted and in IE FlashBox starts where it left of (if it’s started before). These is not a bug this is a feature!

Update #2: A feature I forgot to tell about: you don’t have to change the rel="lightbox" tags, it will also work with FlashBox. If you’re planning to use both, you have to use rel="flashbox"– tag. But if you want to use FlashBox instead of Lightbox, you have te deactivate lightbox!

FlashBox is my attempt to create a simple, unobtrusive script used to overlay images on the current page.

Read more about FlashBox in detail, the different post about FlashBoxor you can follow my progress in the Flashbox directory where my experiments are.

But to sum it up: It had to be smaller then the other (Lightbox, Thickbox and Graybox), but with the animation (like Lightbox).
Or just another alternative for Lightbox / Thickbox / Graybox?

And because I wanted to use it on my own blog, I wrote a plugin too. And I’m not afraid to share it with you.

Download WordPress Plugin – Download FlashBox v1.0

Check the latest Flashbox version: the category FlashBox

Download wp-flashbox (17,9 kB)

Open source / Freeware WordPress Plugin

My first WordPress plugin: wp-downloadbtn

Yes, it had to happen sooner or later; my first WordPress plugin.

I can make it bigger then it is, but I won’t.
It’s just a download button, it works in WordPress 2.0.7 and WordPress 2.1.
I use it in combination with Download Counter WordPress Plugin

Download WordPress Plugin – Download Button v1.0

Design Improvement

WordPress Sociable plugin

A while back I started writing this article but never finished it.
So today I did…

I like using opensource, and try to give something back to the people who make them.
So if I see bugs I report them, and if I see improvements I’ll send a massage or a sketch of the improvement.

And so I did with Sociable by Peter Harkins.

Update: Peter started working on Sociable 2.0 (at the time of writing: beta 4) and a lot of improvements are made.

What is Sociable? The best description is from Peter himself:

Social bookmarking sites allow websurfers to save, catalog, and share interesting pages they find online. The Sociable plugin appends links for your readers to use those sites to the end of each of your blog’s posts, increasing your potential audience.

This is the email I send to Peter with improvements and some sketches I made.

Hi Peter,

First I wanted to thank you for creating the “Sociable” wp plug in.
It is exactly what I was looking for.

But this is not the reason I am sending this email
First the facts:
I downloaded “Download Sociable 1.2 (released 2006-03-26)”

and in this version you say that technorati is included
I couldn’t find it so I added it:

    'StumbleUpon' => Array(
        'favicon' => 'stumbleupon.png',
        'url' => '',
    'Technorati' => Array(
        'favicon' => 'technorati.png',
        'url' => '',

and my favorite StumbleUpon wasn’t included, so I added it to (StumbleUpon is one of the recommended addons from Firefox)

and I added the images….

no problem there.. probably something that was forgotten.

But because of this I found a bug:
I’ll just walk you through the steps:

  1. uploaded and installed the wp plug in
  2. selected some social bookmarking sites
  3. couldn’t find technorati
  4. so I wanted to edit the sociable.php from within wp and couldn’t (this is not a bug)
  5. so I edit the sociable.php and uploaded it again (see above for the additions to the file)
  6. checked if the sociable.php was changed (plug in >> plug in editor) and it was
  7. options >> sociable and no Technorati or StumbleUpon
  8. the only thing that seem to work was the button “Restore Built-in Defaults”

Extra / new features:

  1. Add and edit sites via admin page (but it is already on potential future additions)
  2. alert on “Restore Built-in Defaults” [view image]
  3. position of the “Restore Built-in Defaults” not directly under the “Save Changes” button especially without an alert on it >> perhaps move it to the left side. [view image]
  4. “Change the text displayed in front of the icons below” is a nice feature, but I can’t use it because I don’t like the hover on it (“these icon link….”). So for now I don’t put anything in there, but perhaps you can control this feature better [view image]:
    1. keep it as it is
    2. add a check box for the hover
    3. add a text field for the text in the hover box
  5. default is everything selected.. perhaps it would be nicer to start of with:
    1. default set of popular social bookmark (my list would be: Digg, Delicious, Stumbleupon, Reddit, Furl, Newsvine ) source “Social Bookmarking (aka Going Viral)”
    2. one (digg) and let the user make a conscious decision
    3. none, and let the user make a conscious decision

so thx for your attentions, good luck with the further development of this plug in