How to pass a json url to a jquery function?

Question

I have this loaded before the radio buttons with corresponding color variable.

  <script type="text/javascript">
//<![CDATA[
images = {"Black":"http:\/\/ecx.images-amazon.com\/images\/I\/31XwBA2m8pL.jpg","Slate":"http:\/\/ecx.images-amazon.com\/images\/I\/31SqWkrSb6L.jpg","White":"http:\/\/ecx.images-amazon.com\/images\/I\/31OJufgJT2L.jpg"};
//]]>
</script>

Here is the jquery function. The best I can do so far is make the first image disappear, leaving the alt attribute.

function change_large_product_image(url) {
  jQuery('.largeprod img').attr('src', url);
  return false;
}

Here is a sample source for the radio button.

<label for="Black" style="background: #fff url(http://ecx.images-amazon.com/images/I/11TeKFAzJsL._SL30_.jpg) center center no-repeat;" title="Black" >
Black
</label>
<input id="color_black" name="color" onclick="change_large_product_image(images['Black'])" type="radio" value="Black" />

Answer 1

The easier way to solve the problem is not to try and change the src, but empty the container and put a new img in its place. For example.

<div class"largeprod"><img src="...old..." /></div>

And using jQuery to clear it out and reload it

$('.largeprod').empty().append('<img src="...new..."/>');

If you want to get really clever with it you can "preload" the image in a non-displayed div, then clone and drop it in where you want to. I use a system where I put images (and large pieces of content) into that hidden div, save it's id and where it is going into an array and then when the image finishes loading, the onload event triggers and the moves it to where it is supposed to go.

Answer 2

What is the value of url? Looks like you may need to decode the url string to remove the '\' characters.

function change_large_product_image(url) {
  jQuery('.largeprod img').attr('src', decodeURI(url));
  return false;
}

In addition, consider taking thaBadDawg's suggestion.

Answer 3

Here's my solution:

<script type="text/javascript">
var myImages = {
"Black":"http:\/\/ecx.images-amazon.com\/images\/I\/31XwBA2m8pL.jpg"
,"Slate":"http:\/\/ecx.images-amazon.com\/images\/I\/31SqWkrSb6L.jpg"
, "White":"http:\/\/ecx.images-amazon.com\/images\/I\/31OJufgJT2L.jpg"
};
$(document).ready(function() {
for ( var i in myImages ) {
    html = '<br />';
    html += '<label for="'+i+'" style="background: #fff url('+myImages[i]+') center center no-repeat;" title="'+i+'" >'+i+'</label>';
    html += '<input id="'+i+'" name="color" onclick="$(\'#largeImage\').attr(\'src\',\''+myImages[i]+'\');" type="radio" value="'+i+'" />';
    html += '<br />';
    $('body').append(html);
}
    $('body').append("<img id='largeImage'>");
});
</script>