The idea behind this plugin is to let Flash call a jQuery-function that will open up a LightBox. Nothing fancy, just a lightbox. But before we begin I have two things to say:
1. This is a work in progress. As of now it only lets you display one image, no text or navigation and so on. I plan to rewrite most of the plugin sometime in the future to make it more like ”the real lightbox”.
2. This jQuery plugin was inspired and based on jQuery lightBox by Leandro Vieira Pinho – http://leandrovieira.com. In other words, I stole pretty much everything and rewrote some of the code.
Demo can be found here.
And a developmentversion of the plugin here. (You need to copy/paste right now, sorry.)
Include the following in your html-file:
ALWAYS add ”id” as an attribute in your embedcode if you want IE7 to do what you want.
<link rel="stylesheet" type="text/css" href="JavaScript/flashlightbox/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="JavaScript/flashlightbox/jquery.flashlightbox-0.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').append('<div id="flashLightbox"></div>');
});
function flashLightbox(val) {
$('#flashLightbox').flashLightBox({
image: val,
imageLoading:'lightbox-ico-loading.gif',
imageBlank:'lightbox-blank.gif'});
}
</script>
The code for the demoswf (I use FlashDevelop, FlexSDK 3.5 and Flash Player 9):
package
{
// Import stuff
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.IOErrorEvent;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.external.ExternalInterface;
import flash.events.IOErrorEvent;
import flash.display.Loader;
import flash.net.URLLoader;
import flash.net.URLRequest;
/**
* ...
* @author Mano
*/
public class Main extends Sprite
{
// Setup vars used later on
private var imgUrl:String;
private var imgLoader:Loader = new Loader;
public function Main():void
{
// It's hammertime!
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
// Always remove eventlisteners you dont use
removeEventListener(Event.ADDED_TO_STAGE, init);
//
stage.align=StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
// Set the var image Url.
if (this.loaderInfo.parameters.imgUrl) {
imgUrl = this.loaderInfo.parameters.imgUrl;
}else {
imgUrl = '2648636603_c65d0ecc9c_b.jpg';
}
// Load the image
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete,false,0,true);
imgLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onError,false,0,true);
var request:URLRequest = new URLRequest(imgUrl);
imgLoader.load(request);
}
private function zoom(e:MouseEvent):void {
// If the swf is allowed to use ExternalInterface we call the javascript-function 'flashLightbox'.
// Remeber to always test ExternalInterface on a server and not localy.
if (ExternalInterface.available) {
ExternalInterface.call("flashLightbox", imgUrl);
}else {
trace("ExternalInterface not available");
}
}
private function onComplete(e:Event):void {
/*
Next we resize the image so that we can load a huge image, which we probably will since we want to zoom it and it might not fit.
We create a bitmap and load the loadercontent into the bitmap.
*/
var image:Bitmap = Bitmap(imgLoader.content);
var imageHeigth:int = 200;
var newWidth:int = image.width/image.height * imageHeigth;
image.height = imageHeigth;
image.width = newWidth;
image.smoothing = true;
imgLoader.unload();
/*
* Since we are going to add a MouseEvent we need to create a holder in which we place the bitmap
* because bitmaps are not InteractiveObjects and don't have a clue how to fire events.
*/
var holder:Sprite = new Sprite();
// Some graphic mumbojumbo.
holder.graphics.beginFill(0xcccccc, 1);
holder.graphics.drawRoundRect(0, 0, image.width+40, image.height+40, 20);
holder.graphics.endFill();
// Add eventlistener
holder.addEventListener(MouseEvent.CLICK, zoom);
image.x = 20;
image.y = 20;
holder.addChild(image);
// Position the sprite in the center of the stage
holder.x = (stage.stageWidth - holder.width) / 2;
holder.y = (stage.stageHeight - holder.height) / 2;
addChild(holder);
trace('Image loaded. URL: ' + imgUrl);
}
private function onError(e:IOErrorEvent):void {
trace('Image not found. URL: ' + imgUrl);
}
}
}