# Kirupa'a Adding Thumbnails

**URL:** https://forum.kirupa.com/t/kirupaa-adding-thumbnails/265237
**Category:** Uncategorized
**Created:** [July 6, 2008, 7:47pm UTC](https://forum.kirupa.com/t/kirupaa-adding-thumbnails/265237 "2008-07-06T19:47:08Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![ruffneck\_chiken](https://avatars.discourse-cdn.com/v4/letter/r/bc79bd/32.png) [@ruffneck\_chiken](https://forum.kirupa.com/u/ruffneck_chiken)
#### Post date: [July 6, 2008, 7:47pm UTC](https://forum.kirupa.com/t/kirupaa-adding-thumbnails/265237/1 "2008-07-06T19:47:08Z")

</div>

hi i have been able to customize this tutorial for my needs but i am still having one problem with the thumbnails. Unlike in the tutorial i have thumbnail that are two different sizes. most of them are 100 pixals wide but some are 75 and when they are different sizes like that it screws it up…they overlap or leave big gaps between thumbs.

below you can find the code i am using. the line of code that places the thumbs in there position is

target\_mc.\_x = hit\_left.\_x+(target\_mc.\_width+5)\*k;

i was able to stop the thumbs from over laping by replacing target\_mc.\_width with 100 but that doesnt fix the big gaps between the images that are 75 wide.

can anyone help me fix this? Thanks

function loadXML(loaded) {  
if (loaded) {  
xmlNode = this.firstChild;  
image = [];  
description = [];  
thumbnails = [];  
total = xmlNode.childNodes.length;  
for (i=0; i\<total; i++) {  
image\* = xmlNode.childNodes\*.childNodes[0].firstChild.nodeValue;  
description\* = xmlNode.childNodes\*.childNodes[1].firstChild.nodeValue;  
thumbnails\* = xmlNode.childNodes\*.childNodes[2].firstChild.nodeValue;  
thumbnails\_fn(i);  
}  
firstImage();  
} else {  
content = “file not loaded!”;  
}  
}  
xmlData = new XML();  
xmlData.ignoreWhite = true;  
xmlData.onLoad = loadXML;  
xmlData.load(“images.xml”);  
/////////////////////////////////////  
this.createEmptyMovieClip(“container”, “100”);  
my\_mc = new MovieClipLoader();  
preload = new Object();  
/////////////////////////////////////  
listen = new Object();  
listen.onKeyDown = function() {  
if (Key.getCode() == Key.LEFT) {  
prevImage();  
} else if (Key.getCode() == Key.RIGHT) {  
nextImage();  
}  
};  
Key.addListener(listen);  
previous\_btn.onRelease = function() {  
prevImage();  
};  
next\_btn.onRelease = function() {  
nextImage();  
};  
/////////////////////////////////////  
p = 0;  
this.onEnterFrame = function() {  
filesize = container.getBytesTotal();  
loaded = container.getBytesLoaded();  
preloader.\_visible = true;  
if (loaded != filesize) {  
preloader.preload\_bar.\_xscale = 100\*loaded/filesize;  
} else {  
preloader.\_visible = false;  
if (container.\_width== 640) {  
container.\_x = 90;  
container.\_y = 100;  
pic\_bg.\_x = 80;  
pic\_bg.\_y = 90;  
pic\_bg.\_width = 660;  
pic\_bg.\_height = 500;  
} else {  
container.\_x = 170;  
container.\_y = 20;  
pic\_bg.\_x = 160;  
pic\_bg.\_y = 10;  
pic\_bg.\_width = 500;  
pic\_bg.\_height = 660;  
}  
if (container.\_alpha\<100) {  
container.\_alpha += 10;  
pic\_bg.\_alpha += 10;  
}  
}  
};  
function nextImage() {  
if (p\<(total-1)) {  
p++;  
if (loaded == filesize) {  
container.\_alpha = 0;  
pic\_bg.\_alpha = 0;  
my\_mc.loadClip(image[p], “container”);  
desc\_txt.text = description[p];  
picture\_num();  
}  
}  
}  
function prevImage() {  
if (p\>0) {  
p–;  
container.\_alpha = 0;  
pic\_bg.\_alpha = 0;  
my\_mc.loadClip(image[p], “container”);  
if (container.\_width== 640) {  
container.\_x = 90;  
container.\_y = 100;  
} else {  
container.\_x = 170;  
container.\_y = 20;  
}  
desc\_txt.text = description[p];  
picture\_num();  
}  
}  
function firstImage() {  
if (loaded == filesize) {  
container.\_alpha = 0;  
pic\_bg.\_alpha = 0;  
my\_mc.loadClip(image[p], “container”);  
if (container.\_width == 640) {  
container.\_x = 90;  
container.\_y = 100;  
} else {  
container.\_x = 170;  
container.\_y = 20;  
}  
desc\_txt.text = description[p];  
picture\_num();  
}  
}  
function picture\_num() {  
current\_pos = p+1;  
pos\_txt.text = current\_pos+" / "+total;  
}  
function thumbNailScroller() {  
// thumbnail code!  
this.createEmptyMovieClip(“tscroller”, 1000);  
scroll\_speed = 10;  
tscroller.onEnterFrame = function() {  
if ((\_root.\_ymouse\>=thumbnail\_mc.\_y) && (\_root.\_ymouse\<=thumbnail\_mc.\_y+thumbnail\_mc.\_height)) {  
if ((\_root.\_xmouse\>=(hit\_right.\_x-200)) && (thumbnail\_mc.hitTest(hit\_right))) {  
thumbnail\_mc.\_x -= scroll\_speed;  
} else if ((\_root.\_xmouse\<=(hit\_left.\_x+200)) && (thumbnail\_mc.hitTest(hit\_left))) {  
thumbnail\_mc.\_x += scroll\_speed;  
}  
} else {  
delete tscroller.onEnterFrame;  
}  
};  
}  
function thumbnails\_fn(k) {  
thumbnail\_mc.createEmptyMovieClip(“t”+k, thumbnail\_mc.getNextHighestDepth());  
tlistener = new Object();  
tlistener.onLoadInit = function(target\_mc) {

target\_mc.\_x = hit\_left.\_x+(100+5)\*k;

target\_mc.pictureValue = k;  
target\_mc.onRelease = function() {  
p = this.pictureValue-1;  
nextImage();  
};  
target\_mc.onRollOver = function() {  
this.\_alpha = 50;  
thumbNailScroller();  
};  
target\_mc.onRollOut = function() {  
this.\_alpha = 100;  
};  
};  
image\_mcl = new MovieClipLoader();  
image\_mcl.addListener(tlistener);  
image\_mcl.loadClip(thumbnails[k], “thumbnail\_mc.t”+k);  
}

---

<div class="post-metadata">

### Author: ![stringy](https://avatars.discourse-cdn.com/v4/letter/s/919ad9/32.png) [@stringy](https://forum.kirupa.com/u/stringy)
#### Post date: [July 6, 2008, 8:45pm UTC](https://forum.kirupa.com/t/kirupaa-adding-thumbnails/265237/2 "2008-07-06T20:45:08Z")

</div>

Try this

```auto
var w = 0;
function thumbnails_fn(k) {
	thumbnail_mc.createEmptyMovieClip("t"+k,thumbnail_mc.getNextHighestDepth());
	tlistener = new Object();
	tlistener.onLoadInit = function(target_mc) {

		target_mc._x = hit_left._x+w+5;
		w += target_mc._width+5;
		target_mc.pictureValue = k;
		target_mc.onRelease = function() {
			p = this.pictureValue-1;
			nextImage();
		};
		target_mc.onRollOver = function() {
			this._alpha = 50;
			thumbNailScroller();
		};
		target_mc.onRollOut = function() {
			this._alpha = 100;
		};
	};
	image_mcl = new MovieClipLoader();
	image_mcl.addListener(tlistener);
	image_mcl.loadClip(thumbnails[k],"thumbnail_mc.t"+k);
}

```

---

<div class="post-metadata">

### Author: ![ruffneck\_chiken](https://avatars.discourse-cdn.com/v4/letter/r/bc79bd/32.png) [@ruffneck\_chiken](https://forum.kirupa.com/u/ruffneck_chiken)
#### Post date: [July 6, 2008, 9:17pm UTC](https://forum.kirupa.com/t/kirupaa-adding-thumbnails/265237/3 "2008-07-06T21:17:11Z")

</div>

that did thanks so much i have been trying to fix that for a min…thanks so much!!!

---

<div class="post-metadata">

### Author: ![stringy](https://avatars.discourse-cdn.com/v4/letter/s/919ad9/32.png) [@stringy](https://forum.kirupa.com/u/stringy)
#### Post date: [July 6, 2008, 9:24pm UTC](https://forum.kirupa.com/t/kirupaa-adding-thumbnails/265237/4 "2008-07-06T21:24:14Z")

</div>

[QUOTE=ruffneck\_chiken;2354332]that did thanks so much i have been trying to fix that for a min…thanks so much!!![/QUOTE]  
no problem 🙂

---

<div class="post-metadata">

### Author: ![ruffneck\_chiken](https://avatars.discourse-cdn.com/v4/letter/r/bc79bd/32.png) [@ruffneck\_chiken](https://forum.kirupa.com/u/ruffneck_chiken)
#### Post date: [July 7, 2008, 1:25pm UTC](https://forum.kirupa.com/t/kirupaa-adding-thumbnails/265237/5 "2008-07-07T13:25:52Z")

</div>

HI again. i implimented the code that Stringy suggested and it fixed the problem i had but now the thumbnails are loading in the reverse order that they are listed in the XML file. Is there a way to fix this beside changing the XML file? thanks in advance for your help.