Изображение на весь экран с JQuery и CSS

Я пытаюсь понять, как CSS3 и jQuery работают вместе для галереи изображений, и я застрял в этой ситуации:

У меня есть страница, подобная этой: http://www.paolobergomi.it/sitob/gallery2.html
Я получил первую часть права, когда мне нужно загрузить большое изображение и переключиться с одного на другой с помощью этого кода.

У меня есть миниатюры слева, а главное изображение - справа:

<div id="thumbsBox">
    <img id="one" src="tn/image-01.jpg" alt="first" class="blurredThumb"/>
    <img id="two" src="tn/image-02.jpg" alt="second" />
    <img id="three" src="tn/image-03.jpg" alt="third" />
    <img id="fourth" src="tn/image-04.jpg" alt="fourth" />             
</div> 

<div class="largeImage">
    <img src="lg/image-01.jpg" alt="first" />
</div>
<p id="fullscreen"> Here full screen</p>

Это используемый CSS:

body {
    margin: auto;
}

#thumbsBox {
    float: left;
    margin-top: 300px;
    width: 220px;
    padding: 0px;
}

#thumbsBox img {
    float: left;
}

.largeImage { 
    width: 900px;
    height: 600px;
    border:  1px solid #333333;
    float: right;
    margin-right: 200px;
    margin-top: 100px;
}

.largeImage img { 
    width: 100%;
    height: 100%; 
}

.blurredThumb {
    opacity: 0.7;
}


#thumbsBox img:hover {
    float: left;
    opacity: 0.7;
}

.fullscreen {
    margin: 0px;
    width: 100%;
}

и jQuery

$(document).ready (function(){
    $('#thumbsBox img').click (function() {
        $(".largeImage img").attr('src', this.src.replace('tn','lg'));
    });

    $("#fullscreen").click (function() {
        $("#thumbsBox").css('display', 'none');
        $(".largeImage").addClass('fullscreen');
    });
});

Он работает, как описано, когда мне нужно изменить изображение, но я не могу правильно понять, как сделать выбранный образ "полным экраном". Любой совет приветствуется. Благодарим за помощь заранее.