Using jQuery to generate image list from JSON with images bound to click event

Question

I am new to Javascript/JQuery and am looking for input on how to create a ul of images based on data returned from an AJAX call. I am using $.getJSON and $.each to retrieve and iterate over the JSON. I am also using $.('image_list').html() to insert the generated markup into the div placeholder.

What I'm not sure of is how best to generate the markup and to bind an event that when the image is clicked, a function sets a couple of hidden input fields (src = blog_style_url, title = title, and alt = description).

The AJAX call returns data in the following format:

[{"description":"lorem ipsum","id":6,"title":"saepe atque doloremque minus","thumb_style_url":"/system/files/6/thumb/image.png?1306422297","blog_style_url":"/system/files/6/blog/image.png?1306422297"}]

This is what I have so far, which doesn't work but will hopefully give an idea of what I'm trying to do.

                    <script>

                    function select_image(url, alt, title){
                        $("#src").val(url);
                        $("#alt").val(alt);
                        $("#title").val(title);
                    }

                    $(document).ready(function() {
                        $.getJSON('/api/images.json', function(data) {
                            var items = [];

                            //$.each(data, function(index, image) {
                                //items.push('<li><a href="javascript:void(0)" onclick="db_insert_image(\'' + image.blog_style_url + '\', \'something\')"><img src="' + image.thumb_style_url + '" /></a></li>');
                                //console.log($('<img />', { 'src' : image.thumb_style_url }));
                                //<li><a><img /></a></li>
                            //});

                            $('#dynamic_images_list').html(function() {
                                $.each(data, function(index, image) {
                                    $('<img />', {'src' : image.thumb_style_url});
                                });
                            });

                            $("img").click(function(){
                                alert('hello world!');
                            });

                        });
                    });
                </script>

This is what I'd like the final output to look like:

// The generated markup
<div id="image_list>
  <ul>
    <li><a ..><img src="/system/files/6/thumb/image.png?1306422297" title="saepe atque doloremque minus" alt="lorem ipsum" /></a></li>
  </ul>
</div>

And then have an event bound to click that sets the hidden attributes as described above.

Mārtiņš Briedis · Accepted Answer · 2011-05-26 17:02:26Z

1

Use $.each. The page contains usefuls and straight-forward examples.

answered May 26, 2011 at 17:02

Mārtiņš Briedis

17.9k5 gold badges59 silver badges78 bronze badges

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

Comments

BonyT · Accepted Answer · 2011-05-26 20:48:11Z

1

Consider using jTemplates:

From a call such as:

 $.getJSON("/MVC/GetData", "parameter=xyz", function (data) {
                    $('#image_list').setTemplate($('#imageDisplay').html());
                    $('#image_list').processTemplate(data);
                    $('#image_list li').click(function(){
                         $('#formfield1').val($(this).find('img').attr('src'));
                         $('#formfield2').val($(this).find('img').attr('title'));
                         $('#formfield3').val($(this).find('img').attr('alt'));
                    }
                });

you would use this in your HTML ....

 <div id="image_list></div>

 <script type="text/html" id="imageDisplay">
    {#template MAIN}

      <ul>
      {#foreach $T.Images as image}
         {#include ROW root=$T.image}
      {#/for}
      </ul>
     {#/template MAIN}

    {#template ROW}
       <li><a ..><img src="{$T.thumb_style_url}" title="{$T.title}" alt="{$T.description}" /></a></li>
    {#/template ROW}
 </script>

edited May 26, 2011 at 20:48

answered May 26, 2011 at 17:31

BonyT

11k5 gold badges34 silver badges53 bronze badges

2 Comments

BonyT Over a year ago

I'm not sure whether you still want a click event to set attributes given that this code sets them already.

Eric M. Over a year ago

The click event isn't to set the image attributes, it's to set a couple of hidden fields in a form based on the attributes from the JSON.

John · Accepted Answer · 2011-05-27 12:03:15Z

1

Use each to iterate for sure also do note that you can use the following to refference click events to IMG tags on the page and also use attr to set the src or alt descriptions etc.

$("img").click(function(){
  $(this).attr('src', 'anotherPicture.jpg');
  $(this).attr('alt', 'This is a updated description');
});

//if you want to ref specific imgs through there ids

$("img#1").click(function(){
  $(this).attr('src', 'anotherPicture.jpg');
  $(this).attr('alt', 'This is a updated description for id1');
});


$("img#2").click(function(){
  $(this).attr('src', 'anotherPicture.jpg');
  $(this).attr('alt', 'This is a updated description for id2');
});



//html displays 2 images on a page
<img id='1' src="/system/files/6/thumb/image.png?1306422297" title="saepe atque doloremque minus" alt="lorem ipsum" >
<img id='2' src='someOtherImage.jpg' title="saepe atque doloremque minus" alt="lorem ipsum">

edited May 27, 2011 at 12:03

answered May 26, 2011 at 17:18

John

1,3192 gold badges12 silver badges24 bronze badges

2 Comments

Eric M. Over a year ago

So the click is happening on the image? Do I need the link tag then?

John Over a year ago

No, unless you want to set a link that takes a user somewhere. I will give you an example in this answer.

Collectives™ on Stack Overflow

Using jQuery to generate image list from JSON with images bound to click event

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related