# Centering images in xml gallery \[renamed\]

**URL:** https://forum.kirupa.com/t/centering-images-in-xml-gallery-renamed/176052
**Category:** flash
**Created:** [January 19, 2006, 10:23pm UTC](https://forum.kirupa.com/t/centering-images-in-xml-gallery-renamed/176052 "2006-01-19T22:23:43Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![romka](https://avatars.discourse-cdn.com/v4/letter/r/6bbea6/32.png) [@romka](https://forum.kirupa.com/u/romka)
#### Post date: [January 19, 2006, 10:23pm UTC](https://forum.kirupa.com/t/centering-images-in-xml-gallery-renamed/176052/1 "2006-01-19T22:23:43Z")

</div>

[FONT=Times New Roman][SIZE=3]Hi[/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3] [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]There is a great tutorial under the topic Flash MX2004 – “Adding thumbnails”.[/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]It’s about how to make a photo slideshow with scrollable thumbnails using Flash and XML. And it’s function is simple too, just click on a thumbnail and larger image fades in above.[/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]If photograph is taken as landscape everything is fine but if it happens to be upright or portrait, it appears on left side of the picture\_MC. [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]Is there any way to make upright images appearing in the middle of picture\_MC?[/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]Here is the code.[/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3] [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]function loadXML(loaded) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]if (loaded) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]xmlNode = this.firstChild; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]image = []; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]description = []; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]thumbnails = []; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]total = xmlNode.childNodes.length; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]for (i=0; i\<total; i++) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]image\* = xmlNode.childNodes\*.childNodes[0].firstChild.nodeValue; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]description\* = xmlNode.childNodes\*.childNodes[1].firstChild.nodeValue; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]thumbnails\* = xmlNode.childNodes\*.childNodes[2].firstChild.nodeValue; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]thumbnails\_fn(i); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]firstImage(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} else { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]content = “file not loaded!”; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]xmlData = new XML(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]xmlData.ignoreWhite = true; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]xmlData.onLoad = loadXML; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]xmlData.load(“images.xml”); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]///////////////////////////////////// [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]listen = new Object(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]listen.onKeyDown = function() { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]if (Key.getCode() == Key.LEFT) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]prevImage(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} else if (Key.getCode() == Key.RIGHT) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]nextImage(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]}; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]Key.addListener(listen); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]previous\_btn.onRelease = function() { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]prevImage(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]}; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]next\_btn.onRelease = function() { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]nextImage(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]}; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]///////////////////////////////////// [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]p = 0; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]this.onEnterFrame = function() { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]filesize = picture.getBytesTotal(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]loaded = picture.getBytesLoaded(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]preloader.\_visible = true; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]if (loaded != filesize) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]preloader.preload\_bar.\_xscale = 100\*loaded/filesize; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} else { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]preloader.\_visible = false; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]if (picture.\_alpha\<100) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]picture.\_alpha += 10; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]}; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]function nextImage() { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]if (p\<(total-1)) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]p++; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]if (loaded == filesize) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]picture.\_alpha = 0; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]picture.loadMovie(image[p], 1); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]desc\_txt.text = description[p]; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]picture\_num(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]function prevImage() { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]if (p\>0) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]p–; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]picture.\_alpha = 0; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]picture.loadMovie(image[p], 1); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]desc\_txt.text = description[p]; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]picture\_num(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]function firstImage() { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]if (loaded == filesize) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]picture.\_alpha = 0; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]picture.loadMovie(image[0], 1); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]desc\_txt.text = description[0]; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]picture\_num(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]function picture\_num() { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]current\_pos = p+1; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]pos\_txt.text = current\_pos+" / "+total; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]function thumbNailScroller() { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]// thumbnail code! [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]this.createEmptyMovieClip(“tscroller”, 1000); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]scroll\_speed = 10; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]tscroller.onEnterFrame = function() { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]if ((\_root.\_ymouse\>=thumbnail\_mc.\_y) && (\_root.\_ymouse\<=thumbnail\_mc.\_y+thumbnail\_mc.\_height)) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]if ((\_root.\_xmouse\>=(hit\_right.\_x-40)) && (thumbnail\_mc.hitTest(hit\_right))) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]thumbnail\_mc.\_x -= scroll\_speed; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} else if ((\_root.\_xmouse\<=200) && (thumbnail\_mc.hitTest(hit\_left))) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]thumbnail\_mc.\_x += scroll\_speed; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} else { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]delete tscroller.onEnterFrame; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]}; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]} [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3] [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]function thumbnails\_fn(k) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]thumbnail\_mc.createEmptyMovieClip(“t”+k, thumbnail\_mc.getNextHighestDepth()); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]tlistener = new Object(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]tlistener.onLoadInit = function(target\_mc) { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]target\_mc.\_x = hit\_left.\_x+(eval(“thumbnail\_mc.t”+k).\_width+5)\*k; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]target\_mc.pictureValue = k; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]target\_mc.onRelease = function() { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]p = this.pictureValue-1; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]nextImage(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]}; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]target\_mc.onRollOver = function() { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]this.\_alpha = 50; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]thumbNailScroller(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]}; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]target\_mc.onRollOut = function() { [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]this.\_alpha = 100; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]}; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]}; [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]image\_mcl = new MovieClipLoader(); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]image\_mcl.addListener(tlistener); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]image\_mcl.loadClip(thumbnails[k], “thumbnail\_mc.t”+k); [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]}[/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3] [/SIZE][/FONT]  
[FONT=Times New Roman][SIZE=3]Thank you for any answer.[/SIZE][/FONT]