javascript - jQuery show full size image on click -

pretty self explanatory not workking.

i want display full image when user click on image...

yes know there tons of plugins but

i want keep simple.

any idea ?

css :

.full {     display: none;     width: 500px;     height: 500px;     margin-left: 100px;     margin-top: -300px;     position: fixed;     background-color: #f00;     z-index: 6; }  .thumbnail {     width: 50px;     height: 50px; } 

html:

<img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> 

jquery:

$(document).ready(function() {     $('.thumbnail').on('click', function() {         var img = $('<img />',{src:this.src,'class':'full'});         $('.full').html(img).show();         console.log('done!');     }); }); 

try looking how jquery works.

$(document).ready(function() {     $('.thumbnail').on('click', function() {         $(this).addclass('full');     }); }); 

you can overwrite class, instead of adding 1 with

$(this).attr('class', 'full');