javascript - Trying to get better approach for simple image gallery -

javascript - Trying to get better approach for simple image gallery -

i have simple gallery hides , show images. works fine not satisfy approach. javascript seemed redundant. can check code , give improve thought on how can improve it.

this 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>

this 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; }

and here's jquery

$(document).ready(function(){ $('img.big_img').hide(); // hides big images $('img#big_img_1').fadein('slow'); // serve default image $('img#thumbs_img_1').click(function(){ $('img.big_img').hide(); // hides big images $('img#big_img_1').fadein('slow'); //slowly fades in selected image }); $('img#thumbs_img_2').click(function(){ $('img.big_img').hide(); // hides big images $('img#big_img_2').fadein('slow'); //slowly fades in selected image }); $('img#thumbs_img_3').click(function(){ $('img.big_img').hide(); // hides big images $('img#big_img_3').fadein('slow'); //slowly fades in selected image }); $('img#thumbs_img_4').click(function(){ $('img.big_img').hide(); // hides big images $('img#big_img_4').fadein('slow'); //slowly fades in selected image }); $('img#thumbs_img_5').click(function(){ $('img.big_img').hide(); // hides big images $('img#big_img_5').fadein('slow'); //slowly fades in selected image }); $('img#thumbs_img_6').click(function(){ $('img.big_img').hide(); // hides big images $('img#big_img_6').fadein('slow'); //slowly fades in selected image }); });

i'm willing utilize plugins improve improvements. thanks!

instead of using .click() event each thumbnail can use:

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

still not sure if better.

javascript jquery html css