Using next/back button along with thumbnails

Question

Please Help! I cannot figure out how to get the back/next buttons to work with the thumbnails. For instance if I click on the 4th thumbnail then hit next/back it skips and goes to the 2nd or 12th image. I know my scripting is wrong but I just can't figure it out. I also want the next/back buttons to loop.
Can anyone please help me.
Thank you for your time,
stop();
next_btn.addEventListener(MouseEvent.CLICK, nextimage);
var imageNumber:Number = 1;
function checkNumber():void{
next_btn.visible = true;
back_btn.visible = true;
//If the imageNumber is = 12, then do something...
if(imageNumber==12){
  trace(imageNumber);
//if the imageNumber is = 1, then don't show the back button
if(imageNumber==1){
  trace(imageNumber);
checkNumber();
function nextimage(evtObj:MouseEvent):void {
//Adding number to the current value +1
imageNumber++;
UILoader_courand.source="portfolio/large/Courand/Courand_"+imageNumber+".jpg";
checkNumber();
back_btn.addEventListener(MouseEvent.CLICK, backimage);
function backimage(evtObj:MouseEvent):void {
//Subract 1 from the current value
imageNumber--;
UILoader_courand.source="portfolio/large/Courand/Courand_"+imageNumber+".jpg";
checkNumber();
aboutProject_btn.addEventListener(MouseEvent.CLICK, aboutclick);
function aboutclick(evtObj:MouseEvent) {
trace("Courand Desc was clicked");
gotoAndStop("Courand Desc");
var thumbLoader:Loader = new Loader();
thumbLoader.load(new URLRequest("portfolio/thumbs/Courand/courandThumb1.jpg"));
thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
function thumbLoaded(event:Event):void {
allThumbnails.addChild(thumbLoader);
thumbLoader.addEventListener(MouseEvent.CLICK, loadMainImage1);
function loadMainImage1(event:MouseEvent):void {
  UILoader_courand.source="portfolio/large/Courand/Courand_1.jpg";
var thumbLoader2:Loader = new Loader();
thumbLoader2.load(new URLRequest("portfolio/thumbs/Courand/courandThumb2.jpg"));
thumbLoader2.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded2);
function thumbLoaded2(event:Event):void {
allThumbnails.addChild(thumbLoader2);
thumbLoader2.x=70;
allThumbnails.buttonMode=true;
thumbLoader2.addEventListener(MouseEvent.CLICK, loadMainImage2);
function loadMainImage2(event:MouseEvent):void {
  UILoader_courand.source="portfolio/large/Courand/Courand_2.jpg";
var thumbLoader3:Loader = new Loader();
thumbLoader3.load(new URLRequest("portfolio/thumbs/Courand/courandThumb3.jpg"));
thumbLoader3.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded3);
function thumbLoaded3(event:Event):void {
allThumbnails.addChild(thumbLoader3);
thumbLoader3.x=140;
allThumbnails.buttonMode=true;
thumbLoader3.addEventListener(MouseEvent.CLICK, loadMainImage3);
function loadMainImage3(event:MouseEvent):void {
  UILoader_courand.source="portfolio/large/Courand/Courand_3.jpg";
var thumbLoader4:Loader = new Loader();
thumbLoader4.load(new URLRequest("portfolio/thumbs/Courand/courandThumb4.jpg"));
thumbLoader4.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded4);
function thumbLoaded4(event:Event):void {
allThumbnails.addChild(thumbLoader4);
thumbLoader4.x=210;
allThumbnails.buttonMode=true;
thumbLoader4.addEventListener(MouseEvent.CLICK, loadMainImage4);
function loadMainImage4(event:MouseEvent):void {
  UILoader_courand.source="portfolio/large/Courand/Courand_4.jpg";
var thumbLoader5:Loader = new Loader();
thumbLoader5.load(new URLRequest("portfolio/thumbs/Courand/courandThumb5.jpg"));
thumbLoader5.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded5);
function thumbLoaded5(event:Event):void {
allThumbnails.addChild(thumbLoader5);
thumbLoader5.x=280;
allThumbnails.buttonMode=true;
thumbLoader5.addEventListener(MouseEvent.CLICK, loadMainImage5);
function loadMainImage5(event:MouseEvent):void {
  UILoader_courand.source="portfolio/large/Courand/Courand_5.jpg";
var thumbLoader6:Loader = new Loader();
thumbLoader6.load(new URLRequest("portfolio/thumbs/Courand/courandThumb6.jpg"));
thumbLoader6.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded6);
function thumbLoaded6(event:Event):void {
allThumbnails.addChild(thumbLoader6);
thumbLoader6.x=350;
allThumbnails.buttonMode=true;
thumbLoader6.addEventListener(MouseEvent.CLICK, loadMainImage6);
function loadMainImage6(event:MouseEvent):void {
  UILoader_courand.source="portfolio/large/Courand/Courand_6.jpg";
var thumbLoader7:Loader = new Loader();
thumbLoader7.load(new URLRequest("portfolio/thumbs/Courand/courandThumb7.jpg"));
thumbLoader7.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded7);
function thumbLoaded7(event:Event):void {
allThumbnails.addChild(thumbLoader7);
thumbLoader7.x=420;
allThumbnails.buttonMode=true;
thumbLoader7.addEventListener(MouseEvent.CLICK, loadMainImage7);
function loadMainImage7(event:MouseEvent):void {
  UILoader_courand.source="portfolio/large/Courand/Courand_7.jpg";
var thumbLoader8:Loader = new Loader();
thumbLoader8.load(new URLRequest("portfolio/thumbs/Courand/courandThumb8.jpg"));
thumbLoader8.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded8);
function thumbLoaded8(event:Event):void {
allThumbnails.addChild(thumbLoader8);
thumbLoader8.x=490;
allThumbnails.buttonMode=true;
thumbLoader8.addEventListener(MouseEvent.CLICK, loadMainImage8);
function loadMainImage8(event:MouseEvent):void {
  UILoader_courand.source="portfolio/large/Courand/Courand_8.jpg";
var thumbLoader9:Loader = new Loader();
thumbLoader9.load(new URLRequest("portfolio/thumbs/Courand/courandThumb9.jpg"));
thumbLoader9.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded9);
function thumbLoaded9(event:Event):void {
allThumbnails.addChild(thumbLoader9);
thumbLoader9.x=560;
allThumbnails.buttonMode=true;
thumbLoader9.addEventListener(MouseEvent.CLICK, loadMainImage9);
function loadMainImage9(event:MouseEvent):void {
  UILoader_courand.source="portfolio/large/Courand/Courand_9.jpg";
var thumbLoader10:Loader = new Loader();
thumbLoader10.load(new URLRequest("portfolio/thumbs/Courand/courandThumb10.jpg"));
thumbLoader10.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded10);
function thumbLoaded10(event:Event):void {
allThumbnails.addChild(thumbLoader10);
thumbLoader10.y=70;
allThumbnails.buttonMode=true;
thumbLoader10.addEventListener(MouseEvent.CLICK, loadMainImage10);
function loadMainImage10(event:MouseEvent):void {
  UILoader_courand.source="portfolio/large/Courand/Courand_10.jpg";
var thumbLoader11:Loader = new Loader();
thumbLoader11.load(new URLRequest("portfolio/thumbs/Courand/courandThumb11.jpg"));
thumbLoader11.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded11);
function thumbLoaded11(event:Event):void {
allThumbnails.addChild(thumbLoader11);
thumbLoader11.x=70;
thumbLoader11.y=70;
allThumbnails.buttonMode=true;
thumbLoader11.addEventListener(MouseEvent.CLICK, loadMainImage11);
function loadMainImage11(event:MouseEvent):void {
  UILoader_courand.source="portfolio/large/Courand/Courand_11.jpg";
var thumbLoader12:Loader = new Loader();
thumbLoader12.load(new URLRequest("portfolio/thumbs/Courand/courandThumb12.jpg"));
thumbLoader12.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded12);
function thumbLoaded12(event:Event):void {
allThumbnails.addChild(thumbLoader12);
thumbLoader12.x=140;
thumbLoader12.y=70;
allThumbnails.buttonMode=true;
thumbLoader12.addEventListener(MouseEvent.CLICK, loadMainImage12);
function loadMainImage12(event:MouseEvent):void {
  UILoader_courand.source="portfolio/large/Courand/Courand_12.jpg";

Answer 1

Hi Tapash,
You are probably right. However - I have been reading the User Guide back button chapter twice now - and still not sure what the problem is.
I think, that for this purpose, you can consider my page as a very simple application - a search page with a search result table. Admit that I am not an OAF back button expert yet, but I wonder - this must be a very common problem to all OAF pages with a search / result table, not a problem specific to my application.
My page is almost built out-of-the-box, except that I have a SingleSelection added to the result table. I have very little custom code in my processRequest, it looks like this:
public void processRequest(OAPageContext pageContext, OAWebBean webBean)
super.processRequest(pageContext, webBean);
OATableBean table = (OATableBean)webBean.findIndexedChildRecursive("ResultsRN");
table.setTableSelectionText("Set Item number, then Select Equipment and...");
table.setSelectionDisabledBindingAttr("DisableApproval");
The page works fine after navigating back from the home page - except for the standard Next/Previous links in the results table. If I click the search button - for instance - a new search is being done ok.
Appreciate if you can share an example what is needed to support back button in such a simple page.
Thanks,
Søren Moss