title: Update hyperlink on click
body: <p>I am working on a simple gallery for my site.</p>
  
  <p><strong>Demo:</strong> <a href="http://jsfiddle.net/fdr6y6y7/" rel="nofollow">http://jsfiddle.net/fdr6y6y7/</a></p>
  
  <p>I have a large image that changes when you click a thumbnail underneath it.</p>
  
  <p>However, I have an issue. Each 'large' image has a link to itself in a new window, however you can see that the original main image link never changes.</p>
  
  <p>For example, if I click the 2nd thumbnail image the hyperlink inside the <code>largeimg</code> div should really change to <a href="http://placehold.it/250x250" rel="nofollow">http://placehold.it/250x250</a>.</p>
  
  <p>Can I use jQuery to do this?</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>$('#thumb_scroll a').click(function(event){
      $('#largeimg img').attr("src", $(this).attr("href"));
      $('#largelink').attr("href", $(this).attr("rel"));
      return false;
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="largeimg" class="largeimage"&gt;
      &lt;a href="http://placehold.it/300x300" target="_blank" class="main"&gt;&lt;img src="http://placehold.it/200x200" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
  &lt;div id="thumbouter"&gt;
      &lt;div id="thumbnails"&gt;
          &lt;div id="thumb_scroll"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="http://placehold.it/300x300" class="thumb"&gt;&lt;img src="http://placehold.it/100x100" /&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="http://placehold.it/250x250" class="thumb"&gt;&lt;img src="http://placehold.it/100x100" /&gt;&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>