# Loading dynamic thumbs/pics (attn: Scotty)

**URL:** <https://forum.kirupa.com/t/loading-dynamic-thumbs-pics-attn-scotty/57649>\
**Category:** Uncategorized\
**Created:** [July 15, 2004, 1:55am UTC](https://forum.kirupa.com/t/loading-dynamic-thumbs-pics-attn-scotty/57649 "2004-07-15T01:55:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dru\_nasty](https://avatars.discourse-cdn.com/v4/letter/d/90db22/32.png) [@dru\_nasty](https://forum.kirupa.com/u/dru_nasty)\
**Post date:** [July 15, 2004, 1:55am UTC](https://forum.kirupa.com/t/loading-dynamic-thumbs-pics-attn-scotty/57649/1 "2004-07-15T01:55:42Z")

</div>

How would I get the first “pic” to show automatically? Since when the code runs, it only shows the thumbs first, until you click on one and then it loads the corresponding pic.

```auto

/*The below works if the pictures and thumbs are in a folder "pics"
the thumbs are named "thumb1.jpg" etc and the pictures "pic1.jpg" etc
if you use other names, change it in the code as well;-))

scotty(-:
	   
*/
var k = 0;
//nr is amount of thumbs
var nr = 2;
//gap is the gap between the thumbs
var gap = 10;
//c is the amount of columns
var c = 3;
//set the original thumb invisible
thumb._visible = 0;
//function to create the thumbs
function createThumbs() {
	for (var i = 0; i<nr; i++) {
		//duplicate the original thumb
		duplicateMovieClip("thumb", "pic"+i, i);
		//give the copy a (more easy) name
		p = this["pic"+i];
		//give the copy it's own identifier
		p.i = i;
		//set the x position of each thumb
		p._x = 300+((i%c)*(p._width+gap));
		//set the y position of each thumb
		p._y = 350+((Math.floor(i/c))*(p._height+gap));
		//set the actions for the thumb you can add rollover etc
		p.onRelease = function() {
			//load the pic in container , here you need the identifier;-))
			container.loadMovie("pics/pic"+(this.i+1)+".jpg");
		};
	}
	//call the loadthumb function
	loadThumb(0);
}
function loadThumb(k) {
	//give the "container" inside the thumb a name
	mc = this["pic"+k].th_pic;
	//load the thumb
	mc.loadMovie("pics/thumb"+(k+1)+".jpg");
	//set the thumb picture invisible
	mc._visible = 0;
	//create an emptymovieclip
	ab = this.createEmptyMovieClip("temp", 100);
	ab.onEnterFrame = function() {
		//if the thumb picture is fully loaded
		if (mc.getBytesLoaded() == mc.getBytesTotal() && mc.getBytesTotal() != 0) {
			//set the thumb picture visible
			mc._visible = 1;
			delete this.onEnterFrame;
			//if not all thumb pictures are loaded
			if (k<nr) {
				//call the nextthumb function
				//I've used a setinterval here cause the thumbs are very small
				//so the effect of consecutive loading is small as well
				//change the 300 to the value you like (300 is in msecs)
				delay = setInterval(nextThumb, 300);
			}
		}
	};
}
function nextThumb() {
	//increase the value k
	k++;
	//call the function loadthumb
	loadThumb(k);
	//clear the interval
	clearInterval(delay);
}
//call function createthumbs (to start it all;-))
createThumbs();

```

Also, what would I have to change in order to load swf’s as opposed to just the “pics”? I know it would involve changing this line of code…

```auto

container.loadMovie("pics/pic"+(this.i+1)+".jpg");

```

🍺

---

<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 15, 2004, 7:07pm UTC](https://forum.kirupa.com/t/loading-dynamic-thumbs-pics-attn-scotty/57649/2 "2004-07-15T19:07:03Z")

</div>

For the swf’s:

```auto
container.loadMovie("pics/pic"+(this.i+1)+".swf");

```

if they’re in a folder pics;)

For loading the first pic:  
grr can’t copy the part I need, moment: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 15, 2004, 7:12pm UTC](https://forum.kirupa.com/t/loading-dynamic-thumbs-pics-attn-scotty/57649/3 "2004-07-15T19:12:36Z")

</div>

Back again=)  
Look for the if(k\<nr){ part in the code and add the else statement

```auto
	if (k<nr) {
	delay = setInterval(nextThumb, 300);
} else {
	container.loadMovie("pics/pic1.jpg");
}

```

Not tested, but a good chance it’ll work:)

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 15, 2004, 7:26pm UTC](https://forum.kirupa.com/t/loading-dynamic-thumbs-pics-attn-scotty/57649/4 "2004-07-15T19:26:40Z")

</div>

Thanks Scotty, Im gonna try this as soon as I’m done at work.

---

<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 15, 2004, 9:25pm UTC](https://forum.kirupa.com/t/loading-dynamic-thumbs-pics-attn-scotty/57649/5 "2004-07-15T21:25:02Z")

</div>

Brilliant! (as always) 🍺  
thanks again 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 15, 2004, 9:42pm UTC](https://forum.kirupa.com/t/loading-dynamic-thumbs-pics-attn-scotty/57649/6 "2004-07-15T21:42:06Z")

</div>

:lol:welcome:thumb: