Flash and Lightbox

[nate51]

I am using an XML gallery in flash and I have now run into a situation where the pictures that the client wants to use will vary in size and they want to be able to change the gallery pictures on a monthly basis (reason for using the XML).

The thumbs arent an issue but I can imagine the larger images will be. I have seen javascript lightboxes used in flash and I have this page detailing how to use it in flash Link to page, problem is I am using XML. Below is my XML code. Has anyne done this before? I think I see an opening where I could place this but I am sure how to change it from loading the image into a container to loading it via href and bring up the "getURL" line.

myPhoto = new XML();
myPhoto.ignoreWhite = true;
var count:Number = 0; // Variable that counts how many movieclips have rendered thus far
var yPos:Number = 0;  // Initial _y coordinate of the first row
myPhoto.onLoad = function(success) {
	//portfolioTag = this.firstChild;
	numimages = this.firstChild.childNodes.length;
	spacing = 51;
	for (i=0; i<numimages; i++) {
		this.picHolder = this.firstChild.childNodes[i];
		this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
		this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
		this.thumbLoader.loadMovie(this.picHolder.attributes.thmb);
		this.thumbHolder.title = this.picHolder.attributes.title;
                          //main in my xml calls up the images
		this.thumbHolder.main = this.picHolder.attributes.main;
		this.thumbHolder.onRelease = function() {
			loader.loadMovie(this.main);
			title_txt.text = this.title;
		}
		if (count == 8) {  // if count = 4, we're at the end of the row
			count = 0;  // reset count to 0
			yPos = yPos + 70;  // incease the _y coordinate for the next row (100 = height of element plus padding)
		}
		
		this.thumbHolder._y = count*spacing // set _x coordinate
		this.thumbHolder._x = yPos;  // set _y coordinate
		count++; // increase count by 1
	};
};
myPhoto.load("wedding.xml");

Any help or direction would be a huge help. I am very new to xml and had some great help to get the xml working right.


-- Nate

[Medyman]

Hey Nate...

You already have an onRelease function in your code. The getURL should go within that.

this.thumbHolder.onRelease = function() {
	loader.loadMovie(this.main);
	title_txt.text = this.title;
}

The use of XML doesn't really change anything. The only change would be to add variables or data strings into the getURL instead of hardcoding the values.

You already have a tutorial on how to do this, but if you're still confused, take a look at the Lighbox thread in this forum. I offered (the same solution) there a while ago and explained it.

Here is an example of using Lightbox, XML and AS 2.0 together. The Flash sources are included on the page and released under Creative Commons Non-commercial. Feel free to play around with them. If you want to take a look at the XML file, it's here.

[nate51]

Alright I see what you mean, I tried this.

AS

this.thumbHolder.onRelease = function() {
			getURL("javascript:LightboxDelegate(\'images/" + images[this.id] + "\',\'" + captions[this.id] + "\')", "");

I got this line from the source of the example

I added the lightbox and javascript to my index page holding the flash file but it is giving me this error when I click the thumbnail.

Line: 27
Char: 4
Error: 'Lightbox' is undefined
Code: 0

Out of all the errors I was expecting, that was not one of them.

Actually even the example is having problems opening the main image, not the problem I am having but a problem none the less.

[Medyman]

1. Do you have lightbox working on the page without Flash? Make sure it does before integrating it into flash.

2. You don't need to escape the single quotes in your AS.

3. Which example are you talking about?

[nate51]

For question 1. I tried just a plain html page with the same js and css code on top like the page containing the flash and I used this code for the thumbnail

<a href="images/weddings/image01.jpg" rel="LightboxDelegate"><img src="thumbnails/weddings/image01.jpg" width="50" height="33" border="0" /></a>

But all it does is open the image in the same window like there was no lightbox code.

Question 2. I don't know what you mean by escape single quotes.

Question 3. The example was http://www.visualbinary.net/files/tu...box/flash/as2/ when I click the thumbnail the screen goes dark like it is using the lightbox but no image appears I am not sure if that's the way they wanted it to appear.

[nate51]

Oh wait, I added the lightbox++.js file to the js folder as it was missing before and now it gives me the dark screen like the lightbox is working but the image does not appear now.

I will play with the extensions as I think it's looking in the wrong directory maybe.

[Medyman]

question 2. I don't know what you mean by escape single quotes.

this.thumbHolder.onRelease = function() {
			getURL("javascript:LightboxDelegate(\'images/" + images[this.id] + "\',\'" + captions[this.id] + "\')", "");

Question 3. The example was http://www.visualbinary.net/files/tu...box/flash/as2/ when I click the thumbnail the screen goes dark like it is using the lightbox but no image appears I am not sure if that's the way they wanted it to appear.

Are you using IE? I just tested and I see what you mean. It works in Fx. I'll take a look to see what's causing this.

[Medyman]

It's fixed now. It should work. It turned out to be the JS I was using to embed the Flash. I've just switched to the old <object> and <embed> method. I've tested it in the default PC-browser lot (IE6, IE7, Fx 2, Opera 9, Safari 3).

[nate51]

Oh cool, I didn't know it was off your site, really cool work.

Issue I am having now it everything happens the way it should but the lightbox gets stuck on the loading gif. I looked over the links and even pasted the image in multiple directories to test and it just sticks on the gif.

Normally I would try and tackle this myself but I have no idea where the problem may lay or what to try next.

I also changed the onrelease and took out the single quotes like you mentioned and it helped me get this far I think.

[Medyman]

If it never gets past the loading thing...I'd suspect that your URI to the image is off.

Try tracing out the output to the getURL and see if the right image path is being sent.

If it is, then I'll take a closer look at your code. You'll need to post a snippet of your XML for me to do that though.