[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]
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
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.
Can anyone help me with this please?
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”, target_mc);
[/AS]
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
- 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);
}
