How to dynamically change images using Metaio

I have just start learning Metaio. I am working on a simple development test project.

I have so far made the tracking sheet, put image and two arrows (buttons) which means next image and previous image.

For testing I made one of the buttons to display the image and the other for hiding the image. All this works fine so far.

My question is when I added extra images how can I shift the images dynamically back and forward using my next and previous buttons?

My testing code:

button2.onTouchStarted = function () {
    image1.hide();
};

button1.onTouchStarted = function () {
    image1.display();
};

It can be done different ways, I suggest you to use arel.Scene.getObject and put your image names inside array and each time you click next or previous you count the array key up or down.

I assume you are using Metaio Creator editor.

You have to added codes 3 different places:

Previous (left arrow button)

button1.onTouchStarted = function () {  
    if (currentImageIndex == firstImageIndex) {
        return;
    }
    arel.Scene.getObject(imageArray[currentImageIndex]).hide();
    currentImageIndex--;
    arel.Scene.getObject(imageArray[currentImageIndex]).display();
    globalsVar['currentImageIndex'] = currentImageIndex;

};

Next (right arrow button)

button2.onTouchStarted = function () {
    if (currentImageIndex == lastImageIndex) {
        return;
    }
    arel.Scene.getObject(imageArray[currentImageIndex]).hide();
    currentImageIndex++;
    arel.Scene.getObject(imageArray[currentImageIndex]).display();
    globalsVar['currentImageIndex'] = currentImageIndex;
};

On your Global Script

var imageArray = ["image1", "image2"]; // and so on extra image names
var firstImageIndex = 0;
var lastImageIndex = imageArray.length - 1;
var currentImageIndex = firstImageIndex;
globalsVar = {};

arel.Scene.getObject(imageArray[currentImageIndex]).display();