# Witdh variable with - XML Photo Gallery Thumbnail Tutorial

**URL:** https://forum.kirupa.com/t/witdh-variable-with-xml-photo-gallery-thumbnail-tutorial/217355
**Category:** Uncategorized
**Created:** [February 26, 2007, 8:29am UTC](https://forum.kirupa.com/t/witdh-variable-with-xml-photo-gallery-thumbnail-tutorial/217355 "2007-02-26T08:29:46Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![supergiovane](https://avatars.discourse-cdn.com/v4/letter/s/a88e57/32.png) [@supergiovane](https://forum.kirupa.com/u/supergiovane)
#### Post date: [February 26, 2007, 8:29am UTC](https://forum.kirupa.com/t/witdh-variable-with-xml-photo-gallery-thumbnail-tutorial/217355/1 "2007-02-26T08:29:46Z")

</div>

hello  
I was working with the XML Photo Gallery Thumbnail Tutorial

my code i a little bit different, modified for easing thumbnails

How do I make this work for thumbs with different width??

thank a lot

matt

code below//////////////////////////////////

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”);  
/////////////////////////////////////  
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 = picture.getBytesTotal();  
loaded = picture.getBytesLoaded();  
preloader.\_visible = true;  
if (loaded != filesize) {  
preloader.preload\_bar.\_xscale = 100\*loaded/filesize;  
} else {  
preloader.\_visible = false;  
if (picture.\_alpha\<100) {  
picture.\_alpha += 10;  
}  
}  
};  
function nextImage() {  
if (p\<(total-1)) {  
p++;  
if (loaded == filesize) {  
picture.\_alpha = 0;  
picture.loadMovie(image[p], 1);  
desc\_txt.text = description[p];  
picture\_num();  
}  
}  
}  
function prevImage() {  
if (p\>0) {  
p–;  
picture.\_alpha = 0;  
picture.loadMovie(image[p], 1);  
desc\_txt.text = description[p];  
picture\_num();  
}  
}  
function firstImage() {  
if (loaded == filesize) {  
picture.\_alpha = 0;  
picture.loadMovie(image[0], 1);  
desc\_txt.text = description[0];  
picture\_num();  
}  
}  
function picture\_num() {  
current\_pos = p+1;  
pos\_txt.text = current\_pos+" / "+total;  
}  
// Thumbnail Scroller actions.  
function thumbNailScroller()  
{  
this.createEmptyMovieClip(“tscroller”, 1000);  
scroll\_speed = 7;  
tscroller.onEnterFrame = function ()  
{  
// define navigation margins  
upper\_margin = thumbnail\_mc.\_y;  
lower\_margin = thumbnail\_mc.\_y + thumbnail\_mc.\_height;  
right\_margin = ((mask\_mc.\_x+mask\_mc.\_width)-thumbnail\_mc[“t”+(total-1)].\_width);  
left\_margin = (mask\_mc.\_x+thumbnail\_mc.t0.\_width);  
if (\_root.\_ymouse \>= upper\_margin && \_root.\_ymouse \<= lower\_margin)  
{  
if (\_root.\_xmouse \>= right\_margin && thumbnail\_mc.hitTest(hit\_right))  
{  
if (thumbnail\_mc[“t”+(total-1)].hitTest(hit\_right)) {  
target = hit\_right.\_x-thumbnail\_mc.\_width-mask\_mc.\_x;  
snap = (target-thumbnail\_mc.\_x)/Math.pow(scroll\_speed, 2);  
thumbnail\_mc.\_x += snap;  
} else {  
thumbnail\_mc.\_x -= scroll\_speed;  
}  
}  
else if (\_root.\_xmouse \<= left\_margin && thumbnail\_mc.hitTest(hit\_left))  
{  
if (thumbnail\_mc.t0.hitTest(hit\_left)) {  
target = 0;  
snap = (target-thumbnail\_mc.\_x)/Math.pow(scroll\_speed, 2);  
thumbnail\_mc.\_x += snap;  
} else {  
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+(target\_mc.\_width+5)\*k;  
target\_mc.pictureValue = k;  
target\_mc.onRelease = function() {  
p = this.pictureValue-1;  
gotoAndStop(15);

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