# Loading a image over thumbnails

**URL:** <https://forum.kirupa.com/t/loading-a-image-over-thumbnails/223454>\
**Category:** Uncategorized\
**Created:** [April 23, 2007, 12:11am UTC](https://forum.kirupa.com/t/loading-a-image-over-thumbnails/223454 "2007-04-23T00:11:18Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![cookingkym](https://avatars.discourse-cdn.com/v4/letter/c/bc79bd/32.png) [@cookingkym](https://forum.kirupa.com/u/cookingkym)\
**Post date:** [April 23, 2007, 12:11am UTC](https://forum.kirupa.com/t/loading-a-image-over-thumbnails/223454/1 "2007-04-23T00:11:18Z")

</div>

Hey Everyone,

Please help. Ive almost got what ive been trying to do for weeks.  
i have a photo gallery from on of the “Kirupa” tutorials using xml, but this ones with a 5X4 grid.

I want only the grid to up on stage and when you click the thumbnail i want the larger image to show up over the grid!!and then a “back button” thats returns to the grid of images and so on.

I have everything in place i just need some help getting the depths right and a back btn back to grid of thumbs.

Ive been on this for weeks please help out.

This is my code so far.

cheers 😟 ck

thumbarray = [];  
columns = 5;  
spacex =92  
spacey=60

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

```
} else {
    content = "file not loaded!";
}

```

}  
function drawSquare(thumb, depth, x, y, w, h) {  
var mc = thumb.createEmptyMovieClip(“thumb”+depth, depth);  
//mc.\_x = x;  
//mc.\_y = y;  
[//mc.lineStyle](https://mc.lineStyle)();  
[//mc.beginFill](https://mc.beginFill)(colour)  
[//mc.lineTo](https://mc.lineTo)(w, 0);  
[//mc.lineTo](https://mc.lineTo)(w, h);  
[//mc.lineTo](https://mc.lineTo)(0, h);  
[//mc.endFill](https://mc.endFill)();  
return mc;  
}

xmlData = new XML();  
xmlData.ignoreWhite = true;  
xmlData.onLoad = loadXML;  
xmlData.load(“image.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.loadMovie(image[p], 1);

}}}

function prevImage() {  
if (p\>0) {  
p–;  
//picture.\_alpha = 0;  
picture.loadMovie(image[p], 1);

}}

/////////////////////////////////////////////

function firstImage(){  
if (loaded ==filesize){  
picture.\_alpha =100;  
picture.loadMovie(image[0],1);  
}  
}

function startload() {  
thumbarray[ij].loadMovie(thumbnails[ij]);  
checkload();  
}

var ij=0  
function sload() {  
for (var i = 0; i\<image.length; i++) {  
var thumb = drawSquare(this, i, 0, 0, 0, 104, 71);  
thumb.\_x =48+ (i%columns)\*spacex;  
thumb.\_y =82+ Math.floor(i/columns)\*spacey;  
var clap =thumb.createEmptyMovieClip(“tt”,1)  
//clap.\_x = 2  
//clap.\_y = 2  
thumbarray.push(clap);  
thumb.pictureValue =i;  
thumb.onRelease = function() {  
p = this.pictureValue-1;  
nextImage();  
}  
thumb.onRollOver = function() {  
this.\_alpha = 50;

```
    }
    thumb.onRollOut = function() {
        this._alpha = 100;
    }
}
startload()

```

}

this.createEmptyMovieClip(“checker”,1000)  
function checkload() {  
checker.onEnterFrame = function() {

```
    if (thumbarray[ij]._width) {
        
        delete this.onEnterFrame;
        if (ij&lt;thumbarray.length-1) {
            ij++;
            startload();
        }
    }
}

```

}  
function startload() {  
thumbarray[ij].loadMovie(thumbnails[ij]);  
checkload();  
}