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

What is this doing? What would you like it to do?

Glen Solsberry
– Glen Solsberry

2009-02-04 21:09:09 +00:00
Commented Feb 4, 2009 at 21:09 — Glen Solsberry
– Glen Solsberry, Commented Feb 4, 2009 at 21:09
change the image when I click the radio button

Jesse
– Jesse

2009-02-04 21:19:02 +00:00
Commented Feb 4, 2009 at 21:19 — Jesse
– Jesse, Commented Feb 4, 2009 at 21:19

Peter Mortensen · Accepted Answer · 2012-05-18 08:09:16Z

2

What is the value of the parameter, url? It 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.

edited May 18, 2012 at 8:09

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Feb 4, 2009 at 21:29

Chetan S

23.8k2 gold badges67 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thaBadDawg · Accepted Answer · 2009-02-04 21:19:10Z

2

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.

answered Feb 4, 2009 at 21:19

thaBadDawg

5,2406 gold badges37 silver badges44 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2012-05-18 08:10:39Z

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>

Collectives™ on Stack Overflow

How to pass a JSON URL to a jQuery function?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related