title: Image full screen with jquery and css
body: <p>I am trying to figure out how CSS3 and jQuery work together for an image gallery and I am stuck in this situation: </p>
  
  <p>I have a page like this: <a href="http://www.paolobergomi.it/sitob/gallery2.html" rel="nofollow">http://www.paolobergomi.it/sitob/gallery2.html</a><br>
  I got the first part right, when I have to load the large image and switch from one to another with this code.     </p>
  
  <p>I have the thumbnails to the left and the main image to view to the right like this:</p>
  
  <pre><code>&lt;div id="thumbsBox"&gt;
      &lt;img id="one" src="tn/image-01.jpg" alt="first" class="blurredThumb"/&gt;
      &lt;img id="two" src="tn/image-02.jpg" alt="second" /&gt;
      &lt;img id="three" src="tn/image-03.jpg" alt="third" /&gt;
      &lt;img id="fourth" src="tn/image-04.jpg" alt="fourth" /&gt;             
  &lt;/div&gt; 
  
  &lt;div class="largeImage"&gt;
      &lt;img src="lg/image-01.jpg" alt="first" /&gt;
  &lt;/div&gt;
  &lt;p id="fullscreen"&gt; Here full screen&lt;/p&gt;
  </code></pre>
  
  <p>This is the CSS used: </p>
  
  <pre><code>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%;
  }
  </code></pre>
  
  <p>and the jQuery </p>
  
  <pre><code>$(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');
      });
  });
  </code></pre>
  
  <p>It's working as described when I have to change the image, but I cannot figure out properly how to make a selected image "full screen".
  Any tip is welcome. Thanks for help in advance.</p>