Image arrays with thumbnails using display property in JavaScript

Question

I just want to upgrade image arrays using JavaScript. I added thumbnails below, So larger image can be displayed when thumbail is clicked. The problem happens after I click "prev" or "next" (after click on the thumbail), the current image is not hidden and the next or pevious image is shown on its rigt side. Sometimes it does right, sometimes not...please help if you can. Thank you in advance.

<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

<script type="text/javascript">
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 = "";
}

Answer 1

well..., I came up with this solution :

html+style

<div id="bigImages" style="height:550px; overflow:hidden;">
    <div class="image" style="display:table-cell;  vertical-align:middle;"><img src="http://www.livehacking.com/web/wp-content/uploads/2012/08/chrome-logo-1301044215-300x300.jpg"></div>
    <div class="image" style="display:table-cell;  vertical-align:middle;"><img src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"></div>
    <div class="image" style="display:table-cell;  vertical-align:middle;"><img  src="http://html5doctor.com/wp-content/uploads/2011/01/HTML5_Logo_256.png"></div>
</div>

<a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>

<br/>

<div id="smallImages">
<a href="#" onclick=""><img class ="small" src="http://www.livehacking.com/web/wp-content/uploads/2012/08/chrome-logo-1301044215-300x300.jpg"></a>
<a href="#" onclick=""><img class ="small" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"></a>
<a href="#" onclick=""><img class ="small" src="http://html5doctor.com/wp-content/uploads/2011/01/HTML5_Logo_256.png"></a>
</div>
<style>
#smallImages img{
width:20px;    

}
</style>

script

var imgArrbig = document.getElementById('bigImages').getElementsByTagName('img');

for(var i=1; i<imgArrbig.length; i++){
imgArrbig[i].style.display = "none";
}
i=0;
document.getElementById('prev').onclick = function(){
    if(i===0){
        imgArrbig[i].style.display = "none";
        i=imgArrbig.length-1;
        imgArrbig[i].style.display = "";
    }
    else{
        imgArrbig[i].style.display = "none";
        i--;
        imgArrbig[i].style.display = "";
    }
}

document.getElementById('next').onclick = function(){
    if(i===imgArrbig.length-1){
        imgArrbig[i].style.display = "none";
        i=0;
        imgArrbig[i].style.display = "";
    }
    else{
        imgArrbig[i].style.display = "none";
        i++;
        imgArrbig[i].style.display = "";
    }
}
 rr = 0 
$('.small').each(function(){

 $(this).attr('number',''+ rr +'');
   rr = rr+1              
});
$('.small').click(function(i){
    var compare = $(this).attr('number');
    $('#bigImages img').css('display','none');
    $(imgArrbig[compare]).css('display','block');


});

Here is example