Web Analytics Made Easy -
StatCounter Tab Gallery onclick event - CodingForum

Announcement

Collapse
No announcement yet.

Tab Gallery onclick event

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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.codingforum.net/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
    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/

    Comment


    • #3
      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!

      Comment


      • #4
        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

        Comment


        • #5
          I have this Draft

          http://www.vicsjavascripts.org.uk/Ta...ow/110903B.htm
          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/

          Comment


          • #6
            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.

            Comment


            • #7
              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

              Comment


              • #8
                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/

                Comment


                • #9
                  Originally posted by vwphillips View Post
                  I hope J.Marker does not mind

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

                  Comment


                  • #10
                    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.

                    Comment


                    • #11
                      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?

                      Comment


                      • #12
                        Hi Jmrker,

                        The tabs are there--just on the bottom. Just solved the centering issue! Thank you for your help!!
                        Last edited by TiK; Sep 14, 2011, 11:57 PM.

                        Comment

                        Working...
                        X