This is my first post thanks to the aweosme Resizing border photo gallery thread. I want to expand it but I need some help understanding it.
Here is my working example using the sample photos -> http://russellheimlich.com/del/FlashPhotoGallery.swf
I started off with the V3 Thumbs Scrolled Version by Stalker. I’ve rearranged some items on the stage in order to accomodate the bigger images I hope to use when this is done.
I’ve added the preloader for each image myself.
My Code
MovieClip.prototype.loadPic = function(pic, id) {
info.text = "";
this._alpha = 0;
this.loadMovie(pic);
temp = this._parent.createEmptyMovieClip("temp2", 998);
temp.onEnterFrame = function() {
var t = container.getBytesTotal(), l = container.getBytesLoaded();
bar._visible = 1;
per = Math.round((l/t)*100);
if (per == "Nan"){
per = 0
}
if (Math.round(l/t) == 1 && container._width != 0 && container._height != 0) {
var w = container._width+spacing, h = container._height+spacing;
border.resizeMe(w, h, id);
bar._visible = 0;
loadText.text = "";
delete this.onEnterFrame;
}
else {
bar._width = per;//gives the bar a max width 100
loadText.text = per+" % loaded";
}
};
};
I have this annoying problem that the loader bar is visible while the thumbs load. And when I click a thumbnail, the % text briefly displays NaN. How can I fix these inconveniences?
From here I want to add stationary Next and Previous buttons at the top. I looked at the code in the massive post but this version is cryptic. :puzzled:
So far I have just managed to get this:
nextb.onRelease = function() {
cur++;
if (cur > pArray.length-1) {
container.loadPic(pArray[0], iArray[0]);
} else {
container.loadPic(pArray[0], iArray[0]);
}
};
Which just loads the first image in the array. How do I make the button advance to the next pic?
Other things I am looking to improve upon are:
-
A display indicating the number of thumbs that have been loaded i.e. # of thumbs loaded / total # of thumbs.
-
Modifying the XML file so I can include a path variable for each gallery. This way I can list just the image filenames, making it much easier to change directories. An example would look like this:
<gallery name="Holiday" picturePath="Pics/Holiday">
<image source="pic1.jpg" thumb="th1.jpg" title="Earth"/>
</gallery>
<gallery name="Juniper" picturePath="Pics/Juniper">
<image source="pic1.jpg" thumb="th1.jpg" title="flower"/>
</gallery>
That is about it for now. If anyone has a heavily commented .fla of this version I would love to read through it. Right now this stuff is a little over my head. Thanks!
Here is my full source code for anyone who wishes to read through it.
var tnNr;
spacing = 10;
container._alpha = 0;
var curLength;
MovieClip.prototype.loadPic = function(pic, id) {
info.text = "";
this._alpha = 0;
this.loadMovie(pic);
temp = this._parent.createEmptyMovieClip("temp2", 998);
temp.onEnterFrame = function() {
var t = container.getBytesTotal(), l = container.getBytesLoaded();
bar._visible = 1;
per = Math.round((l/t)*100);
if (per == "Nan"){
per = 0
}
if (Math.round(l/t) == 1 && container._width != 0 && container._height != 0) {
var w = container._width+spacing, h = container._height+spacing;
border.resizeMe(w, h, id);
bar._visible = 0;
loadText.text = "";
delete this.onEnterFrame;
}
else {
bar._width = per;//gives the bar a max width 100
loadText.text = per+" % loaded";
}
};
};
MovieClip.prototype.resizeMe = function(w, h, id) {
var speed = 3;
container._alpha = 0;
this.onEnterFrame = function() {
this._width += (w-this._width)/speed;
this._height += (h-this._height)/speed;
if (Math.abs(this._width-w)<1 && Math.abs(this._height-h)<1) {
this._width = w;
this._height = h;
container._x = this._x-this._width/2+spacing/2;
container._y = this._y-this._height/2+spacing/2;
info._y = Math.round(this._y+this._height/2+spacing/2);
container._alpha += 5;
if (container._alpha>90) {
info.text = id;
container._alpha = 100;
delete this.onEnterFrame;
}
}
};
};
function galleryChoice(q) {
pArray = new Array();
tArray = new Array();
iArray = new Array();
my_xml = new XML();
for (var j = 0; j<curLength; j++) {
this.scroll.th_nav["thmb"+j].removeMovieClip();
}
my_xml.ignoreWhite = true;
my_xml.onLoad = function(loaded) {
if (loaded) {
gallery = this.firstChild.childNodes[q];
curLength = gallery.childNodes.length;
for (var i = 0; i<gallery.childNodes.length; i++) {
pArray.push(gallery.childNodes*.attributes.source);
tArray.push(gallery.childNodes*.attributes.thumb);
iArray.push(gallery.childNodes*.attributes.title);
}
}
delay = setInterval(makeButtons, 50);
};
my_xml.load("gallery.xml");
}
prevb.onRelease = function() {
cur--;
if (cur<0) {
containerMC.loadPic(pArray.length-1);
} else {
containerMC.loadPic(cur);
}
};
nextb.onRelease = function() {
cur++;
if (cur > pArray.length-1) {
container.loadPic(pArray[0], iArray[0]);
} else {
container.loadPic(pArray[0], iArray[0]);
}
};
function makeButtons() {
tnNr = 0;
clearInterval(delay);
for (var i = 0; i<tArray.length; i++) {
var thb = scroll.th_nav.thmb.duplicateMovieClip("thmb"+i, 1000+i);
thb.id = i;
thb._x = i%3*50;
thb._y = Math.floor(i/3)*50;
}
loadButtons();
}
function loadButtons() {
var tbox = scroll.th_nav["thmb"+tnNr].box;
tbox.loadMovie(tArray[tnNr]);
temp = this.createEmptyMovieClip("tmp"+tnNr, 999);
temp.onEnterFrame = function() {
bt = tbox.getBytesTotal();
bl = tbox.getBytesLoaded();
if (bt == bl && bt>4) {
nextButton();
delete this.onEnterFrame;
}
};
}
function nextButton() {
if (tnNr<tArray.length-1) {
tnNr++;
loadButtons();
} else {
activateButtons();
}
}
function activateButtons() {
mainButtons();
for (var i = 0; i<pArray.length; i++) {
var but = scroll.th_nav["thmb"+i];
but.id = i;
but.onRelease = function() {
container.loadPic(pArray[this.id], iArray[this.id]);
disButtons2(this.id);
};
}
container.loadPic(pArray[0], iArray[0]);
disButtons2(0);
}
butArray = new Array();
butArray = ["gal1_btn", "gal2_btn", "gal3_btn", "gal4_btn"];
function mainButtons() {
for (var i = 0; i<butArray.length; i++) {
this[butArray*].id = i;
this[butArray*].onRelease = function() {
galleryChoice(this.id);
disButtons(this.id);
};
}
}
function disButtons2(d) {
for (var i = 0; i<tArray.length; i++) {
if (i != d) {
this.scroll.th_nav["thmb"+i].enabled = 1;
this.scroll.th_nav["thmb"+i].box._alpha = 100;
} else {
this.scroll.th_nav["thmb"+i].enabled = 0;
this.scroll.th_nav["thmb"+i].box._alpha = 50;
}
}
}
function disButtons(d) {
for (var i = 0; i<butArray.length; i++) {
if (i != d) {
this[butArray*].enabled = 1;
this[butArray*].gotoAndStop(1);
} else {
this[butArray*].enabled = 0;
this[butArray*].gotoAndStop(2);
}
}
}
disButtons(0);
galleryChoice(0);
