creating url links from images in xml

[ozzie123]

My xml for a gallery I have set up is like this:

<image>
<name>WEB FOLIO</name>
<image>frogs.jpg</image>
<url>http://www.frogsarecool.com target=_blank</url>
</image>
<image>
<name>WEB FOLIO</name>
<image>technocrane.jpg</image>
<url>http://www.technocranecanada.com/ target=_blank</url>
</image>
</gallery>

I've also created an onRelease function on image_holder_mc in my web.swf file as follows:

image_holder_mc.onRelease = function() {
getURL("_blank");
};

The problem is that the gallery images, when clicked, don't go to the url specified in the xml file. How do I get the image_holder_mc to "speak" with the xml file so that the images go to the proper url when clicked? If you go to http://clearlygreendesign.com/ click the folio button and then try out the web gallery, you will see the error I'm getting.

[BLiZZaRD]

myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.load("xmlphoto.xml");
myPhoto.onLoad = function(success) {
numimages = this.firstChild.childNodes.length;
spacing = 70;
for (i=0; i<numimages; i++) {
picHolder = this.firstChild.childNodes[i];
this.thumbHolder = _root.thumbnails.createEmptyMovieClip("thumbnail"+i, i);
this.thumbHolder._x = i*spacing;
this.thumbHolder.title = this.picHolder.attributes.title;
this.thumbHolder.main = this.picHolder.attributes.main;

this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image"+i, i);
this.thumbLoader.loadMovie(picHolder.attributes.thmb);
//create new movie and then load the thumbnails into it.

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

This is what you need to have Flash recognize the XML. Obviously replacing instance names with your own.

[ozzie123]

It works!!!!!!! Thank you so much. This has really frustrated me so I am extremely grateful!!

[BLiZZaRD]

YAY! You are very welcome!

[downbeat44]

Hey Blizzard,
I've been going insane trying to get this actionscript to work for me and I'm absolutely in tatters. Practically spent a whole entire day trying to figure out what I'm doing wrong and am pulling my hair out in frustration as I can't get it to work. I'm trying to do exactly what ozzie123 has done, which is creating a urls on images in xml. My actionscript is a bit different though. If you could take a look and help me out, I would be greatly thankful. The following is my actionscript and I've included my xml code below it:

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
thumbnails = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
thumbnails_fn(i);
}
firstImage();
} else {
content = "file not loaded!";
}
}

xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images_landscapes.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
function thumbNailScroller() {
// thumbnail code!
this.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 10;
tscroller.onEnterFrame = function() {
if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((_root._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}
function thumbnails_fn(k) {
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
target_mc._x = hit_left._x+(target_mc._width+5)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
};
target_mc.onRollOver = function() {
this._alpha = 50;
thumbNailScroller();
};
target_mc.onRollOut = function() {
this._alpha = 100;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}


My XML code is:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<images>
<pic>
<image>pic01.jpg</image>
<caption>
Name:
Desc:
Data:
</caption>
<thumbnail>pic01.jpg</thumbnail>
<url>http://www.cponti.com/</url>
</pic>
</images>



I would appreciate any kind of help or tips you can offer. Thanks!

[bfmrad101]

how can i link these images to other places (like a bigger picture or url or image source). it is a gallery, the thumb image jpgs are the small gallery pics and the im1,im2,im3 and so on are the big ones---need to link the big pics to an image larger then what template gives me.

<gallery>
<image id="#1" thumb="thumb1.jpg" im="im1.jpg" />
<image id="#2" thumb="thumb2.jpg" im="im2.jpg" />
<image id="#3" thumb="thumb3.jpg" im="im3.jpg" />
<image id="#4" thumb="thumb4.jpg" im="im4.jpg" />
<image id="#5" thumb="thumb5.jpg" im="im5.jpg" />
<image id="#6" thumb="thumb6.jpg" im="im6.jpg" />

</gallery>