title: jQuery switching images when link is clicked
body: <p>Need some help here. I'm trying to achieve this:</p>
  
  <p>By default the images are hidden by css display: none;</p>
  
  <p>When the user clicks on the link for example: vanilla glazed it will display the image that matches the image alt "vanilla-glazed". </p>
  
  <p>Then if the user clicks on another link for example: brookyln blackout it will hide the active image and show the brookyln blackout image.</p>
  
  <p>Makes sense? Here's my html markup.</p>
  
  <p>I need help with the jQuery part. Not sure where to start.</p>
  
  <pre><code>&lt;div id="nameWrapper"&gt;
  
  &lt;ul&gt;
  
  &lt;li&gt;&lt;a href="#" class="vanilla-glazed"&gt;vanilla glazed&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="brookyln-blackout"&gt;brookyln blackout&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  
  &lt;/div&gt;
  
  
  &lt;div class="gallery"&gt;
  
  &lt;div class="image-wrapper"&gt;
  
  &lt;img src="#" alt="brookyln-blackout" /&gt;
  
     &lt;div class="meta"&gt;
     &lt;p&gt;description&lt;/p&gt;
     &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="image-wrapper"&gt;
  
  &lt;img src="#" alt="vanilla-glazed" /&gt;
  
     &lt;div class="meta"&gt;
     &lt;p&gt;description&lt;/p&gt;
     &lt;/div&gt; 
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>