# Preloader Photo Gallery Question

**URL:** <https://forum.kirupa.com/t/preloader-photo-gallery-question/33709>\
**Category:** flash\
**Created:** [October 22, 2003, 6:25pm UTC](https://forum.kirupa.com/t/preloader-photo-gallery-question/33709 "2003-10-22T18:25:59Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![underspace](https://avatars.discourse-cdn.com/v4/letter/u/ac8455/32.png) [@underspace](https://forum.kirupa.com/u/underspace)\
**Post date:** [October 22, 2003, 6:25pm UTC](https://forum.kirupa.com/t/preloader-photo-gallery-question/33709/1 "2003-10-22T18:25:59Z")

</div>

Hello everyone,  
I’m new to the KirupaForum, but I’ve been checking the posts out for sometime while I’ve been redesigning my website. I’ve found a lot of great info here, so let me say thanks first of all ! 🙂

I’ve built a dynamic photo gallery with a caption for each jpg based off some tutorials and posts I’ve found at kirupa.  
The gallery works fine, but I’d like to add a simple preloader to the photo gallery that says “loading image”. I’ve seen this question asked and I realize it uses the loadMeter function, but I’m not really sure how to implement this. At the risk of being repetitive could someone point me in the right direction?

Many thanks,  
underspace

Here’s my code:

this.pathToPics = \_root.path;  
// fill this array with your pics  
\_root.pArray = new Array();  
for (i=0; i\<\_root.maxPics; i++) {  
\_root.pArray\* = \_root[“image”+i];  
}  
// \_root.pArray = [“image0.jpg”, “image1.jpg”, “image2.jpg”, “image3.jpg”, “image4.jpg”,“image5.jpg”];  
this.fadeSpeed = 20;  
this.pIndex = 0;  
\_root.selectedPost = \_root.post0;  
\_root.pIndex2 = this.pIndex+1;  
\_root.selectedEntry = \_root.entry0;  
// MovieClip methods ----------------------------------  
// d=direction; should 1 or -1 but can be any number  
// loads an image automatically when you run animation  
loadMovie(this.pathToPics+\_root.pArray[0], this.photo);  
MovieClip.prototype.changePhoto = function(d) {  
// make sure pIndex falls within pArray.length  
this.pIndex = (this.pIndex+d)%\_root.pArray.length;  
if (this.pIndex\<0) {  
this.pIndex += \_root.pArray.length;  
}  
\_root.pIndex2 = this.pIndex+1;  
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  
// ------------------------------------------  
\_root.photo.\_alpha = 0;  
this.photo.loadMovie(this.pathToPics+\_root.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);  
stop();