Как передать URL JSON в функцию jQuery?

Question

Я загрузил это перед переключателями с соответствующей переменной цвета:

<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>

Вот функция jQuery. Лучшее, что я могу сделать, это сделать, чтобы первое изображение исчезло, оставив атрибут alt.

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

Вот пример источника для переключателя.

<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

Какое значение параметра, url? Похоже, вам может понадобиться декодировать строку URL, чтобы удалить символы '\'.

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

Кроме того, подумайте над предложением thaBadDawg.

Answer 2

Самый простой способ решить проблему - не пытаться изменить src, а очистить контейнер и поставить на его место новый img. Например.

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

И использование jQuery для очистки и перезагрузки

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

Если вы хотите стать действительно умным с ним, вы можете «предварительно загрузить» изображение в неотображаемый div, затем клонировать и поместить его туда, куда вы хотите. Я использую систему, в которой я помещаю изображения (и большие фрагменты контента) в этот скрытый div, сохраняю его id и куда он собирается в массив, а затем, когда изображение завершает загрузку, запускается событие onload и перемещает его туда, где оно должен идти.

Answer 3

Вот мое решение:

<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>