Hi folks…
i just got that Image resize gallery by scotty and modified it to my needs…
u´ll find a preview here: http://daniel.eyedea.net/phocus/
There are just 2 little problems left for me.
If i click on a thumb to load the next image, i don´t want to disappear the actual image, and leave the container blank till the next image is loaded.
What i want for a smoother transition is that when i click on a thumb, the actually displayed image´s opacity is set to…dunno 50% or what, and a “loader” appears… (no loading bar with percentage and stuff…) just a simple “image is loading” or apple style rotating thingy u know?
i want some actions on the thumbs when i mouseover them… little bit fadeout and maybe a small “click”… same here with the main navigation.
and here comes my code:
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();
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);
delete this.onEnterFrame;
}
};
};
MovieClip.prototype.fade = function (speed) //custom fade in/out
{
this.onEnterFrame = function ()
{
if (this._alpha > 0)
{
this._alpha -= speed;
}
else
{
delete this.onEnterFrame;
}
};
};
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;
phocus._y = Math.round(this._y-this._height/1.5-22);
deco._y = Math.round(this._y-this._height/1.5-30);
gal1_btn._y = Math.round(this._y-this._height/1.5+spacing/3);
gal2_btn._y = Math.round(this._y-this._height/1.5+spacing/3);
gal3_btn._y = Math.round(this._y-this._height/1.5+spacing/3);
gal4_btn._y = Math.round(this._y-this._height/1.5+spacing/3);
scroll._y = Math.round(this._y+this._height/2+spacing+20);
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");
}
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%50*50;
thb._y = Math.floor(i/50)*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*].onRollOver = function () {
this._alpha = 10;
}
this[butArray*].onRollOut = function () {
this._alpha = 100;
}
this[butArray*].onRelease = function() {
this._alpha = 100;
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);
scroll.dragger.useHandCursor = false;
