Flash experiments: Flashbox – part 1

Update: I am not keeping files for historical purposes, so the Flashbox directory will be update. (This means: when you view the progress, explained in this post, there is a possibility that the files are already evolved some… and the description here won’t fit what you see )
Check for more recent post about FlashBox.

Introduction to Flash experiment: Flashbox

In “Flatpack toys other then ReadyMech” I started to experimented with Lightbox JS v2.0 to show images without using a popup or leave the page. I used wp-lightbox2.
And I was impressed! It uses prototype.js which is a JavaScript Framework. Until I saw that wp-lightbox2 plugin (lightbox.js, prototype.js, effects.js, images, css and php file) is a total of 86,6kB….

So I looked for a alternative, and found thickbox which was smaller (total 31kB) and more versatile (not only images and galleries but also inline content, iframes and AJAX content). Thickbox uses jQuery which is a JavaScript Library.
I used the wp-thickbox plugin (20,8 kB) and donโ€™t forget wp-jQuery (19.5kB). So to get thickbox working on WordPress it will add up to 40.3kB total (less then half of lightbox).

And here comes the trouble:
A couple of days ago there was an update of WordPress: WordPress 2.1 Ella and this version of WordPress uses prototype.
And prototype and jQuery can live together but can cause problem.
Which it did in my case: Thickbox didn’t work any more, and a theme I was working on (using jQuery) stop working too.

Update: Not functioning of Thickbox had nothing to do with WordPress 2.1 or with the wp-plugin. I was to hasty with my conclusion. Read the comments

So I changed this blog (not update to wp2.1 yet) back to Lightbox again, because of the prototype/jQuery issues and future updates of my blog.

And then I started thinking about Flashbox

What is Flashbox? Well it’s Lightbox but with Flash.

Lightbox JSFlashbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

There are some things I want to change:
Lightbox improvement

  • thumbnails, or something similar so you can skip a couple images in a gallery
  • autoplay / slideshow
  • resize big images

note: A good example is the slideshow from flickr.com.

Flashbox goals

Always good to set some goals at the beginning of a project:

  • lighter then LightBox 2 – over 100 KB (LightBox is not compressed )
  • lighter then ThickBox – around 30 KB
  • lighter then Greybox – 22 KB
  • copying the same basic function from Lightbox
  • no javascript framework
  • even more simple to install
  • …..

Follow my progress on FlashBox

You can follow my progress in the Flashbox directory.

    3 thoughts on “Flash experiments: Flashbox – part 1

    1. Hey!

      Sorry to hear that you had trouble with my plugin.

      I can confirm that it works perfectly fine with my install (and that of others) and that WordPress doesn’t force Prototype into blog pages. My own sites theme (Styled by Alex Sancho) uses jQuery and works completely fine with 2.1, and even the SVN of 2.2! My guess is that you have Prototype script included in your page somewhere, in which case, I can’t help you unless you get the jQuery-compatibility file from jQuery.com.

      Also, Although the full size of jQuery and thickbox is 30kb, the thickbox.js file is uncompressed and could probably be sliced down to 25kb. The loading image included with thickbox could be replaced with something a fraction of the size, so there are cost savings to be found. I merely used the public versions to ensure maximum compatibility with the world at large.

      Still, although I hate the use of flash for the purposes of user experience enhancement, flashbox is an acceptable example, since it is degradable.

    2. You are correct, I didn’t even realize this!

      In this blog I use sociable and on my test USBwebserver (with WP 2.1 installed) I started using share this and this one works with prototype.

      The new installment of your wp-thickbox plugin has/creates no problem! It overwrites prototype functions but I was not very happy with this bloated javascript library.

      To sad that “share this” doesn’t work with jQuery, oh well can’t have em all.

      And I know most developers hate flash. It’s something I have to learn to live with …. ๐Ÿ˜€

    3. hey, i workin on a flash page and want that effect (overlay images on the current page)in the flash/swf. is that possible?

    Comments are closed.