# Photo Gallery with external files

**URL:** <https://forum.kirupa.com/t/photo-gallery-with-external-files/58078>\
**Category:** flash\
**Created:** [July 19, 2004, 4:50pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078 "2004-07-19T16:50:48Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cliff](https://avatars.discourse-cdn.com/v4/letter/c/b38774/32.png) [@Cliff](https://forum.kirupa.com/u/Cliff)\
**Post date:** [July 19, 2004, 4:50pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/1 "2004-07-19T16:50:48Z")

</div>

I’m trying to make the Photo Gallery tutorial ([http://www.kirupa.com/developer/mx/photogallery.htm](http://www.kirupa.com/developer/mx/photogallery.htm)) work using an imported .txt file to create my list of images. I can import the .txt file (myImages= “image0.jpg”, “image1.jpg”, “image2.jpg”) but I can’t figure out how to make Flash see it as an array rather than just a string of text.

My aim is to create a slideshow in which the image .jpgs and their names are both in easily updated in external files so I can add to the presentation without modifying the .swf file.

Any suggestions will be much appreciated.

Cheers,

Cliff

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 19, 2004, 5:06pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/2 "2004-07-19T17:06:42Z")

</div>

You can get the external jpg thumbnail loader like at [www.janiceglew.com](http://www.janiceglew.com)

in the collections

if so i`ll tell you where to get it - it uses xml and is easy to use

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 19, 2004, 5:25pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/3 "2004-07-19T17:25:11Z")

</div>

Thanks. That’s a great looking site. I’d be interested in knowing how it was done.

Cliff

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 19, 2004, 7:58pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/4 "2004-07-19T19:58:57Z")

</div>

```auto
pArray = new Array();
loadArray = new LoadVars();
loadArray.load("yourtextfile.txt");
loadArray.onLoad = function(success) {
	if (success) {
		pArray = this.myImages.split(",");
	}
};

```

?

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 19, 2004, 8:49pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/5 "2004-07-19T20:49:54Z")

</div>

Hi Scotty:

This looks very promising (and simple). I’ll try it out. Thanks very much for your help

Cheers,

Cliff

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 19, 2004, 10:03pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/6 "2004-07-19T22:03:39Z")

</div>

no problem:thumb:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 19, 2004, 11:24pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/7 "2004-07-19T23:24:11Z")

</div>

> [@scotty](#):
>
> no problem:thumb:

Hi Scotty:

The script solves my original problem of making the imported text file into an array (just as you said it would) but I can’t get that array to replace the array in the original slide gallery turtorial. I get an error opening the URL to the files (even though I haven’t moved them).

Below is the code as it stands. The first part is your code. The second is from the slide gallery tutorial. The only part of the slide gallery code I modified was to comment out (//) the line that originally listed the image names [//this.pArray](https://this.pArray) = [“image0.jpg”, “image1.jpg”, “image2.jpg”, “image3.jpg”, “image4.jpg”, “image5.jpg”, “image6.jpg”, “image7.jpg”, “image8.jpg”, “image9.jpg”];  
If you see an obvious error here without spending too much of your valuable time I’d appreciate it.

Thanks again, Cliff

Array = new Array();  
loadArray = new LoadVars();  
loadArray.load(“imageList.txt”);  
loadArray.onLoad = function(success) {  
if (success) {  
pArray = this.myImages.split(“,”);  
trace(pArray)  
}  
};

// variables ------------------------------------------  
// put the path to your pics here, include the slashes (ie. “pics/”)  
// leave it blank if they’re in the same directory  
this.pathToPics = “animation/”;  
// fill this array with your pics  
[//this.pArray](https://this.pArray) = [“image0.jpg”, “image1.jpg”, “image2.jpg”, “image3.jpg”, “image4.jpg”, “image5.jpg”, “image6.jpg”, “image7.jpg”, “image8.jpg”, “image9.jpg”];  
this.fadeSpeed = 20;  
this.pIndex = 0;  
// MovieClip methods ----------------------------------  
// d=direction; should 1 or -1 but can be any number  
//loads an image automatically when you run animation  
loadMovie(this.pathToPics+this.pArray[0], \_root.photo);  
MovieClip.prototype.changePhoto = function(d) {  
// make sure pIndex falls within pArray.length  
this.pIndex = (this.pIndex+d)%this.pArray.length;  
if (this.pIndex\<0) {  
this.pIndex += this.pArray.length;  
}  
this.onEnterFrame = fadeOut;  
};  
MovieClip.prototype.fadeOut = function() {  
if (this.photo.\_alpha\>this.fadeSpeed) {  
this.photo.\_alpha -= this.fadeSpeed;  
} else {  
this.loadPhoto();  
}  
};  
MovieClip.prototype.loadPhoto = function() {  
// specify the movieclip to load images into  
var p = \_root.photo;  
//------------------------------------------  
p.\_alpha = 0;  
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);  
this.onEnterFrame = loadMeter;  
};  
MovieClip.prototype.loadMeter = function() {  
var i, l, t;  
l = this.photo.getBytesLoaded();  
t = this.photo.getBytesTotal();  
if (t\>0 && t == l) {  
this.onEnterFrame = fadeIn;  
} else {  
trace(l/t);  
}  
};  
MovieClip.prototype.fadeIn = function() {  
if (this.photo.\_alpha\<100-this.fadeSpeed) {  
this.photo.\_alpha += this.fadeSpeed;  
} else {  
this.photo.\_alpha = 100;  
this.onEnterFrame = null;  
}  
};  
// Actions -----------------------------------------  
// these aren’t necessary, just an example implementation  
this.onKeyDown = function() {  
if (Key.getCode() == Key.LEFT) {  
this.changePhoto(-1);  
} else if (Key.getCode() == Key.RIGHT) {  
this.changePhoto(1);  
}  
};  
Key.addListener(this);  
[COLOR=Magenta][COLOR=Indigo][/COLOR][COLOR=Red][//this.pArray](https://this.pArray) = [“image0.jpg”, “image1.jpg”, “image2.jpg”, “image3.jpg”, “image4.jpg”, “image5.jpg”, “image6.jpg”, “image7.jpg”, “image8.jpg”, “image9.jpg”];  
[/COLOR]

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 20, 2004, 7:25am UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/8 "2004-07-20T07:25:36Z")

</div>

What exactly does the error says?

I tried it here and it’s working apart from 1 line:

```auto
loadMovie(this.pathToPics+this.pArray[0], _root.photo);

```

doesn’t work, cause at the moment it calls pArray, it doesn’t exists. Skip that line. If you want a picture at start, change the load text code like this:

```auto
pArray = new Array();
loadArray = new LoadVars();
loadArray.load("imageList.txt");
loadArray.onLoad = function(success) {
	if (success) {
		pArray = this.myImages.split(",");
		changePhoto(0);//added this one
	}
};

```

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 20, 2004, 8:06pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/9 "2004-07-20T20:06:30Z")

</div>

Hi Scotty:

I found the problem. It was my mistake in the .txt file. My original .txt file was as follows: myImages=“image0.jpg”,“image1.jpg”,“image2.jpg”,“image3.jpg”,“image4.jpg”,“image5.jpg”,“image6.jpg”,“image7.jpg”,“image8.jpg”,“image9.jpg” When I got rid of the quotation marks it worked just as you said it would.

Thanks so much for your help on this. I appreciate it very much.

best regards,

Cliff

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 20, 2004, 8:30pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/10 "2004-07-20T20:30:02Z")

</div>

no problem:)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 21, 2004, 1:19am UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/11 "2004-07-21T01:19:38Z")

</div>

Hello Scotty,

Thanks again for wrapping up this thread with Cliff. It helped…stupid quotation marks…lol. Not sure if you can shed any light on this but…taking this a few steps further, if you wanted to load the array from an XML file could you write a node in the xml file like LIST="image0.jpg,image1.jpg,image2.jpg,image3.jpg,image4.jpg,image5.jpg,image6.jpg,image7.jpg,image8.jpg,image9.jpg,image10.jpg"  
and in the example :

this.pathToPics = “animation/”;  
// fill this array with your pics  
Array = new Array();  
loadArray = new LoadVars();  
loadArray.load(“imageList.txt”);  
loadArray.onLoad = function(success) {  
if (success) {  
pArray = this.myImages.split(",");  
trace(pArray)  
}  
};

after loading the xml file in flash replace “imageList.txt” with ummmmm well, I guess that’s my question… I am not sure just how to load that particular node into flash and use it. I can load txt into txt boxes and load single images into MC’s but my skills stop there as it were. I can elaborate on the project i’d like to finish if it helps.

Thanks Scotty.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 21, 2004, 8:10pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/12 "2004-07-21T20:10:31Z")

</div>

If you want to use XML, you can use this code

```auto
var gallery_xml = new XML();
gallery_xml.ignoreWhite = true;
gallery_xml.onLoad = function(success) {
	if (success) {
		var gallery = this.firstChild;
		pArray = new Array();
		for (var i = 0; i<gallery.childNodes.length; i++) {
			pArray.push(gallery.childNodes*.attributes.source);
		}
	} else {
		title_txt.text = "XML Load Error";
	}
};
gallery_xml.load("gallery.xml");

```

And use the attached xml-file, change it to your needs:)

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 21, 2004, 8:29pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/13 "2004-07-21T20:29:33Z")

</div>

Hi Scotty:

Thanks for the new code and different approach. I will give it a try. Is there an advantage to this way of doing it over the other way?

Cliff

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 21, 2004, 9:40pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/14 "2004-07-21T21:40:12Z")

</div>

Scotty, you are truly the bomb! i have read hundreds of posts here in the past few days, and you rule. You’re always there with the answers. You’re like “Web-Gandhi”! Thanks, thanks thanks!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 22, 2004, 2:49am UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/15 "2004-07-22T02:49:07Z")

</div>

Ok, I know I am in trouble of becoming a pest but if I wanted to show the “title” in a textbox for each image, how would you do that. I have a hunch it’s quite simple and I have tried to make it work, but i think i have missed the boat on that. i tried doing this, thinking i was all smart now, but was quickly put in my proper place

this.pathToPics = “animation/”;  
// fill this array with your pics  
var gallery\_xml = new XML();  
timeline = this;  
gallery\_xml.ignoreWhite = true;  
gallery\_xml.onLoad = function(success) {  
if (success) {  
var gallery = this.firstChild;  
pArray = new Array();  
nodes = gallery.childNodes  
for (var i = 0; i\<gallery.childNodes.length; i++) {  
pArray.push(gallery.childNodes\*.attributes.source);  
this.timeline[“title\_txt”+i].text = nodes\*.attributes.title  
changePhoto(0);  
}  
} else {  
title\_txt.text = “XML Load Error”;  
}

};

Can ya help me or tell me to “forget about it kid, you’ll never make it” ?

Thanks

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 22, 2004, 6:41am UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/16 "2004-07-22T06:41:36Z")

</div>

LOL, you’re gonna make it:thumb:

```auto
var pathToPics = new String();
var pArray = new Array();
var tArray = new Array();
var fadeSpeed = 20;
var pIndex = 0;
MovieClip.prototype.changePhoto = function(d) {
	this.pIndex = (this.pIndex+d)%this.pArray.length;
	if (this.pIndex<0) {
		this.pIndex += this.pArray.length;
	}
	this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
	if (this.photo._alpha>this.fadeSpeed) {
		this.photo._alpha -= this.fadeSpeed;
	} else {
		this.loadPhoto();
	}
};
MovieClip.prototype.loadPhoto = function() {
	var p = this.photo;
	p._alpha = 0;
	p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
	this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
	var i, l, t;
	l = this.photo.getBytesLoaded();
	t = this.photo.getBytesTotal();
	if (t>0 && t == l) {
		this.onEnterFrame = fadeIn;
		this.title_txt.text = this.tArray[this.pIndex];
	}
};
MovieClip.prototype.fadeIn = function() {
	if (this.photo._alpha<100-this.fadeSpeed) {
		this.photo._alpha += this.fadeSpeed;
	} else {
		this.photo._alpha = 100;
		this.onEnterFrame = null;
	}
};
var gallery_xml = new XML();
gallery_xml.ignoreWhite = true;
gallery_xml.onLoad = function(success) {
	if (success) {
		var gallery = this.firstChild;
		pathToPics = gallery.attributes.path;
		for (var i = 0; i<gallery.childNodes.length; i++) {
			tArray.push(gallery.childNodes*.attributes.title);
			pArray.push(gallery.childNodes*.attributes.source);
		}
		loadPhoto();
	} else {
		title_txt.text = "Error!";
	}
};
gallery_xml.load("gallery.xml");

```

Works with the xml.zip above;)

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 22, 2004, 2:52pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/17 "2004-07-22T14:52:08Z")

</div>

\<spam\> very helpful thread!🍺 \</spam\>

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 22, 2004, 4:18pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/18 "2004-07-22T16:18:22Z")

</div>

> [@dru\_nasty](#):
>
> \<spam\> very helpful thread!🍺 \</spam\>

Shoot, my spamfilter stopped working:lol:

scotty(-:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 22, 2004, 4:18pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/19 "2004-07-22T16:18:37Z")

</div>

just amke an extra array and ad an attribute called textinfo or whatever

```auto
var gallery_xml = new XML();
gallery_xml.ignoreWhite = true;
gallery_xml.onLoad = function(success) {
        if (success) {
                var gallery = this.firstChild;
                pArray = new Array();
                tArray = new Array();
                for (var i = 0; i<gallery.childNodes.length; i++) {
                        pArray.push(gallery.childNodes*.attributes.source);
                        tArray.push(gallery.childNodes*.attributes.title);
                }
        } else {
                title_txt.text = "XML Load Error";
        }
};
gallery_xml.load("gallery.xml");

```

then add a new attribute after your source attribute in your xml.

call it title=“whatever text”

cheers

d

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [July 22, 2004, 11:35pm UTC](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078/20 "2004-07-22T23:35:13Z")

</div>

Wow, “It’s in the computer?..it’s so simple” Thanks loads peeps! Gonna try some crazy stuff now…so block me from your emails…there’s bound to be questions…LOL

Thanks very much everyone!

[Next page](https://forum.kirupa.com/t/photo-gallery-with-external-files/58078.md?page=2)