adding a next() and prev() function to a random image

[hottubsunshine]

I have a random image code that i need to add a next() and prev() function to.

Thank you

 var lastIndex = -1;

    function randimage() {
        var currIndex = lastIndex;
        while (currIndex == lastIndex) {
            currIndex = Math.floor(Math.random() * image.length);
        }
        lastIndex = currIndex;
        return image[currIndex];
    }

    views.cardsStart = function (viewName, viewConfig, callback) {
        var view = new View();
        view.title = "Vc";

        var contents = [];
        contents.push(
            new Container([



                new Caption("<div id='clickback' class='left'><img width='330' height='367' src='" + randimage() + "' /></div>"),


            ])

        );

[jscheuer1]

There's not enough code there to do anything on a page. To add a next and previous button to it we would need to see more code, preferably the full code. Even better, see it in action.

Please post a link to the page on your site that contains the problematic code so we can check it out.

[hottubsunshine]

Here is all of the code for this section :

var currentdate = 0
    var core = 0

    function StringArray(n) {
        this.length = n;
        for (var i = 1; i <= n; i++) {
            this[i] = ' '

        }
    }

    image = new StringArray(61)
    image[0] = 'img/cardz/Acceptance-front.jpg'
    image[1] = 'img/cardz/simplicity-front.jpg'
    image[2] = 'img/cardz/awe-front.jpg'
    image[3] = 'img/cardz/caring-front.jpg'
    image[4] = 'img/cardz/steadfastness-front.jpg'
    image[5] = 'img/cardz/stregnth-front.jpg'
    image[6] = 'img/cardz/thoughtfulness-front.jpg'
    image[7] = 'img/cardz/trust-front.jpg'
    image[8] = 'img/cardz/understanding-front.jpg'
    image[9] = 'img/cardz/unity-front.jpg'
    image[10] = 'img/cardz/fidelity-front.jpg'
    image[11] = 'img/cardz/generosity-front.jpg'
    image[12] = 'img/cardz/gentleness-front.jpg'
    image[13] = 'img/cardz/humanity-front.jpg'
    image[14] = 'img/cardz/hope-front.jpg'
    image[15] = 'img/cardz/initiative-front.jpg'
    image[16] = 'img/cardz/joyfulness-front.jpg'
    image[17] = 'img/cardz/kindness-front.jpg'
    image[18] = 'img/cardz/love-front.jpg'
    image[19] = 'img/cardz/loyalty-front.jpg'
    image[20] = 'img/cardz/clenliness-front.jpg'
    image[21] = 'img/cardz/confidence-front.jpg'
    image[22] = 'img/cardz/cooperation-front.jpg'
    image[23] = 'img/cardz/creativity-front.jpg'
    image[24] = 'img/cardz/determination-front.jpg'
    image[25] = 'img/cardz/devotion-front.jpg'
    image[26] = 'img/cardz/enthusiasm-front.jpg'
    image[27] = 'img/cardz/faithfullness-front.jpg'
    image[28] = 'img/cardz/friendliness-front.jpg'
    image[29] = 'img/cardz/helpfulness-front.jpg'
    image[30] = 'img/cardz/cooperation-front.jpg'
    image[31] = 'img/cardz/flexibility-front.jpg'
    image[32] = 'img/cardz/kindness-front.jpg'
    image[33] = 'img/cardz/mercy-front.jpg'
    image[34] = 'img/cardz/modesty-front.jpg'
    image[35] = 'img/cardz/serenity-front.jpg'
    image[36] = 'img/cardz/resilience-front.jpg'
    image[37] = 'img/cardz/modesty-front.jpg'
    image[38] = 'img/cardz/openess-front.jpg'
    image[39] = 'img/cardz/orderliness-front.jpg'
    image[40] = 'img/cardz/perceptiveness-front.jpg'
    image[41] = 'img/cardz/righteousness-front.jpg'
    image[42] = 'img/cardz/trustworthiniess-front.jpg'
    image[43] = 'img/cardz/tolerance-front.jpg'
    image[44] = 'img/cardz/optimism-front.jpg'
    image[45] = 'img/cardz/excellence-front.jpg'
    image[46] = 'img/cardz/decisiveness-front.jpg'
    image[47] = 'img/cardz/courtesy-front.jpg'
    image[48] = 'img/cardz/faith-front.jpg'
    image[49] = 'img/cardz/joyfulness-front.jpg'
    image[50] = 'img/cardz/steadfastness-front.jpg'
    image[51] = 'img/cardz/contentment-front.jpg'
    image[52] = 'img/cardz/idealism-front.jpg'
    image[53] = 'img/cardz/initiative-front.jpg'
    image[54] = 'img/cardz/purity-front.jpg'
    image[55] = 'img/cardz/commitment-front.jpg'
    image[56] = 'img/cardz/justice-front.jpg'
    image[57] = 'img/cardz/nobility-front.jpg'
    image[58] = 'img/cardz/openess-front.jpg'
    image[59] = 'img/cardz/prayerfulness-front.jpg'
    image[60] = 'img/cardz/nobility-front.jpg'

    var ran = 60 / image.length

    var lastIndex = -1;

    function randimage() {
        var currIndex = lastIndex;
        while (currIndex == lastIndex) {
            currIndex = Math.floor(Math.random() * image.length);
        }
        lastIndex = currIndex;
        return image[currIndex];
    }

    views.cardsStart = function (viewName, viewConfig, callback) {
        var view = new View();
        view.title = "VC";

        var contents = [];
        contents.push(
            new Container([



                new Caption("<div id='clickback' class='left'><img width='330' height='367' src='" + randimage() + "' /></div>"),


            ])

        );


        stateManager.userAccessedUpliftingContent();
        view.contents = new Card(contents);
        view.name = viewName;
        view.config = viewConfig;
        callback.call(this, null, view);

    };

[jscheuer1]

There's still not enough information. If you don't realize that, you might not understand enough to take advantage of what I can tell you, which is that here:

new Caption("<div id='clickback' class='left'><img width='330' height='367' src='" + randimage() + "' /></div>"),

an img element in a div element with an id of clickback are created and presumably added to the page somehow. It shows a random image. A next function would presumably show the next image in order, a previous one the previous in order. Like so:

function nextImage(){
	document.getElementById('clickback').getElementsByTagName('img')[0].src = image[(++lastIndex + image.length) % image.length];
}
function prevImage(){
	document.getElementById('clickback').getElementsByTagName('img')[0].src = image[(--lastIndex + image.length) % image.length];
}

But that's standard javascript (your code shows that either some extension to javascript is being used, and/or that some functions are being introduced, some of which are not shown in the code). The code for these two functions I've just written makes no attempt to create the buttons and/or any other interface to execute those functions, and assumes there is a standard document element and that the standard basic javascript rules apply to it.

Technically though I've provided a solution to:

need to add a next() and prev() function

and you may well be able to work with that.

[hottubsunshine]

Almost got it to work.. Thank you for your help inspiration

[jscheuer1]

Great! And I didn't mean to be so standoffish about it. Reading back to what I wrote, I think I really came off that way, sorry.

If I knew more about how:

new Caption("<div id='clickback' class='left'><img width='330' height='367' src='" + randimage() + "' /></div>")

ends up on the screen as a seen image, we could perhaps use the Caption function to put a button or link for each function on the screen as well.

It might be as simple as:

var lastIndex = -1;

    function randimage() {
        var currIndex = lastIndex;
        while (currIndex == lastIndex) {
            currIndex = Math.floor(Math.random() * image.length);
        }
        lastIndex = currIndex;
        return image[currIndex];
    }

	function nextImage(){
		document.getElementById('clickback').getElementsByTagName('img')[0].src = image[(++lastIndex + image.length) % image.length];
	}
	function prevImage(){
		document.getElementById('clickback').getElementsByTagName('img')[0].src = image[(--lastIndex + image.length) % image.length];
	}

    views.cardsStart = function (viewName, viewConfig, callback) {
        var view = new View();
        view.title = "Vc";

        var contents = [];
        contents.push(
            new Container([

                new Caption("<div id='clickback' class='left'><img width='330' height='367' src='" + randimage() + "' /></div>" +
                "<div><a href='#' onclick='prevImage(); return false;'>Previous</a> " +
                "<a href='#' onclick='nextImage(); return false;'>Next</a></div>"),

            ])

        );