A K Chauhan's Blog » Flash

Initialize LightBox using JSON string and Run it from Flash

admin — Tue, 25 Aug 2009 06:19:50 +0000

Lightbox is the most popular way of showing large image on click on thumbnail over the web. Lot of websites are using the LightBox. Normally, We use lightbox using the “rel” attribute of anchor tag. We use lightbox this way:-

<a href="images/image-1.jpg" rel="lightbox" title="thumb"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

Here, we provided the “rel” attribute as “lightbox” in hyperlink. What lightbox script do is when page load completed its check all the hyperlinks of page and if rel=”lightbox” is exists them it push this link into an array.
Lightbox extract the “href” and “title” attributes of each link having rel=”lightbox” and push all of them into array. “href” is normally the URL of larger image. Lingtbox also add “click” event on all of these hyperlinks and when user click on any particular thumbnail the lightbox starts.

Here, I’m showing a way in which you can initialize the lightbox by using the JSON string. Basically, this JSON string contains the “href” and “title” information which we want to show. We can create this string dynamically using any server side scripting language. Here is one of sample JSON string.

<script language="javascript">
	var img_json = [['pics/photo-80.jpg', 'Title 01'],['pics/photo-128.jpg', 'Title 02'],['pics/photo-160.jpg', 'Title 03'],['pics/photo-165.jpg', 'Title 04'],['pics/photo-205.jpg', 'Title 05'],['pics/photo-206.jpg', 'Title 06']];
script>

You can learn more about JSON here.

We also need to do some small changes in lightbox javascript file so it use our JSON string for image array instead of create array by checking the “rel” attribute in whole page.

You can download the customized lightbox javascript file from here.

You can see the working demo here.

1. Remove the “imageLink” parameter from start function because now we not starting LightBox by not clicking any thumbnail.

start: function(imageLink)

function to

start: function()

2. Now we are initializing the “imageArray” using JSON string.

this.imageArray = [];

this.imageArray = img_json;

3. Comment these line of code inside start function bacause we not want to check whole page links for lightbox.

/*if ((imageLink.rel == 'lightbox')){
           // if image is NOT part of a set, add single image to imageArray
           this.imageArray.push([imageLink.href, imageLink.title]);         
  } else {
            // if image is part of a set..
            this.imageArray = 
                $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
                collect(function(anchor){ return [anchor.href, anchor.title]; }).
                uniq();
 
            while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
  }*/

4. Add function startLightBox() at the end of Lightbox class. This function start the lightbox when we click on the link having id=”start”.

startLightBox: function() {
	var th = this;
	Event.observe($('start'), 'click', function () {
	 	th.start();
	});
}

5. Add this line in initialize() function to call “startLightBox()” function which create the click event on link having id=”start”.

this.startLightBox();

After completing all the five changes in lightbox.js you need to create a link with id = “start” in your HTML file. When you click on this link its starts the LightBox. Here is the code for HTML file.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Initialize LightBox using JSON string and Run it from Flash</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<a href="#" id="start">Start LightBox</a>
</body>
<script language="javascript">
	var img_json = [['pics/photo-80.jpg', 'Title 01'],['pics/photo-128.jpg', 'Title 02'],['pics/photo-160.jpg', 'Title 03'],['pics/photo-165.jpg', 'Title 04'],['pics/photo-205.jpg', 'Title 05'],['pics/photo-206.jpg', 'Title 06']];
</script>
</html>

How call JavaScript function from FLASH

admin — Wed, 08 Apr 2009 10:30:52 +0000

We can call the JavaScript function from FLASH application. I am showing here how we do that.

getURL("javascript:helloWorld();");

Here “getURL()” is the Flash ActionScript function. We have give the name of our JavaScript function with “javascript:” as prefix. This will call the “helloWorld()” function which we have defined in JavaScript.

<script type="text/javascript">
     function helloWorld() {
           alert('Hello World');
     }
script>

Also, add the following parameter to the OBJECT and EMBED tag:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="150" height="120">
  <param name="movie" value="swf/myflash.swf" />
  <param name="allowscriptaccess" value="always" />
  <param name="wmode" value="transparent" />
  <param name="menu" value="false" />
  height="120" width="150" allowscriptaccess="always" wmode="transparent" menu="false" src="swf/myflash.swf" type="application/x-shockwave-flash"/>
</object>

allowscriptaccess let the Flash application to communicate with the HTML page hosting it. This is required because getURL() function can cause JavaScript to use the permissions of the HTML page, which can be different from the permissions of your Flash application. This has important implications for cross-domain security.

The valid values for allowscriptaccess are:

always permits scripting operations at all times.
never forbids all scripting operations.
samedomain permits scripting operations only if the Flash application is from the same domain as the HTML page.

The default value used by all HTML publish templates is samedomain.

How to use wmode as transparent for flash and what’s its use?

admin — Sat, 14 Mar 2009 04:26:48 +0000

Sometime our embedded flash object comes over our websites dropdown menus or over other objects like light box, jQuery Boxy, fancybox etc.

We can solve this problem by changing the wmode of embed to transparent. By changing the wmode to transparent the flash object becomes transparent.

We can do it in following ways.

HTML:-

Add the following parameter to the OBJECT tag:

<param name=”wmode” value=”transparent”>

Add the following parameter to the EMBED tag:

wmode=”transparent”

JavaScript:-

If you are using swfobject.js javascript file for embedding. Then do it like this.

<script type="text/javascript">
var obj = new SWFObject(”player.swf”,”ply”,”300″,”250″,”9″,”#FFFFFF”);
obj.addParam(”wmode”,”transparent”);
script>

If you want to apply the wmode transparent to whole HTML page. You can do this way.

<script type="text/javascript">
for (var ems = document.embeds, i = 0, em; em = ems[i]; i++) {
	em.setAttribute(’wmode’, ‘transparent’);
	var nx = em.nextSibling, pn = em.parentNode;
	pn.removeChild(em);
	pn.insertBefore(em, nx);
}
script>