# Image gallery

**URL:** <https://forum.kirupa.com/t/image-gallery/64390>\
**Category:** Uncategorized\
**Created:** [September 15, 2004, 7:10pm UTC](https://forum.kirupa.com/t/image-gallery/64390 "2004-09-15T19:10:24Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![fumeng](https://avatars.discourse-cdn.com/v4/letter/f/a9adbd/32.png) [@fumeng](https://forum.kirupa.com/u/fumeng)\
**Post date:** [September 15, 2004, 7:10pm UTC](https://forum.kirupa.com/t/image-gallery/64390/1 "2004-09-15T19:10:24Z")

</div>

hi –

i’ve got 5 images. i want the following things to happen:

1. the placeholder movie clip automatically tweens to adjust to the image’s dimensions.

2. the transition between each image is a la: [www.barbariangroup.com](http://www.barbariangroup.com) – front page when you enter

3. the images stay on the screen for approx. 5 seconds each.

any ideas on the best way to put this together?

thanks. fumeng.

---

<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:** [September 15, 2004, 7:32pm UTC](https://forum.kirupa.com/t/image-gallery/64390/2 "2004-09-15T19:32:44Z")

</div>

this should take care of point one:

```auto
 pictures = new Array("billed1.jpg","billed2.jpg","billed3.jpg"); // pics to load
initLoadPicture = function(){
imgPath = "pictures/"; // subdir for picture
bg = viewer.bg; // backgorund mc (that tweens width the picture
picture = viewer.picture; // mc to hold the picture
friction = 2; // fric value used in the backgroundtween
border = 35; // size of border
};
loadPicture = function(picToLoad) {
picture._x = 0;
picture._y = 0;
picture.loadMovie(imgPath+picToLoad);
createEmptyMovieClip("tmp_mc", 0);
tmp_mc.onEnterFrame = function() {
this.procent = Math.floor((picture.getBytesLoaded()/picture.getBytesTotal())*100);
if (this.procent == 100 && picture.getBytesTotal()>50 && picture._width >20) {
picture._alpha = 0;
picture._x -= (picture._width/2);
picture._y -= (picture._height/2);
tmp_mc.removeMovieClip();
bg.onEnterFrame = function(){
	if(picture._width>0){
	 bg._width += Math.floor((picture._width-bg._width+border)/friction);
	 bg._height += Math.floor((picture._height-bg._height+border)/friction);
	}
	if(Math.floor((picture._width-bg._width+border)/friction)==0){
	 picture._alpha = 100;
	 delete bg.onEnterFrame;
	}
}
}
 
};
}; 

```