XML GALLERY with thumbnail grid that scrolls

I have a gallery that has two columns of thumbnails but it wont scroll. what can I do?


function loadXML(loaded) {
    if (loaded) {
        xmlNode = this.firstChild;
        image = [];
        description = [];
        thumbnails = [];
        link = [];
        details = [];
        price = [];
        url = [];
        style1link = [];
        style2link = [];
        style3link = [];
        style1desc = [];
        style2desc = [];
        style3desc = [];
        options = [];
        size1 = [];
        size2 = [];
        size3 = [];
        color1 = [];
        color2 = [];
        color3 = [];
        color4 = [];
        option1price = [];
        option2price = [];
        option3price = [];
        total = xmlNode.childNodes.length;
        for (i=0; i<total; i++) {
            image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
            description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
            link* = xmlNode.childNodes*.childNodes[3].firstChild.nodeValue;
            details* = xmlNode.childNodes*.childNodes[4].firstChild.nodeValue;
            price* = xmlNode.childNodes*.childNodes[5].firstChild.nodeValue;
            url* = xmlNode.childNodes*.childNodes[6].firstChild.nodeValue;
            style1link* = xmlNode.childNodes*.childNodes[7].firstChild.nodeValue;
            style2link* = xmlNode.childNodes*.childNodes[8].firstChild.nodeValue;
            style3link* = xmlNode.childNodes*.childNodes[9].firstChild.nodeValue;
            style1desc* = xmlNode.childNodes*.childNodes[10].firstChild.nodeValue;
            style2desc* = xmlNode.childNodes*.childNodes[11].firstChild.nodeValue;
            style3desc* = xmlNode.childNodes*.childNodes[12].firstChild.nodeValue;
            options* = xmlNode.childNodes*.childNodes[13].firstChild.nodeValue;
            size1* = xmlNode.childNodes*.childNodes[14].firstChild.nodeValue;
            size2* = xmlNode.childNodes*.childNodes[15].firstChild.nodeValue;
            size3* = xmlNode.childNodes*.childNodes[16].firstChild.nodeValue;
            color1* = xmlNode.childNodes*.childNodes[17].firstChild.nodeValue;
            color2* = xmlNode.childNodes*.childNodes[18].firstChild.nodeValue;
            color3* = xmlNode.childNodes*.childNodes[19].firstChild.nodeValue;
            color4* = xmlNode.childNodes*.childNodes[20].firstChild.nodeValue;
            option1price* = xmlNode.childNodes*.childNodes[21].firstChild.nodeValue;
            option2price* = xmlNode.childNodes*.childNodes[22].firstChild.nodeValue;
            option3price* = xmlNode.childNodes*.childNodes[23].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("FLWR.xml");
///////////////////////////////////// 
listen = new Object();
listen.onKeyDown = function() {
    if (Key.getCode() == Key.UP) {
        prevImage();
    } else if (Key.getCode() == Key.DOWN) {
        nextImage();
    }
};
Key.addListener(listen);
previous_btn.onRelease = function() {
    prevImage();
};
next_btn.onRelease = function() {
    nextImage();
};
///////////////////////////////////// 
p = 0;
cols = 3; //the number of columns you want
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;
        }    }
    //
    //getURL statement
    //
    picture.onRelease = function() {
        attachMovie("contentblock1", "contentblock", 100, {_x:100, _y:0});
        unloadMovie("Symbol 10");
        loaderB.loadMovie(link[p], 16);
        loaderB._lockroot = true;
        imgbk._xscale=0;
        imgbk._yscale=0;
        imgbk._x=-600;
        imgbk._y=-370;
        
        this._alpha=0;
        this._xscale=90;
        this._yscale=90;
        this._x=-100;
        this._y=-370;
        
        
        
    };
    
    //
};function nextImage() {
    if (p<(total-1)) {
        p++;
        if (loaded == filesize) {
            picture._alpha = 0;
            picture._xscale=35;
            picture._yscale=35;
            picture.loadMovie(image[p], 1);
            desc_txt.text = description[p];
            attachMovie("Symbol 101", "Symbol 10", 1, {_x:-170, _y:100,_alpha:80,_xscale:150,_yscale:150});
            picture_num();
        }
    }
}
function prevImage() {
    if (p>0) {
        p--;
        picture._alpha = 0;
        picture.loadMovie(image[p], 1);
        picture._xscale=35;
        picture._yscale=35;
        desc_txt.text = description[p];
        attachMovie("Symbol 101", "Symbol 10", 1, {_x:-170, _y:100,_alpha:80,_xscale:150,_yscale:150});
        picture_num();
    }
}
function firstImage() {
    if (loaded == filesize) {
        picture._alpha = 0;
        picture.loadMovie(image[0], 1);
        picture._xscale=35;
        picture._yscale=35;
        desc_txt.text = description[0];
        attachMovie("Symbol 101", "Symbol 10", 1, {_x:-170, _y:100,_alpha:80,_xscale:150,_yscale:150});
        picture_num();
    }
}
function picture_num() {
    current_pos = p+1;
    pos_txt.text = current_pos+" / "+total;
}
function thumbNailScroller() {
    // thumbnail code! 
    this.createEmptyMovieClip("tscroller", 2000);
    scroll_speed = 10;
    tscroller.onEnterFrame = function() {
        if ((this._xmouse>=thumbnail_mc._x) && (this._xmouse<=thumbnail_mc._x+thumbnail_mc._width)) {
            if ((this._ymouse>=(hit_right._y-40)) && (thumbnail_mc.hitTest(hit_right))) {
                thumbnail_mc._y -= scroll_speed;
            } else if ((this._ymouse<=(hit_left._y+40)) && (thumbnail_mc.hitTest(hit_left))) {
                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._x = hit_left._x + ((k%cols)*(target_mc._width+10));
target_mc._y = Math.floor(k/cols)*(target_mc._height+10);
        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);
}

How do you want it to scroll…

  1. it can be with onEnterFrame

  2. SetInterval

  3. mouse interactive scrolling

I would like it to be on rollover off a target. I have 16 thumbnails showing right now in 2 columns of 8 which is great and i need it to scroll down to show more if more than 16 images are in the album