# XML Dynamic Gallery help - PLZ

**URL:** <https://forum.kirupa.com/t/xml-dynamic-gallery-help-plz/272733>\
**Category:** flash\
**Created:** [October 8, 2008, 2:47am UTC](https://forum.kirupa.com/t/xml-dynamic-gallery-help-plz/272733 "2008-10-08T02:47:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![yellowed](https://avatars.discourse-cdn.com/v4/letter/y/50afbb/32.png) [@yellowed](https://forum.kirupa.com/u/yellowed)\
**Post date:** [October 8, 2008, 2:47am UTC](https://forum.kirupa.com/t/xml-dynamic-gallery-help-plz/272733/1 "2008-10-08T02:47:32Z")

</div>

Hi all, I am new to AS3, I am having difficulty building a photo gallery. I want to load an image to a certain size on the stage (the holder size) and then on click I want the main holder to expand to the size of the original loaded image, and then enable panning for the image. I found it hard to break the process into simple steps, dynamically I ended up creating to many movieClips and sprites.  
This is my code so far:  
import caurina.transitions.\*;

var xmlLoader:URLLoader = new URLLoader();  
var xml:XML;  
var xmlList:XMLList;  
var images:int; // Total images in trhe xml;  
var thumbsArray:Array; // Holds all the Thumbs  
var imagesArray:Array; // Holds all the big Images  
var counter:Number = 0; // Counter  
var spacing:Number = 10;  
var initialScale:Number = 50;  
var totalScale:Number = 180;

infoBox.closeBtn.buttonMode = true;  
infoBox.closeBtn.addEventListener(MouseEvent.CLICK, closeInfo);  
function closeInfo(e:Event):void{  
Tweener.addTween(infoBox, {y:-330, time:1, transition:“linear”});

}

var thumbsHolder:Sprite = new Sprite();// To hold all the Thumbs  
thumbsContainer.addChild(thumbsHolder);

// Loading the Big Image  
var loader:Loader = new Loader();  
var loaderX:Number = mainHolder.x;//x Position of large image  
var loaderY:Number = mainHolder.y;//y Position of large image  
var maxHeight:Number = 600;//Maximum height of loaded image  
var maxWidth:Number = 340;//Maximum width of loaded image  
loader.x = loaderX;  
loader.y = loaderY;  
mainHolder.addChild(loader);  
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);  
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, laodBigImage);

// Create a Text field for the loader percentage  
var loadPercent:TextField = new TextField();  
loadPercent.autoSize = TextFieldAutoSize.RIGHT;  
loadPercent.width = 100;  
mainHolder.addChild(loadPercent);

//  
function loadProgress(event:ProgressEvent):void {  
var percent:Number = Math.round(event.bytesLoaded/event.bytesTotal)\* 100;  
loadPercent.text = percent + “%”;  
}

xmlLoader.load(new URLRequest(“load/gallery.xml”));  
xmlLoader.addEventListener(Event.COMPLETE, onComplete);

function onComplete(e:Event):void{  
parseXML(e);  
loadPercent.visible = false;  
}  
function parseXML(e:Event){  
xml = new XML(e.target.data);  
xmlList = xml.image;  
images = xmlList.length();

```
//trace (xmlList);
//trace(xml.image.@thumb);
for(var i:int = 0; i &lt; images; i++){
    var thumb:MovieClip = new MovieClip();
    var thumbLoader:Loader = new Loader();
    thumb.x = 70 * i + spacing;
    thumb.y = 5;
    thumb.id = xmlList*;
     thumb.thumbName = xml.image*.@name;
    thumb.thumbSrc = xml.image*.@thumb;
    thumb.imageSrc = xml.image*.@url;
    thumb.thumbDesc = xml.image*.@description;
    thumb.mouseChildren = false;
    thumb.buttonMode = true;
    thumbLoader.load(new URLRequest(xmlList[counter].@thumb));
    thumbsHolder.addChild(thumb);
    Tweener.addTween(thumb, {alpha:1, time:(.2*counter)+.5, transition: "easeInExpo"});
    thumb.addChild(thumbLoader);
    thumb.addEventListener(MouseEvent.CLICK, thumbClicked);

    trace(thumb.id);
    //trace(thumb.thumbName);
    counter++;
}

```

}  
function thumbClicked(ev:MouseEvent):void {  
// populate the info box  
//trace(ev.target.thumbName);  
infoBox.name\_txt.text =ev.target.thumbName;  
infoBox.desc\_txt.text =ev.target.thumbDesc;

```
mainHolder.removeChild(loader);
loader.x = stage.stageWidth/2 - loader.width/2;
loader.y = stage.stageHeight/2 - loader.height/2;
loader.load(new URLRequest(ev.target.imageSrc));
Tweener.addTween(loader, {scaleX:.4,scaleY:.4, time:1, transition:"linear"});

```

}

function laodBigImage(ev:Event):void {  
if (loader.height \> maxHeight) {  
loader.width \*= (maxHeight / loader.height);  
loader.height = maxHeight;  
}  
if (loader.width \> maxWidth) {  
loader.height \*= (maxWidth / loader.width);  
loader.width = maxWidth;  
}

```
Tweener.addTween(loader, {scaleX:.4,scaleY:.4, time:1, transition:"linear"});
mainHolder.addChild(loader);

```

}

mainHolder.addEventListener(MouseEvent.CLICK, moveBigImage);

/\*  
This formula is not working  
\*/  
function moveBigImage(e:MouseEvent):void{  
[//mainHolder.width](https://mainHolder.width) = loader.width;  
[//mainHolder.height](https://mainHolder.height) = loader.height;  
var d:Number = 10;  
var imgX:Number = mouseX;  
var imgY:Number = mouseY;  
var formula = ((stage.stageWidth/2)-(e.target.width/2)) / stage.stage.width/2;  
e.target.x = ((e.target.x - formula \* imgX)-(e.target.width/2))/d;

THANKS A LOT FOR YOUR HELP