# Kirupa's Photo Slide show with thumbnails Help

**URL:** <https://forum.kirupa.com/t/kirupas-photo-slide-show-with-thumbnails-help/264977>\
**Category:** flash\
**Created:** [July 2, 2008, 5:35pm UTC](https://forum.kirupa.com/t/kirupas-photo-slide-show-with-thumbnails-help/264977 "2008-07-02T17:35:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ruffneck\_chiken](https://avatars.discourse-cdn.com/v4/letter/r/bc79bd/32.png) [@ruffneck\_chiken](https://forum.kirupa.com/u/ruffneck_chiken)\
**Post date:** [July 2, 2008, 5:35pm UTC](https://forum.kirupa.com/t/kirupas-photo-slide-show-with-thumbnails-help/264977/1 "2008-07-02T17:35:39Z")

</div>

[COLOR=black][FONT=Verdana]HI I am customizing the Photo slide show with thumbnails from this site. It is great. I was able to customize it so it would work with bigger pics (640 width X 480 height) basically wider pics then they are tall, but I also have pics that are taller then they are wide (480 height X 640 width). I have two issues with the taller pics.[/FONT][/COLOR]

[COLOR=black][FONT=Verdana]1. in the thumbnail area the taller pics load over top of the pic before it and then there is a large gap after it.[/FONT][/COLOR]

[COLOR=black][FONT=Verdana]2. the movie clip that loads the full size image aligns the pics to the upper left corner of the movie clip. I would like it to center the taller pic. I know I will have the same problem with the wider pics when I make the viewing area 640x640 they will look to high.[/FONT][/COLOR]

[COLOR=black][FONT=Verdana]Is there a way to fix these two problems?[/FONT][/COLOR]

here is the code that is used:

function loadXML(loaded) {  
if (loaded) {  
xmlNode = this.firstChild;  
image = [];  
description = [];  
thumbnails = [];  
total = xmlNode.childNodes.length;  
for (i=0; i\<total; i++) {  
image\* = xmlNode.childNodes\*.childNodes[0].firstChild.nodeValue;  
description\* = xmlNode.childNodes\*.childNodes[1].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(“images.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.\_alpha = 0;  
picture.loadMovie(image[p], 1);  
desc\_txt.text = description[p];  
picture\_num();  
}  
}  
}  
function prevImage() {  
if (p\>0) {  
p–;  
picture.\_alpha = 0;  
picture.loadMovie(image[p], 1);  
desc\_txt.text = description[p];  
picture\_num();  
}  
}  
function firstImage() {  
if (loaded == filesize) {  
picture.\_alpha = 0;  
picture.loadMovie(image[0], 1);  
desc\_txt.text = description[0];  
picture\_num();  
}  
}  
function picture\_num() {  
current\_pos = p+1;  
pos\_txt.text = current\_pos+" / "+total;  
}  
function thumbNailScroller() {  
// thumbnail code!  
this.createEmptyMovieClip(“tscroller”, 1000);  
scroll\_speed = 10;  
tscroller.onEnterFrame = function() {  
if ((\_root.\_ymouse\>=thumbnail\_mc.\_y) && (\_root.\_ymouse\<=thumbnail\_mc.\_y+thumbnail\_mc.\_height)) {  
if ((\_root.\_xmouse\>=(hit\_right.\_x-40)) && (thumbnail\_mc.hitTest(hit\_right))) {  
thumbnail\_mc.\_x -= scroll\_speed;  
} else if ((\_root.\_xmouse\<=(hit\_left.\_x+40)) && (thumbnail\_mc.hitTest(hit\_left))) {  
thumbnail\_mc.\_x += 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+(target\_mc.\_width+5)\*k;  
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);  
}

[COLOR=black][FONT=Verdana]Thanks in advance for your help[/FONT][/COLOR]

---

<div class="post-metadata">

**Author:** ![pantas](https://avatars.discourse-cdn.com/v4/letter/p/3e96dc/32.png) [@pantas](https://forum.kirupa.com/u/pantas)\
**Post date:** [July 2, 2008, 6:38pm UTC](https://forum.kirupa.com/t/kirupas-photo-slide-show-with-thumbnails-help/264977/2 "2008-07-02T18:38:31Z")

</div>

hi there.  
i’m about to get home, and i’m assuming you know a bit of AS.

instead of loadMovie, use loadClip.  
loadClip has an event listener that you can use. when the file is loaded, all you have to say is that the holder movie is in the center of the stage, and so is the loaded clip.

cheers

---

<div class="post-metadata">

**Author:** ![ruffneck\_chiken](https://avatars.discourse-cdn.com/v4/letter/r/bc79bd/32.png) [@ruffneck\_chiken](https://forum.kirupa.com/u/ruffneck_chiken)\
**Post date:** [July 2, 2008, 7:42pm UTC](https://forum.kirupa.com/t/kirupas-photo-slide-show-with-thumbnails-help/264977/3 "2008-07-02T19:42:30Z")

</div>

well i am a ASP coder and still working my way thru the AS code. i can figure out what is going on with most code but dont ask me to write it from scratch.

so in the fnextImage, prevImage and FirstImage functions change picture.loadMovie(image[p], 1); with picture.loadClip(image[p], 1);

if that is correct what code to i need to add to center it?

That would be for my secnd problem (2.) what about my first one (1.) any suggestions there from anyone?

I think the line of code that is in question is:

target\_mc.\_x = hit\_left.\_x+(target\_mc.\_width+5)\*k;

Thanks in advance for your help

Thanks in advance for your help.

---

<div class="post-metadata">

**Author:** ![ruffneck\_chiken](https://avatars.discourse-cdn.com/v4/letter/r/bc79bd/32.png) [@ruffneck\_chiken](https://forum.kirupa.com/u/ruffneck_chiken)\
**Post date:** [July 3, 2008, 2:39pm UTC](https://forum.kirupa.com/t/kirupas-photo-slide-show-with-thumbnails-help/264977/4 "2008-07-03T14:39:04Z")

</div>

Can anyone help me with this please?

---

<div class="post-metadata">

**Author:** ![pantas](https://avatars.discourse-cdn.com/v4/letter/p/3e96dc/32.png) [@pantas](https://forum.kirupa.com/u/pantas)\
**Post date:** [July 3, 2008, 3:12pm UTC](https://forum.kirupa.com/t/kirupas-photo-slide-show-with-thumbnails-help/264977/5 "2008-07-03T15:12:47Z")

</div>

the loadClip lets you add an event listener and thats where you will paste the realign code

[AS]  
var mclListener:Object = new Object();  
mclListener.onLoadComplete = function(target\_mc:MovieClip) {  
trace(“movie is loaded”);  
}  
var image\_mcl:MovieClipLoader = new MovieClipLoader();  
image\_mcl.addListener(mclListener);  
image\_mcl.loadClip(“[http://www.yourserver.com/your\_movie.swf](http://www.yourserver.com/your_movie.swf)”, target\_mc);

[/AS]

---

<div class="post-metadata">

**Author:** ![ruffneck\_chiken](https://avatars.discourse-cdn.com/v4/letter/r/bc79bd/32.png) [@ruffneck\_chiken](https://forum.kirupa.com/u/ruffneck_chiken)\
**Post date:** [July 3, 2008, 4:00pm UTC](https://forum.kirupa.com/t/kirupas-photo-slide-show-with-thumbnails-help/264977/6 "2008-07-03T16:00:19Z")

</div>

from your first reply that was perfect. I did some research on the loadclip and was able to get it to work. Thanks again. But i am still having the problem with the thumbnails

1. in the thumbnail area the taller pics load over top of the pic before it and then there is a large gap after it.

I think the line of code in question is:

target\_mc.\_x = hit\_left.\_x+(target\_mc.\_width+5)\*k;

\*k assumes all the thumbs are the same width. is there a way to find out the width of the thum and then add the number instead of \*k?

here is the code:

function loadXML(loaded) {  
if (loaded) {  
xmlNode = this.firstChild;  
image = [];  
description = [];  
thumbnails = [];  
total = xmlNode.childNodes.length;  
for (i=0; i\<total; i++) {  
image\* = xmlNode.childNodes\*.childNodes[0].firstChild.nodeValue;  
description\* = xmlNode.childNodes\*.childNodes[1].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(“images.xml”);  
/////////////////////////////////////

this.createEmptyMovieClip(“container”, “100”);

my\_mc = new MovieClipLoader();  
preload = new Object();

/////////////////////////////////////  
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 = container.getBytesTotal();  
loaded = container.getBytesLoaded();  
preloader.\_visible = true;  
if (loaded != filesize) {  
preloader.preload\_bar.\_xscale = 100\*loaded/filesize;  
} else {  
preloader.\_visible = false;  
if (container.\_width== 640) {  
container.\_x = 90;  
container.\_y = 100;  
pic\_bg.\_x = 80;  
pic\_bg.\_y = 90;  
pic\_bg.\_width = 660;  
pic\_bg.\_height = 500;  
} else {  
container.\_x = 170;  
container.\_y = 20;  
pic\_bg.\_x = 160;  
pic\_bg.\_y = 10;  
pic\_bg.\_width = 500;  
pic\_bg.\_height = 660;  
}  
if (container.\_alpha\<100) {  
container.\_alpha += 10;  
pic\_bg.\_alpha += 10;  
}  
}  
};  
function nextImage() {  
if (p\<(total-1)) {  
p++;  
if (loaded == filesize) {  
container.\_alpha = 0;  
pic\_bg.\_alpha = 0;  
my\_mc.loadClip(image[p], “container”);  
desc\_txt.text = description[p];  
picture\_num();  
}  
}  
}  
function prevImage() {  
if (p\>0) {  
p–;  
container.\_alpha = 0;  
pic\_bg.\_alpha = 0;  
my\_mc.loadClip(image[p], “container”);  
if (container.\_width== 640) {  
container.\_x = 90;  
container.\_y = 100;  
} else {  
container.\_x = 170;  
container.\_y = 20;  
}  
desc\_txt.text = description[p];  
picture\_num();  
}  
}  
function firstImage() {  
if (loaded == filesize) {  
container.\_alpha = 0;  
pic\_bg.\_alpha = 0;  
my\_mc.loadClip(image[p], “container”);  
if (container.\_width == 640) {  
container.\_x = 90;  
container.\_y = 100;  
} else {  
container.\_x = 170;  
container.\_y = 20;  
}  
desc\_txt.text = description[p];  
picture\_num();  
}  
}  
function picture\_num() {  
current\_pos = p+1;  
pos\_txt.text = current\_pos+" / "+total;  
}  
function thumbNailScroller() {  
// thumbnail code!  
this.createEmptyMovieClip(“tscroller”, 1000);  
scroll\_speed = 10;  
tscroller.onEnterFrame = function() {  
if ((\_root.\_ymouse\>=thumbnail\_mc.\_y) && (\_root.\_ymouse\<=thumbnail\_mc.\_y+thumbnail\_mc.\_height)) {  
if ((\_root.\_xmouse\>=(hit\_right.\_x-200)) && (thumbnail\_mc.hitTest(hit\_right))) {  
thumbnail\_mc.\_x -= scroll\_speed;  
} else if ((\_root.\_xmouse\<=(hit\_left.\_x+200)) && (thumbnail\_mc.hitTest(hit\_left))) {  
thumbnail\_mc.\_x += 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+(target\_mc.\_width+5)\*k;  
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);  
}