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 12 of 12
  1. #1
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Question Tab Gallery onclick event

    I was trying to help someone on another forum and seem to have run into a brick wall.

    The main problem that has got me stumped at the moment is that clicking on the images in the 1st tab work fine.
    However the subsequent tab selections and clicks do not change the "bigImage" correctly (not at all).
    Perhaps some other more experienced forum members can identify what I doing wrong at this time.

    I believe it is in my set-up of the onclick events in the "onload=" section, but I not the best at this event stuff yet!
    Code:
      var sel, tmp, elem;
      var j=0;
      for (var i=0; i<imgGroupArray.length; ++i) {
        sel = document.getElementById('imgGroup'+i).getElementsByTagName('img');
        while (elem=sel[j++]) { elem.onclick = function() { setBigImage(this.src); } }
      }
    Here is the full code that 'almost' works:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Tab Gallery </title>
    
    <style type="text/css">
    li { display:inline; list-style-type:none; border:1px solid blue; margin:3px; }
    .imgBlock { display:none; }
    </style>
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=250787
    
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgGroupArray = [
        ['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'],
        ['61.jpg','62.jpg','63.jpg','64.jpg','65.jpg']  // NOTE: No comma after last entry
    ];
    
    function tabGroup(which) {
      var sel = document.getElementById('imgGroup').getElementsByTagName('div');
      for (var i=0; i<sel.length; ++i) {
        sel[i].style.display = 'none';
      }
      var tmp = 'imgGroup'+which;  // alert(tmp);
      document.getElementById(tmp).style.display = 'block';
    }
    
    function setBigImage(info) {    // alert(info);
      document.getElementById('bigImage').src = info;
    }
    window.onload = function() {
      var img;
      for (var i=0; i<imgGroupArray.length; ++i) {
        for (var j=0; j<imgGroupArray[i].length; ++j) {
          img = document.createElement('img');
          img.setAttribute('src', baseURL+imgGroupArray[i][j]);
          img.setAttribute('height','100px');
          img.setAttribute('width','75px');
          document.getElementById('imgGroup'+i).appendChild(img);
        }
      }
    
    // Following modified from:
    // http://www.codingforums.com/showthread.php?t=102896&highlight=addevent+onclick
      var sel, tmp, elem;
      var j=0;
      for (var i=0; i<imgGroupArray.length; ++i) {
        sel = document.getElementById('imgGroup'+i).getElementsByTagName('img');
        while (elem=sel[j++]) { elem.onclick = function() { setBigImage(this.src); } }
      }
    
      tabGroup(0);
    }
    
    </script>
    
    </head>
    <body>
    <div id="tabMenu">
     <div style="float:left">
      <li onclick="tabGroup(0)">Tab 1</li>
      <li onclick="tabGroup(1)">Tab 2</li>
      <li onclick="tabGroup(2)">Tab 3</li>
      <li onclick="tabGroup(3)">Tab 4</li>
      <li onclick="tabGroup(4)">Tab 5</li>
      <li onclick="tabGroup(5)">Tab 6</li>
     </div><br>
     <div id="imgGroup"
      style="width:300px; height:300px; border:1px solid red; float:left">
      <div id="imgGroup0" class="imgBlock"></div>
      <div id="imgGroup1" class="imgBlock"></div>
      <div id="imgGroup2" class="imgBlock"></div>
      <div id="imgGroup3" class="imgBlock"></div>
      <div id="imgGroup4" class="imgBlock"></div>
      <div id="imgGroup5" class="imgBlock"></div>
     </div>
     <div id="bigImageDiv"
      style="width:250px; height:300px; border:1px solid red; float:left;">
       <img id="bigImage" src="" alt="bigImage here!">
     </div>
     <br style="clear:both">
    </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Tab Gallery </title>
    
    <style type="text/css">
    li { display:inline; list-style-type:none; border:1px solid blue; margin:3px; }
    .imgBlock { display:none; }
    </style>
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=250787
    
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgGroupArray = [
        ['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'],
        ['61.jpg','62.jpg','63.jpg','64.jpg','65.jpg']  // NOTE: No comma after last entry
    ];
    
    function tabGroup(which) {
      var sel = document.getElementById('imgGroup').getElementsByTagName('div');
      for (var i=0; i<sel.length; ++i) {
        sel[i].style.display = 'none';
      }
      var tmp = 'imgGroup'+which;  // alert(tmp);
      document.getElementById(tmp).style.display = 'block';
    }
    
    function setBigImage(info) {    // alert(info);
      document.getElementById('bigImage').src = info;
    }
    window.onload = function() {
      var img;
      for (var i=0; i<imgGroupArray.length; ++i) {
        for (var j=0; j<imgGroupArray[i].length; ++j) {
          img = document.createElement('img');
          img.setAttribute('src', baseURL+imgGroupArray[i][j]);
          img.setAttribute('height','100px');
          img.setAttribute('width','75px');
          document.getElementById('imgGroup'+i).appendChild(img);
          img.onclick = function() { setBigImage(this.src); }
        }
      }
    
    
      tabGroup(0);
    }
    
    </script>
    
    </head>
    <body>
    <div id="tabMenu">
     <div style="float:left">
      <li onclick="tabGroup(0)">Tab 1</li>
      <li onclick="tabGroup(1)">Tab 2</li>
      <li onclick="tabGroup(2)">Tab 3</li>
      <li onclick="tabGroup(3)">Tab 4</li>
      <li onclick="tabGroup(4)">Tab 5</li>
      <li onclick="tabGroup(5)">Tab 6</li>
     </div><br>
     <div id="imgGroup"
      style="width:300px; height:300px; border:1px solid red; float:left">
      <div id="imgGroup0" class="imgBlock"></div>
      <div id="imgGroup1" class="imgBlock"></div>
      <div id="imgGroup2" class="imgBlock"></div>
      <div id="imgGroup3" class="imgBlock"></div>
      <div id="imgGroup4" class="imgBlock"></div>
      <div id="imgGroup5" class="imgBlock"></div>
     </div>
     <div id="bigImageDiv"
      style="width:250px; height:300px; border:1px solid red; float:left;">
       <img id="bigImage" src="" alt="bigImage here!">
     </div>
     <br style="clear:both">
    </div>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    TiK (09-04-2011)

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Thumbs up

    Thank you Vic.

    Seems like such a small change but it sure made a big difference.
    I thought I had tried a variation of that, but your's, unlike my efforts, does work!

  • #4
    TiK
    TiK is offline
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Brooklyn
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi. Great code!! This code is perfect for what I'd like do with my portfolio site! Is it possible to have an image populate the image box when you first click on any tab? Thanks in advance. TiK

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    TiK (09-04-2011)

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Lightbulb

    Quote Originally Posted by TiK View Post
    Hi. Great code!! This code is perfect for what I'd like do with my portfolio site! Is it possible to have an image populate the image box when you first click on any tab? Thanks in advance. TiK
    Vic has a nicer presentation with all the CSS goodies,
    but if you just need the quick and dirty method,
    just add the following to the last line of the
    "tabgroup(which)" function

    Code:
      document.getElementById('bigImage').src = baseURL+imgGroupArray[which][0];
    This makes the bigImage show as the first image
    of any tab group change.

  • Users who have thanked jmrker for this post:

    TiK (09-04-2011)

  • #7
    TiK
    TiK is offline
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Brooklyn
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile

    Thank you both for your recommendations!! Thank you so much Vic, I like the addition of the arrows to move back and forward between the images in the tabs! That's exactly what I'm trying to do! The images seem to be jangling around a bit thou. I don't necessarily need the images to move forward automatically. Is there a way to go back to your original code, add jmrker's fix, then add functionality to move back and forward between the images in each array using the arrows? Thank you again in advance!! TiK

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    I hope J.Marker does not mind

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Tab Gallery </title>
    
    <style type="text/css">
    li { display:inline; list-style-type:none; border:1px solid blue; margin:3px; }
    .imgBlock { display:none; }
    </style>
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=250787
    
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgGroupArray = [
        ['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'],
        ['61.jpg','62.jpg','63.jpg','64.jpg','65.jpg']  // NOTE: No comma after last entry
    ];
    
    function tabGroup(which) {
      var sel = document.getElementById('imgGroup').getElementsByTagName('div');
      for (var i=0; i<sel.length; ++i) {
        sel[i].style.display = 'none';
      }
      var tmp = document.getElementById('imgGroup'+which);  // alert(tmp);
      tmp.style.display = 'block';
      Step.imgs=tmp.getElementsByTagName('IMG');
      Step.cnt=0;
      document.getElementById('bigImage').src = baseURL+imgGroupArray[which][0];
    }
    
    function Step(ud) {
     var imgs=Step.imgs,lgth=imgs.length-1,ud=typeof(ud)=='number'&&ud<0?-1:1,cnt=Step.cnt,cnt=cnt+ud,cnt=cnt<0?lgth:cnt>lgth?0:cnt;
     document.getElementById('bigImage').src = imgs[cnt].src;
     Step.cnt=cnt;
    }
    
    function setBigImage(info) {    // alert(info);
      document.getElementById('bigImage').src = info;
    }
    window.onload = function() {
      var img;
      for (var i=0; i<imgGroupArray.length; ++i) {
        for (var j=0; j<imgGroupArray[i].length; ++j) {
          img = document.createElement('img');
          img.setAttribute('src', baseURL+imgGroupArray[i][j]);
          img.setAttribute('height','100px');
          img.setAttribute('width','75px');
          document.getElementById('imgGroup'+i).appendChild(img);
          img.onclick = function() { setBigImage(this.src); }
        }
      }
    
    
      tabGroup(0);
    }
    
    </script>
    
    </head>
    <body>
    
    <input type="button" name="" value="Forward" onmouseup="Step(1);" />
    <input type="button" name="" value="Back" onmouseup="Step(-1);" />
    <div id="tabMenu">
     <div style="float:left">
      <li onclick="tabGroup(0)">Tab 1</li>
      <li onclick="tabGroup(1)">Tab 2</li>
      <li onclick="tabGroup(2)">Tab 3</li>
      <li onclick="tabGroup(3)">Tab 4</li>
      <li onclick="tabGroup(4)">Tab 5</li>
      <li onclick="tabGroup(5)">Tab 6</li>
     </div><br>
     <div id="imgGroup"
      style="width:300px; height:300px; border:1px solid red; float:left">
      <div id="imgGroup0" class="imgBlock"></div>
      <div id="imgGroup1" class="imgBlock"></div>
      <div id="imgGroup2" class="imgBlock"></div>
      <div id="imgGroup3" class="imgBlock"></div>
      <div id="imgGroup4" class="imgBlock"></div>
      <div id="imgGroup5" class="imgBlock"></div>
     </div>
     <div id="bigImageDiv"
      style="width:250px; height:300px; border:1px solid red; float:left;">
       <img id="bigImage" src="" alt="bigImage here!">
     </div>
     <br style="clear:both">
    </div>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Thumbs up

    Quote Originally Posted by vwphillips View Post
    I hope J.Marker does not mind

    Code:
    ...
    Not in the least!
    The more help the merrier.

  • #10
    TiK
    TiK is offline
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Brooklyn
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you both!!

    Here's what it looks like: Rawopulence.com.
    I've noticed a small issue with Firefox. The popup windows are opening about 20 pixels to the right of center...I'm guessing this problem is in the csspopup2.js file. The tab categories seem to be loading a bit slowly too--but that could just be my computer. If you have any suggestions, I'd appreciate it.

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Question

    Quote Originally Posted by TiK View Post
    Thank you both!!

    Here's what it looks like: Rawopulence.com.
    I've noticed a small issue with Firefox. The popup windows are opening about 20 pixels to the right of center...I'm guessing this problem is in the csspopup2.js file. The tab categories seem to be loading a bit slowly too--but that could just be my computer. If you have any suggestions, I'd appreciate it.
    I don't see the tab gallery code at that site. Did you type it right?

  • #12
    TiK
    TiK is offline
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Brooklyn
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Jmrker,

    The tabs are there--just on the bottom. Just solved the centering issue! Thank you for your help!!
    Last edited by TiK; 09-15-2011 at 04:57 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
    •