Image Gallery / JS /

by asdf

HTML

<h2 class="title">My Gallery</h2>
<div><img class="foo showed" src="http://3.bp.blogspot.com/-NUloOxjA120/T3bKwkC8OmI/AAAAAAAAAgU/78IcfjdL77k/s320/Cat2.jpg" />
<img class="foo" src="http://1.bp.blogspot.com/-UarVZzapFXQ/T3bKykiQeAI/AAAAAAAAAgc/u5CeNtOJHP0/s200/Cat3.jpg" />
<img class="foo" src="http://3.bp.blogspot.com/-8fapKQg6FLQ/T3bK1_KazuI/AAAAAAAAAgk/UEdTRcybwGM/s200/Cat4.jpg" />
<img class="foo" src="http://4.bp.blogspot.com/-KgY2GMnhsZo/T3bKs-CUSJI/AAAAAAAAAgM/MgNwq5ruAkE/s200/Cat1.jpg" />
<img class="foo" src="http://4.bp.blogspot.com/_oJpV6yalpOk/TQit2ejogjI/AAAAAAAAAWM/xuzzTW3_1VA/s640/The-best-top-desktop-cat-wallpapers-1.jpg" /></div>

CSS

.foo {
    position:absolute;
    left:50%;
    margin-left:-150px;
    width: 300px;
    max-height: 300px;
    border: solid 1px grey;
    display:none;
}
img.showed{
    display:inline-block;
}
h2{
    color: green;
    text-align:center;
}

JavaScript

$(document).ready(function(){
    $('.bar').on('click', function(){
       $('.bar').css({
            color: 'blue',
            display: 'block',
            background: 'yellow'
        });
    });
    
    $('.foo').on('click', function(){
        if($('.showed + .foo').length===0){
            $('.foo:first-child').addClass('showed');
        }else{
            $('.showed + .foo').addClass('showed');
        }
        $(this).removeClass('showed');
    });
});