Results 1 to 6 of 6

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

  1. #1
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

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

    Thank you
    Code:
     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>"),
    
    
                ])
    
            );
    Last edited by jscheuer1; 01-18-2012 at 05:09 AM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default hard to see it in action since it is for a mobile app

    Here is all of the code for this section :

    Code:
    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);
    
        };
    Last edited by jscheuer1; 01-18-2012 at 06:01 AM. Reason: Format

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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:

    Code:
    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.
    Last edited by jscheuer1; 01-18-2012 at 05:12 PM. Reason: minor code improvement
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default thank you

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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:

    Code:
    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>"),
    
                ])
    
            );
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •