Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    38
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Slideshow Using Two Dimensional Arrays

    Hello all;

    I am trying to use two dimensional arrays to create a grid-like slideshow. I have working code for a slideshow using one array, however I was wondering if it is at all possible to move the slideshow in all four directions (instead of just left and right). Here is the code for the left/right slideshow script:

    Code:
    <script type="text/javascript">
    var present_slide=0;
    
    var images = ["../images/overworld/04-8m.png","../images/overworld/04-8n.png","../images/overworld/04-8o.png","../images/overworld/04-8p.png","../images/overworld/04-8q.png","../images/overworld/04-8r.png","../images/overworld/04-8s.png"]
    
    objImage = new Image();
    
    function download(img_src) {
        objImage.src = images[img_src];
    }
    
    function displaynext(shift) {
        present_slide = present_slide + shift;
        
        if(images.length > present_slide && present_slide >= 0) {
            document.images["im"].src = images[present_slide];
            var next_slide = present_slide + 1;
            download(next_slide); // Download the next image 
        }
    
        if(present_slide + 1 >= images.length ) {
            document.f1.Next.style.visibility = "hidden";
            present_slide = images.length - 1;
        }
        else {
            document.f1.Next.style.visibility = "visible";
        }
    
        if(present_slide <= 0 ) {
            document.f1.Prev.style.visibility = "hidden";
            present_slide = 0;
        }
        else {
            document.f1.Prev.style.visibility = "visible";}
        }
    </script>
    </head>
    <body onload="displaynext(0)">
        <form name="f1">
        <img name="im" />
            <div class="arrow-nav">
            <input type="button" style="background:url(../images/arrow-left.png);" name="Prev" onClick="displaynext(-1);" />
            <input type="button" style="background:url(../images/arrow-right.png); float:right;" name="Next" onClick="displaynext(1);" />
            </div>
        </form>
    One way that I am thinking that this might work is if I create multiple row arrays and navigate them using up and down arrow keys. So, clicking left and right within the array will navigate through the contained images, and the up and down arrows will navigate through the arrays. Please let me know if this idea can be possibly implemented or if there is another way to do this. Thank you.

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Myrmidon16 View Post
    ...So, clicking left and right within the array will navigate through the contained images, and the up and down arrows will navigate through the arrays.
    A starting point - the left and right buttons slide the images along the current row of the 2D array and the up/down buttons slide up and down the rows in the current column in the 2D array.

    You can have an equal or variable number of images in each row of picPaths without having to alter the javascript.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #imgSS {
                    display: none;
                    width: 200px;
                }
            </style>
            <script type="text/javascript">
                var picPaths = [
                    ['num1.jpg'],
                    ['num4.jpg','num5.jpg'],
                    ['num7.jpg','num8.jpg','num9.jpg']
                ];
                //preload the images
                var picsO = [];
                for(i=0; i<picPaths.length; i++){
                    picsO[i] = [];
                    for(j=0; j<picPaths[i].length; j++){
                        picsO[i][j] = new Image();
                        picsO[i][j].src = picPaths[i][j];
                    }
                }
                function moveLeftRight(dirn) {
                    curCol += dirn;
                    if(curCol < 0){curCol = 0;}
                    if(curCol == picsO[curRow].length){curCol = picsO[curRow].length-1;}
                    imgSSO.src = picsO[curRow][curCol].src;
                }
                function moveUpDown(dirn) {
                    var destRow = curRow + dirn;
                    if(destRow < 0){destRow = 0;}
                    if(destRow >= picsO.length){destRow = picsO.length-1;}
                    while(curCol >= picsO[destRow].length) {//haven't found an image in next row yet'
                        if(destRow == 0 || destRow == picsO.length-1){break;}
                        destRow += dirn;
                    }
                    if(curCol < picsO[destRow].length){ //there is an image in the destination row for the current column
                        curRow = destRow;
                    }
                    imgSSO.src = picsO[curRow][curCol].src;
                }
                window.onload=function(){
                    //set the buttons/ onclicks
                    document.getElementById('btnLeft').onclick=function(){
                        moveLeftRight(-1);
                    }
                    document.getElementById('btnRight').onclick=function(){
                        moveLeftRight(1);
                    }
                    document.getElementById('btnUp').onclick=function(){
                        moveUpDown(-1);
                    }
                    document.getElementById('btnDown').onclick=function(){
                        moveUpDown(1);
                    }
                    //set the initial image in the slideshow
                    curRow = 0; curCol = 0;
                    imgSSO = document.getElementById('imgSS');
                    imgSSO.src = picsO[curRow][curCol].src;
                    imgSSO.style.display = 'inline';
                }
            </script>
        </head>
        <body>
            <div>
                <img id="imgSS" src="" alt="" />
            </div>
            <div>
                <button id="btnLeft">Left</button>
                <button id="btnRight">Right</button>
                <button id="btnUp">Up</button>
                <button id="btnDown">Down</button>
            </div>
        </body>
    </html>
    Last edited by webdev1958; 03-16-2012 at 06:12 AM.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,029
    Thanks
    36
    Thanked 495 Times in 489 Posts

    Lightbulb

    Alternate solution (because 'webdev1958' types faster than me).
    Code:
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=254195
    
    var imgPtrUpDown = 0;
    var imgPtrLeftRight = 0;
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = [
        ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'],
        ['21.jpg','22.jpg','23.jpg','24.jpg','25.jpg'],
        ['31.jpg','32.jpg','33.jpg','34.jpg','35.jpg'],
        ['41.jpg','42.jpg','43.jpg','44.jpg','45.jpg'],
        ['51.jpg','52.jpg','53.jpg','54.jpg','55.jpg']
    ];
    function $_(IDS) { return document.getElementById(IDS); }
    function moveImg(direction) {
      switch (direction) {
        case 'Up'   :  imgPtrUpDown--; break;
        case 'Down' :  imgPtrUpDown++; break;
        case 'Left' :  imgPtrLeftRight--; break;
        case 'Right':  imgPtrLeftRight++; break;
      }
      if (imgPtrUpDown < 0) { imgPtrUpDown = 0; }
      if (imgPtrUpDown > imgList.length-2) { imgPtrUpDown = imgList.length-2; }
      if (imgPtrLeftRight < 0) { imgPtrLeftRight = 0; }
      if (imgPtrLeftRight > imgList[0].length-2) { imgPtrLeftRight = imgList[0].length-2; }
    
      $_('pic00').src = baseURL+imgList[imgPtrUpDown][imgPtrLeftRight];
      $_('pic01').src = baseURL+imgList[imgPtrUpDown][imgPtrLeftRight+1];
      $_('pic10').src = baseURL+imgList[imgPtrUpDown+1][imgPtrLeftRight];
      $_('pic11').src = baseURL+imgList[imgPtrUpDown+1][imgPtrLeftRight+1];
    }
    window.onload = function() {
      $_('pic00').src = baseURL+imgList[0][0];
      $_('pic01').src = baseURL+imgList[0][1];
      $_('pic10').src = baseURL+imgList[1][0];
      $_('pic11').src = baseURL+imgList[1][1];
    }
    </script>
    
    <style type="text/css">
    
    </style>
    </head>
    <body>
    <table border="0">
     <tr>
      <td>&nbsp;</td>
      <th><input type="button" value="Up" onclick="moveImg(this.value)"></th>
      <td>&nbsp;</td>
     </tr>
     <tr>
      <td><input type="button" value="Left" onclick="moveImg(this.value)"></td>
      <td>
       <div id="imgDiv" style="height:104px;width:154px;border:1px solid red">
        <img id="pic00" src="" style="height:50px;width:75px">
        <img id="pic01" src="" style="height:50px;width:75px"><br>
        <img id="pic10" src="" style="height:50px;width:75px">
        <img id="pic11" src="" style="height:50px;width:75px">
       </div>
      </td>
      <td><input type="button" value="Right" onclick="moveImg(this.value)"></td>
     </tr>
     <tr>
     <tr>
      <td>&nbsp;</td>
      <th><input type="button" value="Down" onclick="moveImg(this.value)"></th>
      <td>&nbsp;</td>
     </tr>
    </table>
    </body>
    </html>
    Last edited by jmrker; 03-16-2012 at 03:21 AM. Reason: Modified for esthetics.

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by jmrker View Post
    Alternate solution (because 'webdev1958' types faster than me).
    I've tweaked my original code so that you now don't have to have the same number of images in each row of the array.

    @jmrker - especially since your images are coming from another site, I would recommend you preload your images first - just some food for thought
    Last edited by webdev1958; 03-16-2012 at 04:21 AM.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,029
    Thanks
    36
    Thanked 495 Times in 489 Posts

    Arrow

    Quote Originally Posted by webdev1958 View Post
    I've tweaked my original code so that you now don't have to have the same number of images in each row of the array.

    @jmrker - especially since your images are coming from another site, I would recommend you preload your images first - just some food for thought
    They are not coming from another site when I test.
    My assumption is that OP would have images on their own site as well.
    Might be a problem with larger images or more of them, so I'll consider the preload when it starts to slow down the operations.

    I'm not sure I like your unequal row count display as the user may think it is not working if they try to go L/R when original display occurs. Works fine for your design, but just not my cup of tea...

    I may have mis-understood the OP as I though they wanted to display more than one image at a time, hence the 2x2 (which could be modified for more or less).

  • #6
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by jmrker View Post

    I'm not sure I like your unequal row count display as the user may think it is not working if they try to go L/R when original display occurs. Works fine for your design, but just not my cup of tea...
    Originally my code handled only an equal number of images in each row. After I tweaked it, the op can now have either an equal number or variable number of images in each row. The code has more flexibility now imo. The demo I posted has a variable number of images in each row.

    Out of curiosity I ran your code (below) as well to see what it does, but I had to substitute my own images so I could make sense of what was happening when I clicked something. It wasn't clear to me using your images.

    I substituted my own array and baseURL (blue bit) into your code (below) for testing

    Code:
                
    <html>
        <head>
            <title> Untitled </title>
            <script type="text/javascript">
                // From: http://www.codingforums.com/showthread.php?t=254195
    
                var imgPtrUpDown = 0;
                var imgPtrLeftRight = 0;
                var baseURL = './';
                var imgList = [
                    ['num1.jpg','num2.jpg','num3.jpg'],
                    ['num4.jpg','num5.jpg','num6.jpg'],
                    ['num7.jpg','num8.jpg','num9.jpg']
                ];
                function $_(IDS) { return document.getElementById(IDS); }
                function moveImg(direction) {
                    switch (direction) {
                        case 'Up'   :  imgPtrUpDown--; break;
                        case 'Down' :  imgPtrUpDown++; break;
                        case 'Left' :  imgPtrLeftRight--; break;
                        case 'Right':  imgPtrLeftRight++; break;
                    }
                    if (imgPtrUpDown < 0) { imgPtrUpDown = 0; }
                    if (imgPtrUpDown > imgList.length-2) { imgPtrUpDown = imgList.length-2; }
                    if (imgPtrLeftRight < 0) { imgPtrLeftRight = 0; }
                    if (imgPtrLeftRight > imgList[0].length-2) { imgPtrLeftRight = imgList[0].length-2; }
    
                    $_('pic00').src = baseURL+imgList[imgPtrUpDown][imgPtrLeftRight];
                    $_('pic01').src = baseURL+imgList[imgPtrUpDown][imgPtrLeftRight+1];
                    $_('pic10').src = baseURL+imgList[imgPtrUpDown+1][imgPtrLeftRight];
                    $_('pic11').src = baseURL+imgList[imgPtrUpDown+1][imgPtrLeftRight+1];
                }
                window.onload = function() {
                    $_('pic00').src = baseURL+imgList[0][0];
                    $_('pic01').src = baseURL+imgList[0][1];
                    $_('pic10').src = baseURL+imgList[1][0];
                    $_('pic11').src = baseURL+imgList[1][1];
                }
            </script>
    
            <style type="text/css">
    
            </style>
        </head>
        <body>
            <table border="0">
                <tr>
                    <td>&nbsp;</td>
                    <th><input type="button" value="Up" onclick="moveImg(this.value)"></th>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td><input type="button" value="Left" onclick="moveImg(this.value)"></td>
                    <td>
                        <div id="imgDiv" style="height:104px;width:154px;border:1px solid red">
                            <img id="pic00" src="" style="height:50px;width:75px">
                            <img id="pic01" src="" style="height:50px;width:75px"><br>
                            <img id="pic10" src="" style="height:50px;width:75px">
                            <img id="pic11" src="" style="height:50px;width:75px">
                        </div>
                    </td>
                    <td><input type="button" value="Right" onclick="moveImg(this.value)"></td>
                </tr>
                <tr>
                <tr>
                    <td>&nbsp;</td>
                    <th><input type="button" value="Down" onclick="moveImg(this.value)"></th>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </body>
    </html>
    I didn't touch the rest of your code. When I open your page I got in my IE9 what you can see in the attached screen dump (jpg).

    I would have expected to see the images in numerical order. I don't see number 3 initially
    Attached Thumbnails Attached Thumbnails Slideshow Using Two Dimensional Arrays-grid_ss.jpg  
    Last edited by webdev1958; 03-16-2012 at 06:17 AM.

  • #7
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    ok, I think I'm just about done playing/tinkering with this one.

    In the original version (post 2) if there are unequal number of images in the rows, then when up/down in clicked, "the pointer" would move up/down until it found an image in another row for the current column. If no image was found the pointer would not move.

    In this "final" version, when up/down is clicked the pointer moves up/down 1 row and if there is no image in the current column in the new row, "the pointer" moves to the column of yhe last image in that row and displays that image.

    You can still have either an equal number or variable number of images in each row of picPaths without having to alter the rest of the javascript.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #imgSS {
                    display: none;
                    width: 200px;
                }
            </style>
            <script type="text/javascript">
                var picPaths = [
                    ['num1.jpg','num2.jpg','num3.jpg'],
                    ['num4.jpg','num5.jpg'],
                    ['num7.jpg']
                ];
                //preload the images
                var picsO = [];
                for(i=0; i<picPaths.length; i++){
                    picsO[i] = [];
                    for(j=0; j<picPaths[i].length; j++){
                        picsO[i][j] = new Image();
                        picsO[i][j].src = picPaths[i][j];
                    }
                }
                function moveLeftRight(dirn) {
                    curCol += dirn;
                    if(curCol < 0){curCol = 0;}
                    if(curCol == picsO[curRow].length){curCol = picsO[curRow].length-1;}
                    imgSSO.src = picsO[curRow][curCol].src;
                }
                function moveUpDown(dirn) {
                    curRow += dirn;
                    if(curRow < 0){curRow = 0;}
                    if(curRow >= picsO.length){curRow = picsO.length-1;}
                    if(curCol >= picsO[curRow].length){// goto last image in the destination row
                        curCol = picsO[curRow].length-1;
                    }
                    imgSSO.src = picsO[curRow][curCol].src;
                }
                window.onload=function(){
                    //set the buttons/ onclicks
                    document.getElementById('btnLeft').onclick=function(){
                        moveLeftRight(-1);
                    }
                    document.getElementById('btnRight').onclick=function(){
                        moveLeftRight(1);
                    }
                    document.getElementById('btnUp').onclick=function(){
                        moveUpDown(-1);
                    }
                    document.getElementById('btnDown').onclick=function(){
                        moveUpDown(1);
                    }
                    //set the initial image in the slideshow
                    curRow = 0; curCol = 0;
                    imgSSO = document.getElementById('imgSS');
                    imgSSO.src = picsO[curRow][curCol].src;
                    imgSSO.style.display = 'inline';
                }
            </script>
        </head>
        <body>
            <div>
                <img id="imgSS" src="" alt="" />
            </div>
            <div>
                <button id="btnLeft">Left</button>
                <button id="btnRight">Right</button>
                <button id="btnUp">Up</button>
                <button id="btnDown">Down</button>
            </div>
        </body>
    </html>
    Last edited by webdev1958; 03-16-2012 at 07:26 AM.

  • #8
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by jmrker View Post
    I'm not sure I like your unequal row count display as the user may think it is not working if they try to go L/R when original display occurs.
    The reason I set the code up to optionally allow unequal number of images in each row is because in the "real world" each row could be images from different events and it is unlikely you would have the same number of images that you want to display for each event.

    For each row, whether you loop back to the start/end when one of the ends is reached is a personal choice and is only a minor tweak in the code to set it up for either option.

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,029
    Thanks
    36
    Thanked 495 Times in 489 Posts

    Exclamation

    Quote Originally Posted by webdev1958 View Post
    ...
    Out of curiosity I ran your code (below) as well to see what it does, but I had to substitute my own images so I could make sense of what was happening when I clicked something. It wasn't clear to me using your images.

    I substituted my own array and baseURL (blue bit) into your code (below) for testing

    Code:
                
    ...
                var baseURL = './';
                var imgList = [
                    ['num1.jpg','num2.jpg','num3.jpg'],
                    ['num4.jpg','num5.jpg','num6.jpg'],
                    ['num7.jpg','num8.jpg','num9.jpg']
                ];
    ...
                        <div id="imgDiv" style="height:104px;width:154px;border:1px solid red">
                            <img id="pic00" src="" style="height:50px;width:75px">
                            <img id="pic01" src="" style="height:50px;width:75px"><br>
                            <img id="pic10" src="" style="height:50px;width:75px">
                            <img id="pic11" src="" style="height:50px;width:75px">
                        </div>
    ...
    I didn't touch the rest of your code. When I open your page I got in my IE9 what you can see in the attached screen dump (jpg).

    I would have expected to see the images in numerical order. I don't see number 3 initially
    With my baseURL I'm not having any problem with the display with FF or Chrome.
    I will test using my MSIE version when I get home ... I use an iMac at work.
    Were my images not displaying at all?
    My design was for a 2x2 (modifiable) display which may account for the loss of your #3 image as it should only display1-2 and 2-3 (with L/R clicks).
    Your test used only 9 images while mine was tested using 25 so that I could seen an actual change.

    When I tested your code, I too had to modify the array since I could not view your images.
    I would be happy to look into your observation of the actions of my post, but to use your images, I need a 'baseURL' to reference.
    PM me if you wish to keep the 'baseURL' hidden
    or drop the thread if you have lost interest since the OP has not commented on our efforts since his/her original post.

  • #10
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    My replies are in red

    Quote Originally Posted by jmrker View Post
    Were my images not displaying at all?

    A. Yes they displayed but because of their content I couldn't tell if the correct images were coming up when I clicked something. I use images with numbers on them (as per posted jpg) for testing things like this so it is then easy for me to check if the correct image is appearing in "animations".

    My design was for a 2x2 (modifiable) display which may account for the loss of your #3 image as it should only display1-2 and 2-3 (with L/R clicks).

    A. I opened your page afterwards in FF10 and the 2x2 layout rendered correctly. I suspect that you using tables for layout and browsers handling tables differently is the probable cause for the layout in my IE9 as posted in my jpg. Maybe a good example of why tables should not be used for layout

    Your test used only 9 images while mine was tested using 25 so that I could seen an actual change.

    A. for demo purposes I originally had a 3x3 array of images. The demo I posted can handle any number of rows and unequal number of images in each row of picPaths without having to alter the rest of the javascript.


    When I tested your code, I too had to modify the array since I could not view your images.

    A. I'm not surprised. The images are on my pc only . For demo purposes in forums like this I have a set of images with numbers on them that are in the same folder as the web page.
    Last edited by webdev1958; 03-17-2012 at 12:29 AM.


  •  

    Posting Permissions

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