title: jQuery replacing img src in three steps
body: <p>Bit stuck with this one. I'm building a product image gallery for a Shopify shop that needs to have the following functionality:</p>
  
  <ol>
  <li>Thumbnails for each product image</li>
  <li>Medium-sized image that goes into the main image 'container'</li>
  <li>Full-sized image that appears as a lightbox when you click the medium-sized image</li>
  </ol>
  
  <p>So, you would click on a thumbnail which would load the medium sized image into the image container and then clicking on that medium sized image would show the full size image as a lightbox overlay.</p>
  
  <p>Here's my mark up:</p>
  
  <pre><code>&lt;div id="imgcontainer"&gt;
                  &lt;a href="assets/product-fullsize.jpg" class="overlay"&gt;&lt;img src="assets/product-main.jpg" alt="product-main" width="360" height="231" /&gt;&lt;/a&gt;
              &lt;/div&gt; &lt;!-- End div#imgcontainer --&gt;
              &lt;div id="thumbs"&gt;
                  &lt;div class="thumbnav"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="assets/medium-1.jpg"&gt;&lt;img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="assets/medium-2.jpg"&gt;&lt;img src="assets/thumb-2.jpg" alt="thumb-2" width="100" height="70" /&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="assets/medium-3.jpg"&gt;&lt;img src="assets/thumb-3.jpg" alt="thumb-3" width="100" height="70" /&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="assets/medium-1.jpg"&gt;&lt;img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="assets/medium-2.jpg"&gt;&lt;img src="assets/thumb-2.jpg" alt="thumb-2" width="100" height="70" /&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="assets/medium-3.jpg"&gt;&lt;img src="assets/thumb-3.jpg" alt="thumb-3" width="100" height="70" /&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt; &lt;!-- End div#thumbnav --&gt;
                  &lt;a href="javascript:void(0);" class="tbpr"&gt;&amp;nbsp;&lt;/a&gt;
                  &lt;a href="javascript:void(0);" class="tbnx"&gt;&amp;nbsp;&lt;/a&gt;
              &lt;/div&gt; &lt;!-- End div#thumbs --&gt;
          &lt;/div&gt; &lt;!-- End div#main --&gt;
  </code></pre>
  
  <p>Can anyone recommend the best way to do this? Shopify uses a language called 'Liquid' that lets me use a 'foreach' statement to output markup for the images, or even just the three types of image urls (thumbnail, medium and fullsize). </p>
  
  <p>Note that there is no simple naming convention for the image filename and location as they are generated on the fly, so I can't just swap out the 'medium' part of the filename for 'fullsize' etc.</p>
  
  <p>Thanks for any pointers,</p>
  
  <p>Osu</p>