Lightbox with AF FlowList

[mastubbs]

Hi guys,

Does anyone know how to use AF components 'Flow List' component with lightbox (so that when you click one of the images in the flow list it opens in a lightbox)?

PS if you dont know Flow List go to: http://www.afcomponents.com/components/flow_list/

Ive been trying to figure it out for ages but cant quite get it. Heres what i have so far:

1. Make new AS2 flash file with FlowList component.
2. In actionscript for that component put:



// open new URL
myFlow.addEventListener("ITEM_ON_PRESS", this);

function ITEM_ON_PRESS(evnt:Object) {
//Check clicked image
if (evnt.target.id == myFlow.getSelectedItem().id) {
getURL("javascript:displaylytebox(1)");
}
}

function displaylytebox(image) {
var a = document.getElementById("picture"+image+"");
myLytebox.start(a);
}


Im NOT good with actionscript but i think the first part of this script determines your dealing with the centre image, the second part is to communicate with the javascript (rite?)

3. add this to the body of your HTML page


<div id="script">
<a id="picture1" href="ximages/1.jpg" rel="lytebox" title="YourTitle"></a>
<a id="picture2" href="ximages/2.jpg" rel="lytebox" title="YourTitle"></a>
<a id="picture3" href="ximages/3.jpg" rel="lytebox" title="YourTitle"></a>
</div>


of course also make sure you have


<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
in your head and that you have the css and js file saved.

4. Update your xml so that it has the image paths for FlowList to find and set the path to your xml in the flowlist parameters.

Sample xml:


<?xml version="1.0" encoding="iso-8859-1"?>
<content>
<image>
<path><![CDATA[ximages/1.jpg]]></path>
<description><![CDATA[FLOW LIST COMPONENT]]></description>
<data><![CDATA[]]></data>
</image>
<image>
<path><![CDATA[ximages/2.jpg]]></path>
<description><![CDATA[FLOW LIST COMPONENT]]></description>
<data><![CDATA[]]></data>
</image>
<image>
<path><![CDATA[ximages/3.jpg]]></path>
<description><![CDATA[FLOW LIST COMPONENT]]></description>
<data><![CDATA[]]></data>
</image>
</content>


5. Add the swf to the same html page

When i do all this and upload everything to the server it doesn't work. If you click on any of the images nothing happens :( Im guessing i need to make changes to the xml?

Thanks in advance for any help,

Matt

[Medyman]

There could be a lot at play here. Your general logic is correct, though I'm unsure about the specific code. I'm unfamiliar with the specific component so I can't be sure that it will work with Lightbox (or lytebox).

Do you have a demo page up anywhere? It would help in figuring out where the error is happening. If the AS is communicating with the Lytebox scripts, you should be getting JS errors. That'll at least get you a direction to go in.

In step 2, you mention the displaylytebox() function. Do you have that code in Flash or on your HTML page? That's a JS function that you should have within <script></script> tags on your HTML page.