Answers.Body: <p>Something like this (untested):</p>
  
  <pre><code>{% set relatedAssets = product.productPhoto.all() %}
  {% if relatedAssets|length %}
  
  &lt;img id="primaryImg" src="{{relatedAssets|first.getUrl() }}"&gt;
  
  &lt;div class="product__photos"&gt;
  
      {% for rel in relatedAssets %}
        &lt;div class="product__photo"&gt;
          &lt;a href="#" class="thumbImg" data-lrgimg="{{ rel.getUrl() }}"&gt;&lt;img src="{{ rel.getUrl('square_md') }}" alt=""&gt;&lt;/a&gt;
        &lt;/div&gt;
      {% endfor %}
  
  &lt;/div&gt;
  {% endif %} 
  
  &lt;/div&gt;
  
  &lt;script&gt;
  $( document ).ready(function() {
    $(".thumbImg").click(function(){
      $("#primaryImg").attr({ "src": $(this).data('lrgimg') });
    });
  });
  &lt;/script&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-10-31T12:30:36.883Z
Answers.Text: Thank you so much, Luke – worked like a charm!
Answers.UserDisplayName: kamicrafted
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-10-30T04:50:51.393Z
Answers.LastActivityDate: 2019-10-30T04:50:51.393Z
Answers.UserDisplayName: Luke Holder
Body: <p>I'm having some trouble figuring out how to properly update the main product image from a set of images that are available.</p>
  
  <p>Within the product detail page, I have a large default image that is shown with a set of thumbnails below from lopping through all available images associated with the product.</p>
  
  <p>I'm able to loop through and display all available images for the given product using.</p>
  
  <pre><code>&lt;div class="product__photos"&gt;
  {% set relatedAssets = product.productPhoto.all() %}
  
    {% if relatedAssets|length %}
      {% for rel in relatedAssets %}
        &lt;div class="product__photo"&gt;
          &lt;img src="{{ rel.getUrl('square_md') }}" alt=""&gt;
        &lt;/div&gt;
      {% endfor %}
    {% endif %} 
  &lt;/div&gt;
  </code></pre>
  
  <p>What I'd like to do it update the large image once a thumbnail of the image set is clicked. I haven't been able to find anything related to successfully doing this which seems like a common pattern for an ecommerce site.</p>
  
  <p>Any advice would be much appreciated!</p>
  
Tags: <assets><plugin-craftcommerce><plugin-craftcommerce2>
Title: How to toggle main product image from multiple images
ThreadText: # How to toggle main product image from multiple images
  
  (Asked by: username_0 on 2019-10-30)
  
  I'm having some trouble figuring out how to properly update the main product image from a set of images that are available.
  
  Within the product detail page, I have a large default image that is shown with a set of thumbnails below from lopping through all available images associated with the product.
  
  I'm able to loop through and display all available images for the given product using.
  
  ```
  <div class="product__photos">
  {% set relatedAssets = product.productPhoto.all() %}
  
    {% if relatedAssets|length %}
      {% for rel in relatedAssets %}
        <div class="product__photo">
          <img src="{{ rel.getUrl('square_md') }}" alt="">
        </div>
      {% endfor %}
    {% endif %} 
  </div>
  
  ```
  
  What I'd like to do it update the large image once a thumbnail of the image set is clicked. I haven't been able to find anything related to successfully doing this which seems like a common pattern for an ecommerce site.
  
  Any advice would be much appreciated!
  
  **Tags:** assets, plugin-craftcommerce, plugin-craftcommerce2
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2019-10-30. Score: 1 | Accepted answer
  
  Something like this (untested):
  
  ```
  {% set relatedAssets = product.productPhoto.all() %}
  {% if relatedAssets|length %}
  
  <img id="primaryImg" src="{{relatedAssets|first.getUrl() }}">
  
  <div class="product__photos">
  
      {% for rel in relatedAssets %}
        <div class="product__photo">
          <a href="#" class="thumbImg" data-lrgimg="{{ rel.getUrl() }}"><img src="{{ rel.getUrl('square_md') }}" alt=""></a>
        </div>
      {% endfor %}
  
  </div>
  {% endif %} 
  
  </div>
  
  <script>
  $( document ).ready(function() {
    $(".thumbImg").click(function(){
      $("#primaryImg").attr({ "src": $(this).data('lrgimg') });
    });
  });
  </script>
  
  ```
  
  > **Comments:**
  > **username_0**: Thank you so much, username_1 – worked like a charm!  
  
  ---
  
  