title: How do i swap out images in jquery
body: <p>I have my site that the users can swap out three products and there are images for each product so rather then doing an ajax call every time the user clicks the button, I wanted to just have the image urls in the html with display none to grab when needed.. so for example, here is my html</p>
  
  <pre><code>    &lt;img src="&lt;?php print $product[$selected_product]['product_image']; ?&gt;" width="auto" height="199" alt="" /&gt;
  &lt;/div&gt;
  &lt;p style="display:none;" class="image_&lt;?php print $product["standard"]['product_id']; ?&gt;"&gt;&lt;?php echo $product["standard"]['product_image']; ?&gt;&lt;/p&gt;
  &lt;p style="display:none;" class="image_&lt;?php print $product["professional"]['product_id']; ?&gt;"&gt;&lt;?php echo $product["professional"]['product_image']; ?&gt;&lt;/p&gt;
  &lt;p style="display:none;" class="image_&lt;?php print $product["premium"]['product_id']; ?&gt;"&gt;&lt;?php echo $product["premium"]['product_image']; ?&gt;&lt;/p&gt;
  </code></pre>
  
  <p>As you can see the one that is displaying is the one selected but if the user selects one of the other images i need to change the src of the image tag...here is my jquery</p>
  
  <pre><code>var image = $(this).parents(".item").find(".image_" + this_id).text();
  image = $.trim(image);
  console.log(image)
  $(this).parents(".item").find(".item-image img").attr("src", image);
  </code></pre>
  
  <p>but the problem is that the console.log prints out the image url correctly but it sometimes when i click the image doesnt change and i get this error</p>
  
  <pre><code>Image corrupt or truncated: http://posnation.com/shop_possystems/image/data/1B.png
  </code></pre>