# Building XML Gallery with 2 vertical scrolling thumbnail bars

**URL:** <https://forum.kirupa.com/t/building-xml-gallery-with-2-vertical-scrolling-thumbnail-bars/281760>\
**Category:** flash\
**Created:** [February 12, 2009, 11:40pm UTC](https://forum.kirupa.com/t/building-xml-gallery-with-2-vertical-scrolling-thumbnail-bars/281760 "2009-02-12T23:40:24Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![sm00th](https://avatars.discourse-cdn.com/v4/letter/s/9d8465/32.png) [@sm00th](https://forum.kirupa.com/u/sm00th)\
**Post date:** [February 12, 2009, 11:40pm UTC](https://forum.kirupa.com/t/building-xml-gallery-with-2-vertical-scrolling-thumbnail-bars/281760/1 "2009-02-12T23:40:24Z")

</div>

Gday team,

I am currently building a XML gallery which works, and has one row of scrolling thumbnails to click on that display larger image in the centre of my site.

What I am trying to build is two rows of thumbnails that can scroll backwards and forwards; below is the code i have used to make the single line of thumbnails, could any one point out or help me how i would go about to have two rows of thumbnails please.

import caurina.transitions.Tweener;

var myXML:XML = new XML();  
var thumbsArray:Array = new Array();  
var thumbsCount:int;  
var imageNum:int;  
var slideLength:Number = 360;  
var slideAmount:Number;  
var slideNum:Number = 0;  
var imageLoader:Loader = new Loader();

var descriptionArray:Array = new Array();  
var cssLoader:URLLoader = new URLLoader();  
var cssRequest:URLRequest = new URLRequest(“example.css”);  
var myStyle:StyleSheet = new StyleSheet();

trace(slideNum);

cssLoader.load(cssRequest);  
cssLoader.addEventListener(Event.COMPLETE,onCssComplete);

function onCssComplete(event:Event):void{  
//trace(“text loaded”);  
myStyle.parseCSS(cssLoader.data);  
MovieClip(parent).image\_txt.styleSheet=myStyle;  
}

createThumbs();

//xml import:  
xmlHelper(“xml/images.xml”);  
function xmlHelper(xmlFile:String):void{  
var loader:URLLoader = new URLLoader();  
loader.load(new URLRequest(xmlFile));  
loader.addEventListener(Event.COMPLETE, XMLComplete);  
}  
//xml load complete:  
function XMLComplete(event:Event):void{  
//using the event to get data from the loader:  
myXML = new XML(event.target.data);  
trace("1) myXML = "+myXML);  
//get a list of items from the XML object:  
var myXMLList:XMLList = myXML.item.thumb;  
var descXMLList:XMLList=myXML.item.description;  
trace("2) myXMLList = "+myXMLList);  
//iterate thru the xml list and put the contents of each tag into the array:  
for each(var node:XML in myXMLList){  
thumbsArray.push(node);  
}

```
for each(var node2:XML in descXMLList){
	descriptionArray.push(node2);
}
trace("3) thumbsArray = "+thumbsArray);

thumbsCount = thumbsArray.length;
slideAmount = Math.ceil((thumbsCount*120)/360);
createThumbs();

```

}

function createThumbs():void{  
for(var i:int = 0; i\< thumbsCount; i++){  
//add thumb to stage  
var myThumb:Thumbnail = new Thumbnail();  
content\_mc.addChild(myThumb);  
myThumb.buttonMode = true;  
myThumb.x = (120_i)+13;  
myThumb.i = i+1;  
myThumb.num = myThumb.i;  
//load thumb image  
var loader:Loader = new Loader();  
var thumb:String = thumbsArray_;  
//trace("thumb = "+thumb);  
var req:URLRequest = new URLRequest(thumb);  
loader.load(req);  
myThumb.addChild(loader);  
loader.y = .0;  
loader.x = .0;  
myThumb.addEventListener(MouseEvent.CLICK,thumbClick);  
}  
}  
function thumbClick(event:MouseEvent):void{  
var myNum:int=event.currentTarget.i;  
//currentTarget is the item that you added the event to.  
trace("num = "+event.currentTarget.num);  
imageNum = event.currentTarget.num;  
MovieClip(parent).image\_txt.htmlText=descriptionArray[myNum];  
MovieClip(parent).image\_txt.condenseWhite = true;  
MovieClip(parent).image\_txt.wordWrap= true;

```
tweenImageOut();

```

}  
function tweenImageOut():void{  
Tweener.addTween(MovieClip(root).loader\_mc, {alpha:0, time:.5, transition:“linear”, onComplete:this.loadImage});  
}  
function loadImage():void{  
MovieClip(root).loader\_mc.alpha = 0;  
var image:String = “images/large\_”+imageNum+".jpg";  
var req:URLRequest = new URLRequest(image);  
imageLoader.load(req);  
MovieClip(root).loader\_mc.addChild(imageLoader);  
Tweener.addTween(MovieClip(root).loader\_mc, {alpha:1, time:.3, transition:“linear”});  
}  
down\_btn.addEventListener(MouseEvent.CLICK, clickDown);

function clickDown(event:MouseEvent):void{  
trace(slideNum);  
if(slideNum \< 0){  
slideNum++;  
var moveTo:Number = 360\*slideNum;  
Tweener.addTween(content\_mc, {x:moveTo,time:1, transition:“easeOutExpo”});  
}  
}  
up\_btn.addEventListener(MouseEvent.CLICK, clickUp);

function clickUp(event:MouseEvent):void{  
if(slideNum \> 1 - slideAmount){  
slideNum–;  
trace(slideNum);

```
var moveTo:Number = 360*slideNum;
Tweener.addTween(content_mc, {x:moveTo,time:1, transition:"easeOutExpo"});
}

```

}

Sm00th