XML Slideshow/PhotoGallery - Hyperlinking Each Image

talk open source
1

Hey everyone,
After a member request, here is a minor modification to the code for the photo gallery and slideshow tutorials. I modified the code from both the tutorials to take into account URL data from the XML file. When somebody clicks on the image, a new web page with the URL will be displayed. I guess that is great for people wanting to show a gigantic version of the image when somebody clicks on it :slight_smile:

I have attached the photo gallery zip file and the slideshow zip file below. The XML file, HTML, and SWF files are inside the zip file.

Cheers!
Kirupa :ninja:

2

I m new here, and I was trying to do something like this and I almost die trying
Thanks a lot !!

3

Hey dipuchandran, I have a question about your code. In the part where you load the XML file, there is some extra code after the file name.

xmlData.load(“main.xml[COLOR=“Red”]?task=refresh[/COLOR]”);

What does it do? Does it refresh the XML file if you update it? My problem is I am using one of these slideshows and it gets updated on a regular basis. The SWF never gets updated, just the XML, but for some reason, you have to refresh your browser AND clear all your cache and internet files before you will see the new images/text. If anyone else can help it would be greatly appreciated! :slight_smile:

4

[quote=kirupa;707457]Hey everyone,
After a member request, here is a minor modification to the code for the photo gallery and slideshow tutorials. I modified the code from both the tutorials to take into account URL data from the XML file. When somebody clicks on the image, a new web page with the URL will be displayed. I guess that is great for people wanting to show a gigantic version of the image when somebody clicks on it :slight_smile:

I have attached the photo gallery zip file and the slideshow zip file below. The XML file, HTML, and SWF files are inside the zip file.

Cheers!
Kirupa :ninja:[/quote]

[COLOR=Purple] What about the slideshow with the scrolling thumbnails…I added part of the new code to it but it doesn’t really work. Probably it’s in a wrong location.
Please help!
Here’s part of the code of where I added the getURL. Sorry it’s so long:[/COLOR]

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];

[COLOR=Red] //
//define link variable
//
link = [];
//
[/COLOR]
thumbnails = [];

    total = xmlNode.childNodes.length;
    for (i=0; i<total; i++) {
        image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
        description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
        thumbnails* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
        thumbnails_fn(i);
    }

[COLOR=Red] //
//adding links
//
link* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
//
[/COLOR]

    firstImage();
} else {
    content = "file not loaded!";
}

}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load(“images_w.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;
}
}

[COLOR=Red] //
//getURL statement
//
picture.onRelease = function() {
getURL(link[p], “_blank”);
};
//
[/COLOR]
};
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);
}