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 = "";
}

score 1 · Accepted Answer · answered Jun 16 '13 at 11:20

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

Thanks, but thumbnails links don't work for me. The whole script must be in tag — Phillip, Jun 16 '13 at 12:05
I just tested it and, strangely, one of these 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? But your solution is better, though... — Phillip, Jun 16 '13 at 12:39
Thanks, its fixed now. But there is still one problem. After thumbnail is clicked and then "prev" or "next", the image, which should be shown, is skipped. — Phillip, Jun 16 '13 at 19:52

Image arrays with thumbnails using display property in JavaScript

1 Answers1