For some shameless promotion of wp-flashbox plugin I added the plugin into http://wp-plugins.net/.
I hope the get some feedback soon. See if people are interested in “another box”.
Category: FlashBox
Lightbox but without a javascript framework. And of course Flash
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
Update: Check the Flashbox directory or more post about FlashBox for recent update
Today I’m focusing on Flash.
- First task was of course the security-box from Flash (which seems to fail ???)
- Get the basic stuff in there (loader, navigation, image, caption)
- And get it to center after loading
- ….
Done
But ….
I’ve got everything working in Flash at this moment but to “copy” Lightbox I need to use animations.
Because the animations create with the default animations classes from Adobe (mx.transitions.Tween) are quite heavy, I was looking for an alternative.
Which I found in TweenLite an excellent piece op work by Jack Doyle.
TweenLite provides a lightweight (about 2k), easy way to tween almost any property over time including a MovieClip’s volume. You can easily tween multiple properties at the same time too.
And because size does matter in this project, this will be a life saver.
Preview:
[swf]http://www.matthijskamstra.nl/laboratory/flashbox/flashbox_v01.swf, 450,450[/swf]
Update: Check the Flashbox directory or more post about FlashBox for recent update
Lightbox Javascript to Flashbox Javascript
Bugs in the Lightbox script:
- Lightbox doesn’t follow when the window is scrolled, I’ve fixed this bug
- if no Image (broken link) is loaded, there is no way to stop this process, and you get no feedback
Bug #1: My fix for the scroll bug:
function onscrollChange ()
{
var arrayPageSize = getPageSize ();
var arrayPageScroll = getPageScroll ();
var lightboxTop = arrayPageScroll [1] + (arrayPageSize [3] / 15);
setTop ('flashcontent', arrayPageScroll [1]);
}
and in the showFlashbox function I started to check if the window is scrolled:
window.onscroll = onscrollChange;
Bug #2: This is a bug which will not be fixed in javascipt, but in Flash.
Lightbox HTML to Flashbox HTML
use this doctype in your html files, you need it if you want layers (
) to have a 100% width and height:
put the following lines in you directory structure and html:
Lightbox CSS to Flashbox CC
body,html {height: 100%;margin: 0;padding: 0;}
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
#flashcontent{
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
Update: Check the Flashbox directory or more post about FlashBox for recent update
Flash and crossdomain
The first obstacle is the security box / crossdomain in Flash.
If you want to know more about the security box and crossdomain.xml, visit Martijn de Visser blog, he has an excellent explanation (with images!!!).
But in short, if you want to load images/ xml/ etc from a different server then your own, you need permission (crossdomain.xml) from that server.
This information is given to us by Macromedia Adobe:
loadClip (MovieClipLoader.loadClip method) which explains about crossdomain, security box and the MovieClipLoader (this is the method I use to load the images).
And here I seem to run into a bug: it should not be possible to load from another server without a crossdomain.xml, but I can.
When I follow my HTTP traffic between my machine and the Internet (using Charles) I don’t come across a crossdomain.xml when I load images but when I load xml form that same server I don’t get permission to do so (it can’t find a crossdomain.xml and so it’s not allowed to load xml from that server).
Xml loading from another server is not allowed without crossdomain.xml, but images doesn’t seem to be a problem.
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.
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.