Expanding sbeener's gallery code

1

I’ve been attempting (unsucessfully) to expand on sbeeners code for the photo gallery (on this site).

sbeener sets up an array with the photos in it and uses functions to load one photo from the array’s position.

I’m trying to add some AS in there that sets up an additional array (of text strings/captions) and then sets the index of that additional array to match the array of photos and loads the value from that array into a dynamic text box.

So far I’m a little stumped on how to execute this.

I’ll attach the code (sbeeners w/my alterations). Any help would be awesome! I’ve seen lots of people posting about this in forums and not getting any response.

Maybe if we get it working we can update the tute on kirupa!

//Code written by sbeener (suprabeener)
/*
   i wrote this code, but you can use and abuse it however you like.
   the methods are defined in the order which they occur to make it
   easier to understand.
*/
// 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 = "iraqpics/";
// fill this array with your pics
this.pArray = ["iraq1.jpg", "iraq2.jpg", "iraq3.jpg", "iraq4.jpg", "iraq5.jpg", "iraq6.jpg", "iraq7.jpg", "iraq8.jpg"];
this.cArray = ["caption1", "caption2", "caption3", "caption4", "caption5", "caption6", "caption7", "caption8"];
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;
};
this.cindex = this.pindex;
caption.text = this.cindex;
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);
2

why add a new array?
fix the array you originally have (one with the photo)
basically, reformat the array to use objects, not just string values in the array. normally, i set up objects and push to my array, not just declare a new array() with values - this way i can change the core object model and not have to try to redo the array constructor (i.e. new array([objectprop1,objectprop2],etc…) however, wrapping array values with a “[]” on ‘new’ will create objects also-
///////fix the existing array and make an object based model
for(i=0;i<this.pArray.length;i++){
newPhoto = new Object()
newPhoto.photo = this.pArray*
newPhoto.caption = "this is a test of photo " + i
this.pArray* = newPhoto
}

//fix the load OR anywhere else…but ill fix the load here
MovieClip.prototype.loadPhoto = function() {
// specify the movieclip to load images into
var p = _root.photo;
//------------------------------------------
p._alpha = 0;
//replaced p.loadMovie(this.pathToPics+this.pArray[this.pIndex]) with the below
p.loadMovie(this.pathToPics+this.pArray[this.pIndex].photo);
//show your caption-
trace(this.pArray[this.pIndex].caption)
this.onEnterFrame = loadMeter;
};

we turned the phot name into a property called .photo on each object in the array. in turn, we added the property .caption to each object in the array to store a caption in each slot of the array. simply add props to the ‘newPhoto’ object to use them/ store add’tl info.

good luck.