Hi, I need to add a backward and forward button to a photo gallery I am working on, but not sure how to do it.
Here is the code:
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
name = [];
description = [];
link = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
name* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
link* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
}
} else {
content = "file not loaded!";
}
imageGallery();
//loadMeBaby();
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("template.xml");
/////////////////////////////////////
////SMOOTH XML IMAGE GALLERY TEMPLATE
////////////////////January 2007
// tween class
#include "lmc_tween.as"
//easing style
var easeStyle:String = "easeOutQuad";
//gap between page numbers
var pageNumGap:Number = 24;
//_y postition of page numbers
var yPos:Number = 252;
//_x postition of page numbers
var xPos:Number = 400;
// margin of buttons from edge
var margin:Number = 126;
// width of images
var imageWidth:Number = 559;
// preloader
var que = new Array();
var timeout = 100;
var loading = false;
var interval;
var ic;
// Adds files to the load que
function addFile(item, target) {
que.push({url:item, mc:target});
}
// load next que item
function loadFiles() {
if (que.length && !loading) {
loading = true;
ic = 0;
item = que.shift();
item.mc.loadMovie(item.url);
interval = setInterval(watchLoad, 40);
item.mc.num = i;
var galleryItems_array:Array = new Array(xmlNode.childNodes.length);
//number of page numbers generated
var pageNumbers:Number = galleryItems_array.length;
thisThumb = item.mc.num - pageNumbers;
item.mc._alpha = 0;
this["square"+thisThumb].alphaTo(100, 0.5, easeStyle,0);
holder_mc["thumb"+thisThumb+"_mc"].alphaTo(100, 0.5, easeStyle,thisThumb);
this["square"+thisThumb].enabled = true;
for (i:Number = 0; i<=item.mc.num; i++) {
//item.mc.alphaTo(100, 1, easeStyle,i*0.5);
};
square0.loading.alphaTo(0, 0.25, easeStyle,0);
}
}
// track load progress
function watchLoad() {
// get bytes loaded and total of image
var bl = item.mc.getBytesLoaded();
var bt = item.mc.getBytesTotal();
// if files has been found...
if (bt>0) {
// get percent loaded
var pct = bl/bt*100;
// if loaded then clear the interval and load the next file in the que
if (pct == 100) {
loading = false;
clearInterval(interval);
loadFiles();
}
} else if (bt == -1) {
// if timout occurs then clear interval and try the next file in the que
if (ic++ == timeout) {
trace("Error: timeout, file not found");
loading = false;
clearInterval(interval);
loadFiles();
}
}
}
// set the imageHolder, set depths and mask.
this.createEmptyMovieClip("holder_mc", 10);
holder_mc._x = 0;
holder_mc._y = 0;
contentContainer.swapDepths(11);
shadow.swapDepths(12);
holder_mc.setMask(contentContainer);
// Where the real action's going on..
function imageGallery() {
// xml array
var galleryItems_array:Array = new Array(xmlNode.childNodes.length);
//number of page numbers generated
var pageNumbers:Number = galleryItems_array.length;
// for each image in the gallery,
for (var i:Number = 0; i<=pageNumbers-1; i++) {
// create a movie clip,
clip = holder_mc.createEmptyMovieClip("thumb"+i+"_mc", i+1);
// call the addFile function, pulling the correct image in from the xml
addFile(link*, clip);
// and set the postion of the image within the holder to
// be that set by the individual number of the clip,
// mutliplied by the image width variable, set above,
// and give it a little padding.
holder_mc["thumb"+i+"_mc"]._x = (i*imageWidth)+5;
}
// call the preloader function
loadFiles();
// set the header text on the right to be the first from the xml
textHolder.headerText.text = name[0];
// likewise, set the main text to be the first
textHolder.mainText.text = description[0];
// for all the images in the gallery
textHolder.urlText.text = url[0];
// for all the images in the gallery
for(i:Number = 0; i<=pageNumbers-1; i++) {
// attach little square buttons, at their respective depths
attachMovie("square", "square" + i, this.getNextHighestDepth());
// set this particular button to a variable.
currButton = this["square"+i];
// set its unique numerical identifier
currButton.num = i;
// set each button's intial x position, calculated by the margin set by the constant, xPos
// plus that particular button's number multiplied by the gap between it and other buttons
// minus the amount needed to fit snug within the banner, calcuated by the gap required between buttons,
// multiplied by the amount of buttons.
currButton._x = xPos+(i*pageNumGap)- pageNumbers*pageNumGap;
// y position of the buttons
currButton._y = yPos;
// the actual number of the buttons, starting from 1, not 0;
var realNum:Number = i+1;
// if the number is less than ten
//if(realNum<10) {
//give it a zero on the front
//currButton.number.text = "0" + (realNum);
//} else {
// otherwise, let it be
currButton.number.text = (realNum);
//};
//make the buttons fifty percent visibility
currButton.alphaTo(10, 1, easeStyle, 0);
// on clicking this button
this["square"+i].onRelease = function() {
//make this button go back to the left, selected, initial position
this.tween('_x', 10*this.num, 1, easeStyle, 0);
// shift the image gallery by the amount set by the number of the button clicked
holder_mc.tween('_x', (this.num)*(-imageWidth), 1, easeStyle, 0);
// bring the alpha of the text panel down to sero for a second..
textHolder.alphaTo(0, 0, easeStyle, 0);
// for all the buttons
for(i:Number = 0; i<=pageNumbers-1; i++) {
currSquare = ["square"+i];
currSquare.num = i;
// if the button is greater than that clicked
if (i >= this.num) {
// shift it to the right
this._parent["square"+i].tween('_x', xPos+(i*pageNumGap) - pageNumbers*pageNumGap, 1, easeStyle, 0);
} else {
// otherwise, move it to the left
this._parent["square"+i].tween('_x', (i*pageNumGap) + margin, 1, easeStyle, 0);
}
// give all other buttons an alpha value of 75
this._parent["square"+i].alphaTo(75, 1, easeStyle, 0);
// set them to be selectable
this._parent["square"+i].enabled = true;
};
// for the button clicked, move it to the left
this.tween('_x', this.num*pageNumGap + margin, 1, easeStyle, 0);
// set its alpha to full
this.alphaTo(100, 1, easeStyle, 0);
// don't make it selectable (it's just been selected)
this.enabled = false;
// bring the text holder to full alpha
textHolder.alphaTo(100, 0.5, easeStyle, 1);
// set its header text to be that equivalent to the content of the number of its name tag in the xml
textHolder.headerText.text = name[this.num];
// and likewise, for the main text description, do the same
textHolder.mainText.text = description[this.num];
///hhh
textHolder.urlText.text = url[this.num];
};
};
// setting of initial button x position
square0._x = 126;
// set the first button to be fully lit
square0.alphaTo(100, 1, easeStyle, 0);
};
Any help would be really appreciated!
