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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image arrays with thumbnails using display property

    Hi, I made image arrays using JavaScript. I added thumbnails below, So larger image can be displayed when thumbail is clicked. one of these large images still appears on it's right side, sometimes. It happens when you click on one of the thumbnails, then click "prev" or "next". Is it possible to get rid of this problem?. Sometimes it does right, sometimes not.
    Thank you in advance.

    HTML

    Code:
    <div id="bigImages" style="height:550px; overflow:hidden;">
        <div class="image" style="display:table-cell;  vertical-align:middle;"><img src="url big image 1"></div>
        <div class="image" style="display:table-cell;  vertical-align:middle;"><img src="url big image 2"></div>
        <div class="image" style="display:table-cell;  vertical-align:middle;"><img  src="url big image 3"></div>
    </div>
    
    <a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>
    
    <br/>
    
    <div id="smallImages">
    <a href="#" onclick="show('0')"><img class ="small" src="url small image 1"></a>
    <a href="#" onclick="show('1')"><img class ="small" src="url small image 2"></a>
    <a href="#" onclick="show('2')"><img class ="small" src="url small image 3"></a>
    </div>
    Javascript

    Code:
    var imgArr = document.getElementById('bigImages').getElementsByTagName('img');
    
    for(var i=1; i<imgArr.length; i++){
    imgArr[i].style.display = "none";
    }
    i=0;
    document.getElementById('prev').onclick = function(){
        if(i===0){
            imgArr[i].style.display = "none";
            i=imgArr.length-1;
            imgArr[i].style.display = "";
        }
        else{
            imgArr[i].style.display = "none";
            i--;
            imgArr[i].style.display = "";
        }
    }
    
    document.getElementById('next').onclick = function(){
        if(i===imgArr.length-1){
            imgArr[i].style.display = "none";
            i=0;
            imgArr[i].style.display = "";
        }
        else{
            imgArr[i].style.display = "none";
            i++;
            imgArr[i].style.display = "";
        }
    }
    
    function show(dptr) {
            for (var i=0; i<imgArr.length; i++){
            imgArr[i].style.display = 'none';
        }
    
        imgArr[dptr].style.display = "";
    }

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <div id="bigImages" style="height:550px; overflow:hidden;">
        <div class="image" style="display:table-cell;  vertical-align:middle;"><img src="http://www.thomaswaltonmanor.com/images/java5.jpg"></div>
        <div class="image" style="display:table-cell;  vertical-align:middle;"><img src="http://www.thomaswaltonmanor.com/images/java6.jpg"></div>
        <div class="image" style="display:table-cell;  vertical-align:middle;"><img  src="http://www.thomaswaltonmanor.com/images/java7.jpg"></div>
    </div>
    
    <a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>
    
    <br/>
    
    <div id="smallImages">
    <a href="#" onclick="show('0')"><img class ="small" src="http://www.thomaswaltonmanor.com/images/java5.jpg" width="50"></a>
    <a href="#" onclick="show('1')"><img class ="small" src="http://www.thomaswaltonmanor.com/images/java6.jpg" width="50"></a>
    <a href="#" onclick="show('2')"><img class ="small" src="http://www.thomaswaltonmanor.com/images/java7.jpg" width="50"></a>
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    var imgArr = document.getElementById('bigImages').getElementsByTagName('img');
    
    for(var i=1; i<imgArr.length; i++){
     imgArr[i].style.display = "none";
    }
    
    i=0;
    
    function next(ud) {
     i+=ud;
     i=i>=imgArr.length?0:i<0?imgArr.length-1:i;
     show(i);
    }
    
    function show(dptr) {
     if (imgArr[dptr]){
      i=dptr;
      for (var ii=0; ii<imgArr.length; ii++){
       imgArr[ii].style.display = i!=ii?'none':'';
      }
     }
    }
    
    document.getElementById('next').onclick = function(){ next(1); }
    document.getElementById('prev').onclick = function(){ next(-1); }
    
    
    /*]]>*/
    </script></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/

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for taking your time. But there are some problems with "prev" and "next" when one of the thumbnails is clicked. Is it possible to fix that?

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <div id="bigImages" style="height:550px; overflow:hidden;">
        <div class="image" style="display:table-cell;  vertical-align:middle;"><img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif"></div>
        <div class="image" style="display:table-cell;  vertical-align:middle;"><img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif"></div>
        <div class="image" style="display:table-cell;  vertical-align:middle;"><img  src="http://www.vicsjavascripts.org.uk/StdImages/3.gif"></div>
    </div>
    
    <a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>
    
    <br/>
    
    <div id="smallImages">
    <a href="#" onclick="show(0)"><!-- you must pass a number --><img class ="small" src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" width="50"></a>
    <a href="#" onclick="show(1)"><img class ="small" src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" width="50"></a>
    <a href="#" onclick="show(2)"><img class ="small" src="http://www.vicsjavascripts.org.uk/StdImages/3.gif" width="50"></a>
    </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var imgArr = document.getElementById('bigImages').getElementsByTagName('img');
    
    for(var i=1; i<imgArr.length; i++){
     imgArr[i].style.display = "none";
    }
    
    i=0;
    
    function next(ud) {
     var nu=i+ud;
     nu=nu>=imgArr.length?0:nu<0?imgArr.length-1:nu;
     show(nu);
    }
    
    function show(nu) {
     if (imgArr[nu]){
      imgArr[i].style.display = "none";
      i=nu;
      imgArr[i].style.display = "";
     }
    }
    
    document.getElementById('next').onclick = function(){ next(1); }
    document.getElementById('prev').onclick = function(){ next(-1); }
    
    
    /*]]>*/
    </script></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/

  • #5
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I also found another solution using a little jquery, but yours is better. Thank you.


  •  

    Tags for this Thread

    Posting Permissions

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