title: How to do change image when users click thumbnail?
body: <p>I want to change selected (or default) image when users clicked other images thumbs. I tried that with below codes but dosen't work.. Where do I mistake in here ?</p>
  
  <p>Here are simple jquery codes;</p>
  
  <pre><code> &lt;script&gt;
          $('img.thumbnail').click(function () {
              $('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
          })
    &lt;/script&gt;
  </code></pre>
  
  <p>and html;</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="col-md-5"&gt;
  &lt;img id="productImage" src='http://via.placeholder.com/400/200?text={{$product-&gt;product_name}}'&gt;
    &lt;hr&gt;
     &lt;div class="row"&gt;
      &lt;div class="col-xs-3"&gt;
  &lt;a href="#" class="thumbnail"&gt;&lt;img src="http://via.placeholder.com/60/60?text=otherimage1"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-3"&gt;
  &lt;a href="#" class="thumbnail"&gt;&lt;img src="http://via.placeholder.com/60/60?text=otherimage2"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-3"&gt;
  &lt;a href="#" class="thumbnail"&gt;&lt;img src="http://via.placeholder.com/60/60?text=otherimage3"&gt;&lt;/a&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>