Kirupa'a Adding Thumbnails

1

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);
}

2

Try this

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);
}
3

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

4

[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 :slight_smile:

5

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.