image full screen with jquery and css

I am trying to figure out how css3 and jquery works together for image gallery and i am stuck in this sitaution :

I do have a page like this http://ift.tt/1EwSW3N i got right the first part, when i have to load the large image and switch from one to another with this code starting from HTML i have a the thumbnails at the left and the main image to view at the right like this.

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

this is the css used

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

and the 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');



    });


});

I fouind it working as said when i have t ochange the image, but i cannot figure out properly how to make a selected image "full screen" any tips is welcomed.thanks for help in advance

Paolo