title: Clicking a thumbnail to change the large image in a gallery
body: <p>I'm trying to create the following gallery:<br>
  - One large image<br>
  - Thumbnails of gallery images below<br>
  - Large image should open all images on click in a lightbox gallery  </p>
  
  <p>I have the lightbox gallery working using PhotoSwipe and it fires when I click the large image. I also have the thumbnails in place below the large image. My question now is how do I change the large image when I click one of the thumbnails? I've seen a lot of examples (also quite simple ones), but none of them seem to work in my case.</p>
  
  <p>Here's the code that I have for the thumbnail:  </p>
  
  <pre><code>&lt;a href="&lt;?php echo $image['url']?&gt;" data-size="&lt;?php echo $image['width']?&gt;x&lt;?php echo $image['height']?&gt;" data-index="0"&gt;
    &lt;img src="&lt;?php echo $image['url']?&gt;"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>What I want is that when I click the href of the thumbnail that it changes the big image, which is display with this code:  </p>
  
  <pre><code>&lt;img class="bigimg" src="imageurl.jpg"&gt;
  </code></pre>
  
  <p>The thumbnail needs to have the href tag because this is required for the lightbox function to work. </p>
  
  <p>I've seen some jQuery examples that replace the src of the bigimg with the src of the thumbnail, but I can't quite get it to work with the href also in place.  </p>
  
  <p>For reference, 
  <a href="http://i.stack.imgur.com/yeiEV.png" rel="nofollow">this is the situation.</a></p>
  
  <p>Example: <a href="https://jsfiddle.net/91oq8ja2/1/" rel="nofollow">JSFiddle</a></p>