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 (http://blog.codefidelity.com/?p=18), 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 (http://www.visualbinary.net/files/tutorials/lightbox/flash/as2/) 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 (http://www.visualbinary.net/files/tutorials/lightbox/flash/as2/images.xml).

[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/tutorials/lightbox/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/tutorials/lightbox/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.

[nate51]

I suspected it was that too, but I placed the image in almost every directory I have and it still isnt able to find it.

My AS is as follows (for the button part)

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

This is a line from the XML

<image src="weddings/image01.jpg" thmb="thumbnails/weddings/image01.jpg"/>

It's weird because I know it's so close and it's most likely something super small that's messing up I just cannot put my finger on what it is.

*Edit
Also the directory structure for the images is
images/weddings/image01.jpg

[Medyman]

Replace your onRelease function with the below and see what it outputs.


this.thumbHolder.onRelease = function() {
trace("images/"+images[this.id]);
}

I'm not sure what other code you've changed other than your onRelease, so I can't say more than that at this point. Please post the rest of the code you've changed from what you've posted above.

If you haven't changed it, then that's the problem. The images[this.id] syntax is related to the example I posted. You're using different techniques to import your XML.

images[this.id] relates to the image path and captions[this.id] relates to the caption for the image. I don't see any part of your XML for a caption. Maybe you don't want to include this, I'm not sure. If you don't want to include it, then you can just leave it blank or pass an empty string.

[nate51]

This is my AS to import the XML and make the thumbnails link to full size images.

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;
this.thumbHolder.main = this.picHolder.attributes.main;
this.thumbHolder.onRelease = function() {
getURL("javascript:LightboxDelegate(\'images/" + images[this.id] + "\',\'" + captions[this.id] + "\')", "");

}
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");

is the "this." code causing a conflict? Since it appears as "this.thumbHolder".

I hope this wont cause me to have to scrap this script and start with another one.

[Medyman]

is the "this." code causing a conflict? Since it appears as "this.thumbHolder".

No, using the "this" keyword is a relative term. This always means the object that you're applying events/actions to. You can use it any number of times. Here there are within different contexts. I will say that almost all of your "this" decelerations are unnecessary. Removing them would clean up your code and make decipher relative paths easier.

The error is that there are you're calling variables that don't exist. Have you tried the trace that I asked? Is it tracing only "images/"? In the getURL function, you're referencing two arrays (images and captions) when they don't exist anywhere in your code. I suspect you're confused by my implementation of XML.

My personal preference is to separate out the data in the XML and assign them to arrays. This way I have the information to play/manipulate whenever I want in the entire applicate. If you do it all in the onLoad, as you're doing, it'll only be available in that function. This might/might not be a concern of yours though.


So, to fix it I would suggest replacing the images[this.id] in the getURL with:


this.picHolder.attributes.src

and since you don't have a caption in your XML, just leave the caption blank or to be on the safe side, pass a blank string.

this.thumbHolder.onRelease = function() {
getURL("javascript:LightboxDelegate('images/" + picHolder.attributes.src + "','')", "");
}

I haven't tested this, but in theory it should work. You might have problems with the picHolder.attributes.src being available within the onRelease function. You'll have to lay around with using this._parent etc, until you can access it.

[nate51]

I did try the trace option I forgot what it gave me, I just tried it now and it gave me this "Wrong number of parameters; trace requires exactly 1."

I am starting to understand how things are working here, but I tried your new example which made sense to me, but it still is just getting stuck on the loading.

I tried playing around with the _parent command but it still didn't change anything.

I thinned down the site and uploaded what it is doing so far, maybe this will help more, the swf file html and xml files are all there.
Click Here (http://ne-media.com/bucci/)

Here is a working version in html
Click Here (http://ne-media.com/bucci/index_test.html)

I am drawing blanks.

[Medyman]

I did try the trace option I forgot what it gave me, I just tried it now and it gave me this "Wrong number of parameters; trace requires exactly 1."

What, exactly, are you putting in the trace?

[nate51]

What, exactly, are you putting in the trace?

Ok bare in mind I am new to the trace option never used it before but I had it like this.

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

}

[Medyman]

Ok try replacing that with:

this.thumbHolder.onRelease = function() {
trace("images/"+this.picHolder.attributes.src);
}

What do you get now?

[nate51]

When I check the code (check syntax) it doesnt give me that error anymore.

I saw someone use this before like a year ago and I cannot figure out how to display what functions are happening when you do them (window to display the actions) I am assuming that's why we are using the trace option so we can see where it is looking for the picture?

[Medyman]

I saw someone use this before like a year ago and I cannot figure out how to display what functions are happening when you do them (window to display the actions) I am assuming that's why we are using the trace option so we can see where it is looking for the picture?

That screen you're talking about is the debug screen. It comes in handy but is not necessary here.

So, what did the trace display in the Output panel?

[nate51]

The output window displayed this.
"images/undefined"

[Medyman]

The output window displayed this.
"images/undefined"

As expected. See, the scope of the XML object doesn't go beyond the object itself. That's why in my example you see the use of arrays. What is the best thing to do when working with XML in a robust application like this, is to add the data to variable arrays or other variables so that you can manipulate the data afterwards.

You're doing everything within the onLoad() event. There is nothing wrong with it, but for clarity of code I suggest you move the code outside. Also, you're declaring a lot of variables that don't come into use. Lastly, you're calling a "title" attribute from your XML which doesn't exist.

I'm assuming you'll add the title in -- otherwise your caption in Lightbox will read "undefined";

So, anyway...cleaning up your code, I get this:

var xml:XML = new XML();
xml.ignoreWhite = true;

var totalImages:Number = new Number();
var count:Number = 0; // Variable that counts how many movieclips have rendered thus far
var yPos:Number = 30; // Initial _y coordinate of the first row
var spacing:Number = 55;

xml.onLoad = function(success) {
if (success) {
totalImages = this.firstChild.childNodes.length;
loadImages();
}
};

function loadImages() {
for (i=0; i<totalImages; i++) {
var thmbPath:String = xml.firstChild.childNodes[i].attributes.thmb;
var holder:MovieClip = this.createEmptyMovieClip("holder"+i, this.getNextHighestDepth());
var thumbnail:MovieClip = holder.createEmptyMovieClip("thumb", 1);

holder.id = i;
thumbnail.loadMovie(thmbPath);

holder.onRelease = function() {
trace("javascript:LightboxDelegate('" + xml.firstChild.childNodes[this.id].attributes.src + "','" + xml.firstChild.childNodes[this.id].attributes.title + "')");
getURL("javascript:LightboxDelegate('" + xml.firstChild.childNodes[this.id].attributes.src + "','" + xml.firstChild.childNodes[this.id].attributes.title + "')");
}

if (count == 8) { // if count = 8, 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)
}
holder._x = count*spacing // set _x coordinate
holder._y = yPos; // set _y coordinate
count++; // increase count by 1
};
}

xml.load("wedding.xml");

When you click a thumbnail, it'll trace the LightboxDelegate call (and probably launch a blank browser window). When you embed it, it should work as intended with Lightbox++.

HTH

[nate51]

Alright, this is starting to work now, thanks so much for sticking with it and helping me with this, the only issue I am confronting now is the bottom bar with the image description and the close button does not fit the picture, it seems to stay one generic size.

Click Here (http://ne-media.com/bucci/) Go to portfolio and select one of the last 3 pictures you will see what I mean.

I assume this is a javascript issue now.

*Corr
Ok the last AS I had a better understanding of and things were a bit more clear and easier for me to edit (i.e. I could move the thumbnails and apply drop shadows as they were in a MovieClip, this new system seems to set the thumbnails in the top left corner and they don't work off the thumbnail Movie Clip I had.

Is there anyway to still edit the thumbnail position and possibly add effects?

[Medyman]

Hey Nate,

I'm not able to replicate that in Fx 2 and IE7 on a PC. The popup box is resizing for me.

[nate51]

Hey Nate,

I'm not able to replicate that in Fx 2 and IE7 on a PC. The popup box is resizing for me.

I'm getting it perfect now too, maybe it was a cache issue or something.

But do you happen to know of a way I can control the thumbnails with a MovieClip? instead of the freespace method it's in right now?

[nate51]

Nevermind,

What I did was made a MC and placed the AS in it, now I am able to reposition the mc containing the AS and apply drop shadows and everything still works.

Medyman, you are a huge asset to this community, I cannot thank you enough for your assitance and education on this matter.

-- Nate