# Add Next Prev button to gallery

**URL:** <https://forum.kirupa.com/t/add-next-prev-button-to-gallery/319161>\
**Category:** flash\
**Created:** [February 10, 2011, 3:14pm UTC](https://forum.kirupa.com/t/add-next-prev-button-to-gallery/319161 "2011-02-10T15:14:33Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ratanjaiswal](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@ratanjaiswal](https://forum.kirupa.com/u/ratanjaiswal)\
**Post date:** [February 10, 2011, 3:14pm UTC](https://forum.kirupa.com/t/add-next-prev-button-to-gallery/319161/1 "2011-02-10T15:14:33Z")

</div>

Hi,

I have followed a tutorial and completed a gallery which works fine but i want to add a next and prev button but cant have it can any one help me with the code

here is my code

//set the initial postitions/properties of every thing.  
scroller.prevBtn.\_visible = true;  
scroller.nextBtn.\_visible = true;  
mtClip.\_alpha = 0;  
if (nav == “nobuttons”) {  
scroller.\_x = 30;  
scroller.mask.\_x = 30;  
scroller.mask.\_width = Stage.width;  
scroller.container.\_x = Stage.width/2;  
scroller.counterText.\_x = Stage.width/2;  
} else {  
scroller.\_x = Stage.width/2-365;  
}  
//media.\_x = Stage.width;  
//media.\_y = 0;  
preloader\_mc.\_x = Stage.width/2;  
preloader\_mc.\_y = Stage.height/2-50;  
counterText\_mc.\_y = Stage.height-120;  
counterText\_mc.\_x = Stage.width/2;  
scroller.\_y = Stage.height-100;  
mainBox.\_x = Stage.width/2-mainBox.\_width/2;  
mainBox.\_y = Stage.height/2-mainBox.\_height/2-50;  
//mainBackground.\_x = 0;  
//mainBackground.\_y = 0;  
nextBtn.\_x = Math.round((Stage.width/2)-100);  
prevBtn.\_x = 30;  
nextBtn.\_y = Stage.height/2;  
prevBtn.\_y = Stage.height/2;;

timer\_mc.\_x = 18;  
timer\_mc.\_y = 18;  
//mainBackground.\_width = Stage.width;  
//mainBackground.\_height = Stage.height;  
infoBox.\_x = Math.floor(Stage.width/2);  
infoBox.\_y = 13;  
infoBox.useHandCursor = false;  
mainBox.\_visible = false;  
mainBox.\_width = 1;  
mainBox.\_height = 1;  
// define the stage resize events  
var sl:Object = new Object();  
sl.onResize = function() {  
if (nav == “nobuttons”) {  
scroller.mask.\_width = Stage.width-100;  
if (scroller.container.\_width\>Stage.width-100) {  
scroller.setRollOver();  
} else {  
scroller.container.tween("\_x", Stage.width/2-scroller.container.\_width/2, stageResizeTweenSpeed, stageResizeTween);  
delete scroller.onEnterFrame;  
}  
} else {  
scroller.tween("\_x", Stage.width/2-365, stageResizeTweenSpeed, stageResizeTween);  
}  
preloader\_mc.tween("\_y", Stage.height/2-50, stageResizeTweenSpeed, stageResizeTween);  
preloader\_mc.tween("\_x", Stage.width/2, stageResizeTweenSpeed, stageResizeTween);  
counterText\_mc.tween("\_y", Stage.height-120, stageResizeTweenSpeed, stageResizeTween);  
counterText\_mc.tween("\_x", Stage.width/2, stageResizeTweenSpeed, stageResizeTween);  
scroller.tween("\_y", Stage.height-100, 0, stageResizeTween);  
/////////////////////////////////////////////////////////////////////////////////////////////////////////////   
resizeReset();  
w = mtClip.\_width;  
h = mtClip.\_height;  
if(w!=0&&h!=0)  
{  
scaler = scalerf(w,h);  
if(scaler!=100)  
{  
mtClip.\_xscale = scaler;  
mtClip.\_yscale = scaler;  
}  
}

```
		var mainBoxX:Number = mtClip._x-imageBorder;
		var mainBoxY:Number = mtClip._y-imageBorder;
		var mainBoxW:Number = mtClip._width+imageBorder*2;
		var mainBoxH:Number = mtClip._height+imageBorder*2;
		mainBox._width = mainBoxW;
		mainBox._height = mainBoxH;
		mainBox._x = mainBoxX;
		mainBox._y = mainBoxY;

```

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////   
mainBox.tween("\_x", Stage.width/2-mainBox.\_width/2, stageResizeTweenSpeed, stageResizeTween);  
mainBox.tween("\_y", Stage.height/2-mainBox.\_height/2-10, stageResizeTweenSpeed, stageResizeTween);  
mtClip.tween("\_x", Stage.width/2-mtClip.\_width/2, stageResizeTweenSpeed, stageResizeTween);  
mtClip.tween("\_y", Stage.height/2-mtClip.\_height/2-10, stageResizeTweenSpeed, stageResizeTween);  
infoBox.tween("\_x", Math.floor(Stage.width/2), stageResizeTweenSpeed, stageResizeTween);  
infoBox.\_y = 13;  
mainBackground.\_x = 0;  
mainBackground.\_y = 0;  
mainBackground.\_width = Stage.width;  
mainBackground.\_height = Stage.height;  
media.\_x = Stage.width;  
media.\_y = 0;  
};  
Stage.addListener(sl);  
sl.onResize();  
// define the vars  
var frwrd:Boolean = true;  
var pictures:Array = new Array();  
var thumbs:Array = new Array();  
var p:Number = -1;  
var z:Number;  
var clickCount:Number = 0;  
var howMclick:Number;  
var slideCount:Number = -1;  
var images:Array = new Array();  
var numOfBtns:Array = new Array();  
var xml:XML = new XML();  
var fadeOut:Boolean;  
var setIt:Boolean = false;  
var playFast:Boolean;  
var nextImage;  
var mainColor;  
var nextLink;  
var currentImage = 0;  
// set the colors  
var btnPBGcolor:Color = new Color(scroller.prevBtn.bg);  
btnPBGcolor.setRGB(btnBgColor);  
var btnNBGcolor:Color = new Color(scroller.nextBtn.bg);  
btnNBGcolor.setRGB(btnBgColor);  
var btnPcolor:Color = new Color(scroller.prevBtn.arrows);  
btnPcolor.setRGB(btnArrowColor);  
var btnNcolor:Color = new Color(scroller.nextBtn.arrows);  
btnNcolor.setRGB(btnArrowColor);  
var mainBoxColor:Color = new Color(mainBox);  
mainBoxColor.setRGB(mainImageColor);  
var infoBoxColor:Color = new Color(infoBox.bg);  
infoBoxColor.setRGB(infoColor);  
var mainBGColor:Color = new Color(mainBackground);  
mainBGColor.setRGB(mainBgColor);  
var hoverBGColor:Color = new Color(follow\_mc.followBg);  
hoverBGColor.setRGB(hoverBgColor);  
//Load the XML and set all the arrays, blah blah blah…  
xml.ignoreWhite = true;  
xml.onLoad = function(ok) {  
if (ok) {  
allData = this.firstChild.childNodes;  
for (var i = 0; i\<allData.length; i++) {  
var newBut:MovieClip = scroller.container.attachMovie(“thumbMC”, “thumb”+i, i);  
//var bgcolor:Color = new Color(newBut.thumbBg);  
[//bgcolor.setRGB](https://bgcolor.setRGB)(thBgColor);  
var preloaderColor:Color = new Color(newBut.bar);  
preloaderColor.setRGB(barColor);  
newBut.bgColor = allData\*.attributes.color;  
newBut.descript = allData\*.firstChild.firstChild;  
newBut.image = allData\*.firstChild.nextSibling.nextSibling.firstChild;  
newBut.link = allData\*.firstChild.nextSibling.nextSibling.nextSibling.firstChild;  
trace(newBut.link)  
thumbs.push(allData\*.firstChild.nextSibling.firstChild);  
pictures.push(allData\*.firstChild.nextSibling.nextSibling.firstChild);  
numOfBtns\* = “but”+i;  
newBut.slideCounter = i;  
newBut.\_visible = false;  
newBut.endY = -1;  
newBut.endX = i\*(100);  
if (nav == “buttons”) {  
newBut.\_x = i\*(100);  
} else {  
mewBut.\_x = 0;  
}  
howMclick = Math.floor(scroller.container.\_width/700);  
newBut.onRelease = function() {  
checkThumbs();  
if (showSlide == false) {  
slideCount = this.slideCounter;  
}  
infoBox.infoText.text = this.descript;  
nextImage = this.image;  
mainColor = this.bgColor;  
nextLink = this.link;  
fadeOut = true;  
fadeMain();  
this.enabled = false;  
};  
newBut.onRollOver = function() {  
this.thumbClip.fadeIn = true;  
this.thumbClip.fade();  
};  
newBut.onRollOut = function() {  
this.thumbClip.fadeIn = false;  
this.thumbClip.fade();  
};  
}  
// when all done with above caca, load the first thumb  
if (showShow == true) {  
playFast = true;  
timer\_mc.onRelease();  
firstLoad = false;  
}  
nextPic();  
}  
};  
// slide the info box down  
function slideInfo(targY) {  
infoBox.tween("\_y", targY, .5, “easeOutQuad”, 0);  
}  
infoBox.onRollOver = function() {  
slideInfo(185);  
};  
infoBox.onRollOut = infoBox.onReleaseOutside=function () {  
slideInfo(13);  
};  
////load each thumb incrementaliy  
// Step one, check to see if p is less than pictures array  
function nextPic() {  
p++;  
if (p\<pictures.length) {  
moveThumbs();  
if (setIt == true) {  
scroller.setRollOver();  
}  
if (p\>6 && nav == “buttons”) {  
scroller.prevBtn.\_visible = true;  
scroller.nextBtn.\_visible = true;  
}  
} else {  
counterText\_mc.loadingText.text = “”;  
}  
}  
// Step two, call the function to show the thumb  
function moveThumbs() {  
var but:MovieClip = scroller.container[“thumb”+p];  
but.showThumbs();  
}  
// Step three, show the thumb by sliding it up or blinking it in. After its showing, preload the image  
MovieClip.prototype.showThumbs = function() {  
if (nav == “buttons”) {  
if (navani == “slide”) {  
this.\_y = 120;  
this.\_x = this.endX;  
this.\_visible = true;  
this.tween("\_y", this.endY, thumbUpTweenSpeed, upEaseType, 0, loadThumbs);  
}  
if (navani == “blink”) {  
this.\_visible = true;  
this.\_y = this.endY;  
loadThumbs();  
}  
} else if (nav == “nobuttons”) {  
if (navani == “slide”) {  
this.\_visible = true;  
this.\_y = 120;  
this.\_x = this.endX;  
scroller.container.tween("\_x", Stage.width/2-scroller.container.\_width/2, .5, “easeOutQuad”);  
this.tween("\_y", this.endY, thumbUpTweenSpeed, upEaseType, 0, loadThumbs);  
if (this.\_x\>Stage.width-this.\_width) {  
setIt = true;  
}  
}  
if (navani == “blink”) {  
this.\_visible = true;  
this.\_y = 0;  
this.\_x = this.endX;  
scroller.container.tween("\_x", Stage.width/2-scroller.container.\_width/2, .5, “easeOutQuad”);  
loadThumbs();  
if (this.\_x\>Stage.width+this.\_width) {  
setIt = true;  
}  
}  
}  
};  
// load the thumb image  
function loadThumbs() {  
var but:MovieClip = scroller.container[“thumb”+p];  
but.thumbClip.loadMovie(thumbs[p]);  
var temp:MovieClip = \_root.createEmptyMovieClip(“temp”+p, p);  
counterText\_mc.loadingText.text = (p+1)+" / "+pictures.length;  
temp.onEnterFrame = function() {  
BL = but.thumbClip.getBytesLoaded();  
BT = but.thumbClip.getBytesTotal();  
percent = Math.round(BL/BT\*100);  
but.bar.gotoAndStop(percent);  
if (BL == BT && but.thumbClip.\_width\>1 && but.thumbClip.\_height\>1) {  
but.bar.gotoAndStop(1);  
but.thumbClip.\_width = 80;  
but.thumbClip.\_height = 80;  
if (firstLoad == 1) {  
but.onRelease();  
but.fadeIn = true;  
but.thumbClip.\_alpha = 100;  
firstLoad = false;  
currentImage = this.id;  
} else {  
but.fadeIn = false;  
but.thumbClip.fade();  
}  
nextPic();  
delete temp.onEnterFrame;

```
	}
};

```

}

//re-enable the disabled thumb button when another is clicked  
function checkThumbs() {  
for (var j = 0; j\<=numOfBtns.length; j++) {  
var theThumb:MovieClip = scroller.container[“thumb”+j];  
if (theThumb.enabled == false) {  
theThumb.enabled = true;  
theThumb.thumbClip.fadeIn = false;  
theThumb.thumbClip.fade();  
}  
}  
}  
// fade IN/OUT the thumb image on rollOver rollOut  
MovieClip.prototype.fade = function() {  
if (this.fadeIn == true) {  
this.tween("\_alpha", 100, .5, “easeOutQuad”);  
} else {  
this.tween("\_alpha", 30, .5, “easeOutQuad”);  
}  
};  
/_loadMain image. Even though it already preloaded in the thumb,  
we want to make sure its there before we reveal it, plus we need to make sure all the other crap happens_/  
function loadMainImage() {  
//////////////////////////////////////////////////////////////////////////////   
resizeReset(); ///////  
//////////////////////////////////////////////////////////////////////////////   
mtClip.loadMovie(nextImage);  
var temp:MovieClip = \_root.createEmptyMovieClip(“temp”, 99999);  
preloader\_mc.\_visible = true;  
temp.onEnterFrame = function() {  
IL = mtClip.getBytesLoaded();  
IT = mtClip.getBytesTotal();  
percentage = Math.round(IL/IT_100);  
preloader\_mc.gotoAndPlay(percentage);  
trace(percentage);  
////////////////////////////////////////////////////////////////////////////   
w = mtClip.\_width;  
h = mtClip.\_height;  
if(w!=0&&h!=0)  
{  
scaler = scalerf(w,h);  
if(scaler!=100)  
{  
mtClip.\_xscale = scaler;  
mtClip.\_yscale = scaler;  
}  
}  
///////////////////////////////////////////////////////////////////////////   
if (mtClip.\_width\>5 && mtClip.\_height\>5 && IL == IT) {  
if (showSlide == true) {  
timer\_mc.gotoAndPlay(2);  
}  
preloader\_mc.\_visible = false;  
preloader\_mc.gotoAndStop(1);  
mtClip.\_x = Stage.width/2-mtClip.\_width/2;  
mtClip.\_y = Stage.height/2.-mtClip.\_height/2-50;  
var mainBoxX:Number = mtClip.\_x-imageBorder;  
var mainBoxY:Number = mtClip.\_y-imageBorder;  
var mainBoxW:Number = mtClip.\_width+imageBorder_2;  
var mainBoxH:Number = mtClip.\_height+imageBorder_2;  
mainBox.tween("\_width", mainBoxW, mainBoxTweenSpeed, mainBoxType, 0);  
mainBox.tween("\_height", mainBoxH, mainBoxTweenSpeed, mainBoxType, 0);  
mainBox.tween("\_x", mainBoxX, mainBoxTweenSpeed, mainBoxType, 0);  
mainBox.tween("\_y", mainBoxY, mainBoxTweenSpeed, mainBoxType, 0);  
mainBackground.colorTo(mainColor, colorSpeed, “easeOutQuad”);  
mainBox.\_visible = true;  
fadeOut = false;  
fadeMain();  
/mtClip.onRelease = function() {  
if (nextLink != null) {  
getURL(nextLink, “\_blank”);  
}  
};/  
mtClip.onRollOver = function() {  
follow\_mc.\_visible = false;  
onMouseMove = function () {  
if (nextLink != null) {  
follow\_mc.follow\_txt.text = rollOverText;  
follow\_mc.followBg.\_width = follow\_mc.follow\_txt.\_width+5;  
} else {  
follow\_mc.follow\_txt.text = emptyNodetext;  
follow\_mc.followBg.\_width = follow\_mc.follow\_txt.\_width+5;  
}  
follow\_mc.\_x = Math.floor(\_root.\_xmouse-follow\_mc.\_width);  
follow\_mc.\_y = Math.floor(\_root.\_ymouse);  
};  
};  
mtClip.onRollOut = mtClip.onReleaseOutside=mtClip.onDragOver=function () {  
follow\_mc.\_visible = false;  
};  
delete temp.onEnterFrame;  
}  
};  
}  
// fade IN/OUT the main image  
function fadeMain() {  
if (this.fadeOut == true) {  
mtClip.tween("\_alpha", 0, fadeOutMainSpeed, “easeOutQuad”, 0, loadMainImage);  
} else {  
mtClip.tween("\_alpha", 100, fadeInMainSpeed, “easeOutQuad”, 0);  
}  
}  
//slide the thumbs left or right if set to “buttons”  
function slideMain() {  
var overlap:Number = .03;  
var count:Number = 0;  
var decount:Number = pictures.length;  
if (frwrd == true) {  
for (z=0; z\<decount; z++) {  
var ending:Number = scroller.container[“thumb”+z].endX-700;  
count++;  
scroller.container[“thumb”+z].tween("\_x", ending, thumbSlideTweenSpeed, slideType, overlap_count);  
scroller.container[“thumb”+z].endX = ending;  
}  
} else {  
for (z=decount-1; z\>=0; z–) {  
var ending:Number = scroller.container[“thumb”+z].endX+700;  
count++;  
scroller.container[“thumb”+z].tween("\_x", ending, thumbSlideTweenSpeed, slideType, overlap\*count);  
scroller.container[“thumb”+z].endX = ending;  
}  
}  
}  
// slide show function  
function slideShow() {  
slideCount++;  
if (showSlide == true) {  
if (slideCount == pictures.length) {  
slideCount = 0;  
}  
var butCount:MovieClip = scroller.container[“thumb”+slideCount];  
butCount.onRelease();  
butCount.thumbClip.\_alpha = 100;  
}  
}  
//button actions  
scroller.nextBtn.onRelease = function() {  
var m:Number = pictures.length;  
var buts:MovieClip = scroller.container[“thumb”+(m-1)];  
if (clickCount\<howMclick) {  
clickCount++;  
frwrd = true;  
slideMain();

```
}

```

};  
scroller.prevBtn.onRelease = function() {  
var buts:MovieClip = scroller.container[“thumb”+0];  
if (clickCount != 0) {  
clickCount–;  
frwrd = false;  
slideMain();

```
}

```

};

/_media.onRelease = function() {  
getURL(“[http://2210media.com](http://2210media.com)”, “\_blank”);  
};_/  
/_timer\_mc.onRelease = function() {  
if (showSlide == false) {  
if (playFast == true) {  
timer\_mc.gotoAndPlay(timer\_mc.\_totalframes-1);  
playFast = false;  
} else {  
timer\_mc.gotoAndPlay(2);  
}  
showSlide = true;  
timer\_mc.timerText.text = “on”;  
} else {  
timer\_mc.gotoAndStop(1);  
timer\_mc.timerText.text = “”;  
}  
};_/  
//////////////////////////////////////////////////////////////////////////////  
function scalerf(w,h){  
bigframew = Stage.width-10;  
bigframeh = Stage.height-190;  
diffw = (w-bigframew);  
diffh = (h-bigframeh);

```
if(diffw&lt;=0&&diffh&lt;=0)
{
	scaler = 1 * 100;
}
else if (diffw==Math.max(diffw,diffh)) //scale to height
{
	scaler = (bigframew/w) * 100;	
}
else if (diffh==Math.max(diffw,diffh)) //scale to width
{
	scaler = (bigframeh/h) * 100;
}
return scaler;

```

};  
function resizeReset () {  
mtClip.\_xscale = mtClip.\_yscale=100;  
}  
//////////////////////////////////////////////////////////////////////////////////////////

function nextImg()  
{  
if (currentImage \< pictures - 1)  
{  
currentImage = currentImage + 1;  
}  
else  
{  
currentImage = 0;  
} // end else if  
changeImage();  
} // End of the function  
function previousImg()  
{  
if (currentImage \> 0)  
{  
currentImage = currentImage - 1;  
}  
else  
{  
currentImage = numOfImages - 1;  
} // end else if  
changeImage();  
} // End of the function

left\_btn.onRelease = previousImg();  
right\_btn.onRelease = nextImg();

// fire it all off! BAM!  
xml.load(“interior.xml”);