Попытка получить лучший подход для простой галереи изображений

Question

У меня есть простая галерея, которая скрывает и показывает изображения. Он отлично работает, но я не удовлетворен своим подходом. Мой javascript казался излишним. Можете ли вы проверить мой код и дать лучшее представление о том, как его улучшить.

Это мой 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 
    }); 

}); 

Я готов использовать плагин для улучшения улучшений. Спасибо!

Answer 1

вместо использования .click() событие для каждого эскиза вы можете использовать:

$('img.thumbs_img').click(function(){ 
     $('img.big_img').hide(); // Hides all big images 
     var id = $(this).attr('id'); 
     id = id.replace("thumbs_img_", "big_img_"); 
     $('img#'+id).fadeIn('slow'); //Slowly fades in selected image 
    }); 

до сих пор не уверен, что это лучше.