title: Getting One Image Src to Change with JQuery when Another Image is Clicked
body: <p>I'm creating a product view with one big image above a row of smaller images.  The big image should change when one of the little images is clicked (to have the src of whichever small image was clicked).</p>
  
  <p>My HTML is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id="MainProductImage" src="Images/Product Images/AB04_GRAY_22A6_W_WEB.jpg"&gt;
  
  &lt;img id="sm001" src="Images/Product Images/AB04_G.jpg"&gt;
  &lt;img id="sm001" src="Images/Product Images/AB04.jpg"&gt;
  &lt;img id="sm002" src="Images/dB 002.jpeg"&gt;
  &lt;img id="sm003" src="Images/dB 003.jpeg"&gt;
  &lt;img id="sm004" src="Images/dB 004.jpeg"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My jquery is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
   $('img.sm001').click(function() {
    $('#MainProductImage').attr('src', 'Images/Product Images/AB04_G.jpg')
   });
   
   $('img.sm002').click(function() {
    $('#MainProductImage').attr('src', 'Images/Product Images/AB04.jpg')
   });
   
   $('img.sm003').click(function() {
    $('#MainProductImage').attr('src', 'Images/dB 002.jpeg')
   });
   
   $('img.sm004').click(function() {
    $('#MainProductImage').attr('src', 'Images/dB 003.jpeg')
   });
   
   $('img.sm005').click(function() {
    $('#MainProductImage').attr('src', 'Images/dB 004.jpeg')
   });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I get this to work as intended?</p>