Hallo there,
I am having troubles with the thumbnails on my page… theyre loading weird. there are double thumbnails, odd spaces, overlapping thumbs ect. Ive double checked my xml and code but can`t find why this happens.
You can see what I mean with ‘odd’ –here– by clicking the portfolio link…
Can someone help me out why this is happening? I have used the luvley tutorials [image gallery and the xtra thumnails tut] to make this 
Here is the code I use:
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
thumbnails = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
thumbnails* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
thumbnails_fn(i);
periode* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
titel* = xmlNode.childNodes*.childNodes[3].firstChild.nodeValue;
techniek* = xmlNode.childNodes*.childNodes[4].firstChild.nodeValue;
afmeting* = xmlNode.childNodes*.childNodes[5].firstChild.nodeValue;
tekst* = xmlNode.childNodes*.childNodes[6].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
trace("file not loaded");
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
//////////////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
prev_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
btn_0010.onRelease = function() {
btn0010();
};
btn_9000.onRelease = function() {
btn9000();
};
btn_8090.onRelease = function() {
btn8090();
};
btn_7080.onRelease = function() {
btn7080();
};
////////////////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
// 75, 80 : Left top corner
// 356 : Possible max width
// 252 : Possible max height
picture._x = 73+Math.floor((356-picture._width)/2);
picture._y = 80+Math.floor((252-picture._height)/2);
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
///////////////////////////////////////////////////
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(("images/")+image[p], 1);
titel.text = titel[p];
fotoTitel.text = titel[p];
techniek.text = techniek[p];
periode.text = periode[p];
afmeting.text = afmeting[p];
tekst.text = tekst[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(("images/")+image[p], 1);
titel.text = titel[p];
fotoTitel.text = titel[p];
techniek.text = techniek[p];
periode.text = periode[p];
afmeting.text = afmeting[p];
tekst.text = tekst[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(("images/")+image[0], 1);
titel.text = titel[0];
fotoTitel.text = titel[p];
techniek.text = techniek[p];
periode.text = periode[p];
afmeting.text = afmeting[p];
tekst.text = tekst[p];
picture_num();
}
}
function btn0010() {
p = 18;
picture._alpha = 0;
picture.loadMovie(("images/")+image[18], 1);
titel.text = titel[18];
fotoTitel.text = titel[18];
techniek.text = techniek[18];
periode.text = periode[18];
afmeting.text = afmeting[18];
tekst.text = tekst[18];
picture_num();
}
function btn9000() {
p = 12;
picture._alpha = 0;
picture.loadMovie(("images/")+image[12], 1);
titel.text = titel[12];
fotoTitel.text = titel[12];
techniek.text = techniek[12];
periode.text = periode[12];
afmeting.text = afmeting[12];
tekst.text = tekst[12];
picture_num();
}
function btn8090() {
p = 6;
picture._alpha = 0;
picture.loadMovie(("images/")+image[6], 1);
titel.text = titel[6];
fotoTitel.text = titel[6];
techniek.text = techniek[6];
periode.text = periode[6];
afmeting.text = afmeting[6];
tekst.text = tekst[6];
picture_num();
}
function btn7080() {
p = 0;
picture._alpha = 0;
picture.loadMovie(("images/")+image[0], 1);
titel.text = titel[0];
fotoTitel.text = titel[0];
techniek.text = techniek[0];
periode.text = periode[0];
afmeting.text = afmeting[0];
tekst.text = tekst[0];
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._xmouse>=thumbnail_mc._x) && (_root._xmouse<=thumbnail_mc._x+thumbnail_mc._height)) {
if ((_root._ymouse>=(hit_bottom._y-40)) && (thumbnail_mc.hitTest(hit_bottom))) {
thumbnail_mc._y -= scroll_speed;
} else if ((_root._ymouse<=40) && (thumbnail_mc.hitTest(hit_top))) {
thumbnail_mc._y += 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._y = hit_top._y+(target_mc._height+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(("thumbs/")+thumbnails[k], "thumbnail_mc.t"+k);
}
here is a part of the xml I use:
<root>
<image>
<pad>1_7080.jpg
<thumbnail>t1_7080.jpg
<periode>1970 - 1980
<titel>zonder titel
<techniek>ets
<afmeting>22x34
<tekst>Ut nunc turpis, bibendum.....</tekst>
</image>
....
</root>
The thumbnails have a max of 73 px height or width [portait, landscape or square]
Can someone help me why the thumbs are loading this way?
Many thanks in advance ! :beam:
-xoa-
