XML Slideshow/PhotoGallery - Hyperlinking Each Image

[kirupa]

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

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

[FlashPlaya]

WOW!! THANKS K MAN!!!!!!

I was trying to figure that out forever....!!!!

[suspire]

indeed thanks man.
now i've just got to figure out how to make the text linkable as well.

[dream]

please help.

how do you make the text to link too

[darylmeter]

Originally Posted by dream

please help.

how do you make the text to link too

Make a movie clip to go under your text. in my case i called the instance "textlink"

Then within you code add this under the picturelink code.
textlink.onRelease = function() {
getURL(link[p]);
};

[darylmeter]

Now - I was looking for some help to make the first image RANDOM.
Does anyone have any clues?
Ive tried to chnge this
p = 0;
to this
p = Math.floor(Math.random() * total);

But its not making it random.
Cheers

[darylmeter]

also if there's a way to fade the image out, in the same way it fades in. Any help greatly appreciated.
Cheers

[dream]

thanks darylmeter.

[tamagorci]

hi!
i'm also very interested in fading the images out and
changing the method from alpha to brightness, somehow
i can't get it
thanks!

[darylmeter]

Well I worked it out using some of these other helpful threads.

here is my code:
The important changes are from the function slideshow() down, and including this
this.fadeOutSpeed = 2;
var fadOutInt:Number;

///////////////////////////////////////////////////////////////////////////

delay = 6000;
this.fadeSpeed = 10;
this.fadeOutSpeed = 2;
var fadOutInt:Number;
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];

//
//define link variable
//
link = [];
blank = [];
//
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;

//
//adding links
//
link[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
blank[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;
//

eval(i).onRollOut = function() {
a = 0;
b = 0;
cap._visible = false;
this.onEnterFrame = function() {
this.masked._alpha *= 1.1;
if (this.masked._alpha>=100) {
this.masked._alpha = 100;
a = 1;
}
if (a == 1) {
delete this.onEnterFrame;
}
};
};
}
firstImage();
} else {
content = "file not loaded!";
}
}

xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("image_and_link2.xml?task=refresh");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
//p = 0;
p = Math.floor(Math.random() * 4);
_root.tell == p;
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 += 3;
}
}
picture.onRelease = function() {
getURL(link[p], "_"+blank[p]);
};
picture.onRollOver = function() {

_root.tool_tip.startDrag(true);
_root.tool_tip.title = "click for more from "+ description[p];
//_root.tool_tip.title = blank[p];
_root.tool_tip._visible = true;
};

picture.onRollOut = function() {
stopDrag ();
_root.tool_tip._visible = false;
};


textlink.onRelease = function() {
getURL(link[p]);
textlink._alpha += 5;
};
};

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();
slideshow();
}
}
}

function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
// picture.loadMovie(image[0], 1);
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
fadeOut();
}
}
function fadeOut() {
clearInterval(pauseInterval);
fadeOutInt = setInterval(fadeOutImg, fadeOutSpeed);
}
}


function fadeOutImg(){
if(picture._alpha < fadeOutSpeed){
clearInterval(fadeOutInt);
picture._alpha = 0;
loadNextImg();
}
else{
picture._alpha -= fadeOutSpeed;
updateAfterEvent(); // refresh according to setInt delay, not framerate
}
};
function loadNextImg() {
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
};
///////////////////////////////////////////////////////////////////////////

[kirupa]

Using the [as] tags maybe helpful for displaying a lot of actionscript code

[gheuntak]

Is there any possibility to add Transition effects to these images? If yes how would I add it? Any help will be appreciable.

Thanks

[darylmeter]

I found link link that has examples for xml transitions.
might help
http://blog.reintroducing.com/index.php/27/07/2005/42

ps sorry bout long as code from above

[Abus]

I have read and applied the tutorial named Photo Slideshow Using XML and Flash, but I had needed the slideshow function too. So I started to search topics about this tutorial and I found out this topic. I have downloaded 2 flas. One of them does the next and previous function and other one does the slideshow function. I need those 2 functions together

I have also added a play button and try to achieve what I want with putting the codes together from those 2 fla's. I have just copied these codes from pg_hyperlink's fla into the slideshow_link's fla

PHP Code:

previous_btn.onRelease = function() {
 prevImage();
};
next_btn.onRelease = function() {
 nextImage();
};
play_btn.onRelease = function() {
 slideshow();
}; 


Next Function works and Previous Function works but slideshow function does not works right.It gos crazy showing some images and not showing some of them.

So can u guys help me to achieve this? Also I am posting the fla I have changed.

[liquify]

Hi all,

Im using the kirupa's xml photo gallery.

When i click the photo i get a link, using:

	picture.onRelease = function() {
		getURL(link[p], "_blank");
	};

My question is.. some of my photos dont have a link but the photo remains "clickable" and it opens an error page.

Can i change this?


Thank you so much!