# Gallery thumbs in a grid… yes, once again!

**URL:** <https://forum.kirupa.com/t/gallery-thumbs-in-a-grid-yes-once-again/183254>\
**Category:** Uncategorized\
**Created:** [March 25, 2006, 2:08am UTC](https://forum.kirupa.com/t/gallery-thumbs-in-a-grid-yes-once-again/183254 "2006-03-25T02:08:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![dec27](https://avatars.discourse-cdn.com/v4/letter/d/2bfe46/32.png) [@dec27](https://forum.kirupa.com/u/dec27)\
**Post date:** [March 25, 2006, 2:08am UTC](https://forum.kirupa.com/t/gallery-thumbs-in-a-grid-yes-once-again/183254/1 "2006-03-25T02:08:56Z")

</div>

Hi everybody!

I’ve been reading through the many tutorials and posts to create my own gallery based on an xml file.

Believe me I’ve learnt a lot, I didn’t know anything, now I can call images. at least!

I just want thumbs to be arranged in a grid, it must be a silly thing, but I’m done!

Could anybody take a look, I 'll appreciate very much your help.

my\_xml = new XML();  
my\_xml.ignoreWhite = true;  
my\_xml.onLoad = function(ok) {  
if (ok) {  
loop(my\_xml);  
} else {  
trace(“error loading xml file”);  
}  
};  
my\_xml.load(“pictures.xml”);  
function loop(my\_xml) {  
var portfolioPictures = my\_xml.firstChild.childNodes;  
nuclips = portfolioPictures.length;  
for (var i = 0; i\<nuclips; i++) {  
var currentPicture = portfolioPictures\*;  
var holder = \_root.createEmptyMovieClip(“holding”+i, i);  
col = 10;  
row = 8;  
space = 3;  
cuenta = 0;  
for (k=0; k\<col; k++) {  
for (j=0; j\<row; j++) {  
holder.\_x = (i+space)\*j;  
holder.\_y = (i+space)\*k;  
cuenta++;  
}  
}  
inner = holder.createEmptyMovieClip(“thumbnail\_image”, 0);  
inner.loadMovie(currentPicture.attributes.thumb);  
holder.title = currentPicture.attributes.title;  
holder.image = currentPicture.attributes.image;  
holder.onRollOver = function() {  
\_root.texto.text = this.title;  
};  
holder.onRelease = function() {  
pictureit.loadMovie(this.image);  
};  
}  
}

Thanks in advanced. :\*(  
dec27

---

<div class="post-metadata">

**Author:** ![scotty](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scotty](https://forum.kirupa.com/u/scotty)\
**Post date:** [March 25, 2006, 9:32am UTC](https://forum.kirupa.com/t/gallery-thumbs-in-a-grid-yes-once-again/183254/2 "2006-03-25T09:32:12Z")

</div>

Something like

```auto
var col = 10;
var row = 8;
//wi is the thumbnail width + the space you want
var wi = 75;
//hi is the thumbnail height + the space you want
var hi = 75;
for (k=0; k<col; k++) {
	for (j=0; j<row; j++) {
		holder._x = wi*j;
		holder._y = hi*k;
	}
}

```

scotty(-:

---

<div class="post-metadata">

**Author:** ![dec27](https://avatars.discourse-cdn.com/v4/letter/d/2bfe46/32.png) [@dec27](https://forum.kirupa.com/u/dec27)\
**Post date:** [March 27, 2006, 5:51pm UTC](https://forum.kirupa.com/t/gallery-thumbs-in-a-grid-yes-once-again/183254/3 "2006-03-27T17:51:32Z")

</div>

I’m very sorry for not reply before.

Using the code I posted the images do appear, in cascade, but they appear.  
I don’t know which is the problem, if I change the code. The images just don’t appear.  
I think somehow I have to include my var i.

Let me know if I did something wrong. please.  
Thank you, for taking the time!:sure:

my\_xml = new XML();  
my\_xml.ignoreWhite = true;  
my\_xml.onLoad = function(ok) {  
if (ok) {  
loop(my\_xml);  
} else {  
trace(“error loading xml file”);  
}  
};  
my\_xml.load(“images.xml”);  
function loop(my\_xml) {  
var portfolioPictures = my\_xml.firstChild.childNodes;  
nuclips = portfolioPictures.length;  
for (var i = 0; i\<nuclips; i++) {  
var currentPicture = portfolioPictures\*;  
var holder = \_root.createEmptyMovieClip(“holding”+i, i);  
var col = 10;  
var row = 8;  
//wi is the thumbnail width + the space you want  
var wi = 75;  
//hi is the thumbnail height + the space you want  
var hi = 75;  
for (k=0; k\<col; k++) {  
for (j=0; j\<row; j++) {  
holder.\_x = wi_j;  
holder.\_y = hi_k;  
}  
}  
inner = holder.createEmptyMovieClip(“thumbnail\_image”, 0);  
inner.loadMovie(currentPicture.attributes.thumb);  
holder.title = currentPicture.attributes.title;  
holder.image = currentPicture.attributes.image;  
holder.onRollOver = function() {  
\_root.texto.text = this.title;  
};  
holder.onRelease = function() {  
\_root.disappear(\_root.images, 0);  
pictureit.loadMovie(this.image);  
};  
}  
}

---

<div class="post-metadata">

**Author:** ![JoshuaJonah](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joshuajonah/32/1775_2.png) [@JoshuaJonah](https://forum.kirupa.com/u/JoshuaJonah)\
**Post date:** [March 27, 2006, 5:53pm UTC](https://forum.kirupa.com/t/gallery-thumbs-in-a-grid-yes-once-again/183254/4 "2006-03-27T17:53:55Z")

</div>

sounds like a depth issue to me.

---

<div class="post-metadata">

**Author:** ![dec27](https://avatars.discourse-cdn.com/v4/letter/d/2bfe46/32.png) [@dec27](https://forum.kirupa.com/u/dec27)\
**Post date:** [March 27, 2006, 6:06pm UTC](https://forum.kirupa.com/t/gallery-thumbs-in-a-grid-yes-once-again/183254/5 "2006-03-27T18:06:27Z")

</div>

Could you explain better, please?

I managed to do it before, not with an xml, but it worked.

Which is the problem?:q:

---

<div class="post-metadata">

**Author:** ![dec27](https://avatars.discourse-cdn.com/v4/letter/d/2bfe46/32.png) [@dec27](https://forum.kirupa.com/u/dec27)\
**Post date:** [March 27, 2006, 7:13pm UTC](https://forum.kirupa.com/t/gallery-thumbs-in-a-grid-yes-once-again/183254/6 "2006-03-27T19:13:38Z")

</div>

col = 10;  
row = 8;  
wi = 30;  
hi = 23;  
cuenta = 0;  
for (k=0; k\<col; k++) {  
for (j=0; j\<row; j++) {  
holder.\_x = wi_i;  
holder.\_y = hi_k;  
cuenta++;  
}  
}  
This way it appears horizontally, what am I doing wrong?☹

---

<div class="post-metadata">

**Author:** ![dec27](https://avatars.discourse-cdn.com/v4/letter/d/2bfe46/32.png) [@dec27](https://forum.kirupa.com/u/dec27)\
**Post date:** [March 28, 2006, 12:16am UTC](https://forum.kirupa.com/t/gallery-thumbs-in-a-grid-yes-once-again/183254/7 "2006-03-28T00:16:57Z")

</div>

Well I found a solution.

This is it!

col = 6;  
row = 5;  
wi = 40;  
hi = 50;  
cuenta = 0;  
for (x=0; x\<col; x++) {  
for (y=0; y\<row; y++) {  
this[“holding”+cuenta].\_x = 100+wi_x;  
this[“holding”+cuenta].\_y = 150+hi_y;  
cuenta++;  
}  
}

Thank you!😉