HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Simple image gallery

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
gallerysimpleimage

Problem

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


front_page/phinfo/house_rentals/westgate/big_img_1.JPG" id="big_img_1" class="big_img">
front_page/phinfo/house_rentals/westgate/big_img_2.JPG" id="big_img_2" class="big_img">
front_page/phinfo/house_rentals/westgate/big_img_3.JPG" id="big_img_3" class="big_img">
front_page/phinfo/house_rentals/westgate/big_img_4.JPG" id="big_img_4" class="big_img">
front_page/phinfo/house_rentals/westgate/big_img_5.JPG" id="big_img_5" class="big_img">
front_page/phinfo/house_rentals/westgate/big_img_6.JPG" id="big_img_6" class="big_img">


front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_1.jpg" id="thumbs_img_1" calss="thumbs_img">
front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_2.jpg" id="thumbs_img_2" calss="thumbs_img">
front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_3.jpg" id="thumbs_img_3" calss="thumbs_img">
front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_4.jpg" id="thumbs_img_4" calss="thumbs_img">
front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_5.jpg" id="thumbs_img_5" calss="thumbs_img">
front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_6.jpg" id="thumbs_img_6" calss="thumbs_img">



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

`$(do

Solution

replace all .click() functions with:

$('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
    });

Code Snippets

$('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
    });

Context

StackExchange Code Review Q#69706, answer score: 3

Revisions (0)

No revisions yet.