I have a simple gallery that hides and shows images. It works fine, however, I am not satisfied with my approach, and my code seems redundant. Can you check my code and give a better idea on how I can improve it?HTML<div class=big_img_wrapper>                <img src=<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/big_img_1.JPG id=big_img_1 class=big_img>                <img src=<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/big_img_2.JPG id=big_img_2 class=big_img>                <img src=<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/big_img_3.JPG id=big_img_3 class=big_img>                <img src=<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/big_img_4.JPG id=big_img_4 class=big_img>                <img src=<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/big_img_5.JPG id=big_img_5 class=big_img>                <img src=<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/big_img_6.JPG id=big_img_6 class=big_img>            </div>            <div class=thumbs_img_wrapper>                <img src=<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_1.jpg id=thumbs_img_1 calss=thumbs_img>                <img src=<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_2.jpg id=thumbs_img_2 calss=thumbs_img>                <img src=<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_3.jpg id=thumbs_img_3 calss=thumbs_img>                <img src=<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_4.jpg id=thumbs_img_4 calss=thumbs_img>                <img src=<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_5.jpg id=thumbs_img_5 calss=thumbs_img>                <img src=<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_6.jpg id=thumbs_img_6 calss=thumbs_img>            </div>CSS.big_img_wrapper, .big_img_wrapper img{        width: 370px;        height: 246px;        /*display: none;*/    }    .thumbs_img_wrapper{        padding:0;    }    .thumbs_img_wrapper img{        width: 111px;        height: 70px;        margin: 14px 0 0 14px;    }    #thumbs_img_1, #thumbs_img_4{        margin: 14px 0 0 0;    }jQuery$(document).ready(function(){    $('img.big_img').hide(); // Hides all big images    $('img#big_img_1').fadeIn('slow'); // Serve as default image    $('img#thumbs_img_1').click(function(){        $('img.big_img').hide(); // Hides all big images        $('img#big_img_1').fadeIn('slow'); //Slowly fades in selected image    });    $('img#thumbs_img_2').click(function(){        $('img.big_img').hide(); // Hides all big images        $('img#big_img_2').fadeIn('slow'); //Slowly fades in selected image    });    $('img#thumbs_img_3').click(function(){        $('img.big_img').hide(); // Hides all big images        $('img#big_img_3').fadeIn('slow'); //Slowly fades in selected image    });    $('img#thumbs_img_4').click(function(){        $('img.big_img').hide(); // Hides all big images        $('img#big_img_4').fadeIn('slow'); //Slowly fades in selected image    });    $('img#thumbs_img_5').click(function(){        $('img.big_img').hide(); // Hides all big images        $('img#big_img_5').fadeIn('slow'); //Slowly fades in selected image    });    $('img#thumbs_img_6').click(function(){        $('img.big_img').hide(); // Hides all big images        $('img#big_img_6').fadeIn('slow'); //Slowly fades in selected image    });});
Simple image gallery
javascript;jquery;html;css;image
Also you can keep path in data structure.<div class=big_img_wrapper></div><div class=thumbs_img_wrapper></div><script>  var i, big_image_urls, thumbs_image_urls, gallery_size;  big_image_urls = [    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/1.jpg',    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/2.jpg',    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/3.jpg',    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/4.jpg',    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/big/5.jpg'  ];  thumbs_image_urls = [    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/1.jpg',    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/2.jpg',    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/3.jpg',    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/4.jpg',    'http://cdn.sstatic.net/stackexchange/img/hiring/photos/thumbs/5.jpg'  ];  i = 0;  gallery_size = thumbs_image_urls.length;  while (i < gallery_size) {    $('.thumbs_img_wrapper').append(      '<img src=' + thumbs_image_urls[i] + ' id=' + i + ' class=thumbs_img>'    );    i++;  }  $('.big_img_wrapper').append(    '<img src=' + big_image_urls[0] + ' id=big_img_' + 0 + ' class=big_img>'  );  $('.thumbs_img').click(function(){    var id;    id = $(this).attr('id');    $('.big_img')      .hide()      .attr('src', big_image_urls[id])      .fadeIn('slow');  });</script>