[RESOLVED] CS3 AS2 HELP!!! Dynamic thumbnail Gallery
Hi everyone,
I have a dynamic thumbnail gallery that laods thumbnails from db/xml and also each thumbnails associated main image.
When the user rolls over the thumbnail the larger image displays to the right.
THis is all working fine however I need to update the script to change the thumbnail gallery layout from a 3 column 2 row gallery to a 4column 4 row gallery.
I've adjusted the as and resized the thumbnails to allow for this and setup a 8px spacer between thumbs
BUT...
THe way I've adjusted the script will set the first row perfectly and then the second row perfectly but it then shifts the next row right by 4 thumbs and then on for each subsequent row.
Here is the relevant (I think) section of the AS
Actionscript Code:
private function loadImages() {
trace("LOAD IMAGES")
var _mc:MovieClip;
numOfImages = 0;
loadNumber = 0;
preloadArray = new Array();
for (var i = 0; i<_data.item.length; i++) {
_mc = createItemMC(target, i);
_mc._data = _data.item[i];
itemArray.push(_mc);
var loader1 = new ImageLoader(_mc.thumb, 1);
var loader2 = new ImageLoader(_mc.image, 2);
loader1.loadImage(settings.thumbPath+_data.item[i].image_thumb);
loader2.loadImage(settings.imagePath + _data.item[i].image_name);
numOfImages++;
loader1.onUpdate = function(f:Number) {
this._parent._parent._callback.updatePreloader(this.id,(f*100));
};
loader1.onComplete = function() {
};
loader2.onUpdate = function(f:Number) {
this._parent._parent._callback.updatePreloader(this.id,(f*100));
};
loader2.onComplete = function() {
};
}
createGallery();
}
private function createItemMC(__target:MovieClip, __id:String):MovieClip {
trace("CREATEITEMMC")
var _mc = __target.createEmptyMovieClip("holder"+__id, __target.getNextHighestDepth());
_mc.createEmptyMovieClip("image",_mc.getNextHighestDepth());
_mc.image.id = loadNumber++;
_mc.createEmptyMovieClip("thumb",_mc.getNextHighestDepth());
_mc.thumb.id = loadNumber++;
var r = __id;
if (r>=3) {
r -= 3;
}
_mc.thumb._x = (r*120);//x pos of first thumb
_mc.thumb._y = (Math.floor(__id/3)*185);//y value of second row of thumbs
_mc.image._x = 395;//x value of main image
_mc.image._y = 0;
_mc.image._visible = false;
var _txt = _mc.image.createTextField("Details", _mc.image.getNextHighestDepth(), 295, 0, 175, 360);//x, y, width, height
_txt.multiline = true;
_txt.wordWrap = true;
_txt.border = false;
_txt.html = true;
_txt.selectable = false;
_txt.antiAliasType = "advanced";
_txt.embedFonts = true;
_txt.htmlText = "<font color='0x887C74'>Style</font><br>"+_data.item[__id].product_style+"<br><br>"+"<font color='#887C74'>Colourway / Print</font><br>"+_data.item[__id].product_colour+"<br><br>"+"<font color='#887C74'>Sizes</font><br>"+_data.item[__id].product_size;
_txt.setTextFormat(detailsTextFormat);
return _mc;
}
private function createGallery() {
trace("CREATE GALLERY")
trace("numOfImages = " + numOfImages)
for (var i = 0; i < numOfImages; i++) {
trace(i + " / " + itemArray[i])
itemArray[i].fade = function(mc, a, b, c) {
var t:Tween = new Tween(mc, "_alpha", Strong.easeOut, a, b, c, true);
};
{
trace("all images loaded, display the default first one");
var defaultImage:MovieClip = itemArray[0];
defaultImage.image._visible = true;
var t:Tween = new Tween(defaultImage, "_alpha", Strong.easeOut, 0, 100, 3, true);
}
itemArray[i].onRollOver = function() {
defaultImage.image._visible = false;
this.image._visible = true;
this.fade(this.image,0,100,3);
};
itemArray[i].onRollOut = function() {
//this.prevImage = this.image;
//this.prevImage._visible = true;
this.fade(this.image,100,0,3);
};
}
}
But if you've got time and so that you can get the idea I've attached the working files and as.
Any advice would be hugely appreciated as this is due end mid next week!
AURGHHHH!!!
Thanks heaps
