How To Display A List Of Images From A JSON Object

JSON, which was introduced by Doug Crockford in 2006, is an alternative to XML to make content available to users on the Web. Here is a coding approach on how to display a collection of images on a web page:

Demo

Resources

  1. Dependency. The jQuery Library can be included in the head of the html document.
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    
  2. JSON object. We assigned the JSON object to a variable, which was defined as var data, as shown in the JavaScript section below.

Utilities

  1. .jQuery.each( collection, callback(indexInArray, valueOfElement) )
  2. .append( content [, content ] )

Description

We used the jQuery.each() function to iterate over the JSON object and appended the returned content to the target container. The styles are provided below.

JavaScript

<script>
(function($) {

    $(function(){ // ON DOM READY

        var data = {
            "response": {
                "docs": [{
                    "content_type": "article",
                        "date": "2013-12-04T14:30:43Z",
                        "description": "<p></p>",
                        "image_url": [
                        "\/wp-content\/themes\/mcl\/images\/nyc01.jpg"],
                        "title": "NYC image No. 1",
                        "url": [""]
                }, {
                    "content_type": "article",
                        "date": "2013-12-04T12:30:55Z",
                        "description": "<p></p>",
                        "image_url": [
                        "\/wp-content\/themes\/mcl\/images\/nyc02.jpg"],
                        "title": "NYC image No. 2",
                        "url": [""]
                }, {
                    "content_type": "article",
                        "date": "2013-12-02T05:24:37Z",
                        "description": "<p></p>",
                        "image_url": [
                        "\/wp-content\/themes\/mcl\/images\/nyc03.jpg"],
                        "native_id": "",
                        "title": "NYC image No. 3",
                        "url": [""]
                }]
            }
        }, data = data.response.docs,
            target = $('#target'),
            html;

        $.each(data, function (key, val) {
            html = '<div class="image-list">';
            html += '<img src ="' + val.image_url + '" class="image-styles" />';
            html += '<p class="image-title">' + val.title + '</p>';
            html += '</div>';
            target.append(html);
        });

    }); // end of on DOM READY

}(jQuery));
</script>

HTML

<div id="target"></div>

CSS

<style>
.image-list {
    position:relative;
    float: left;
    display:inline;
}
.image-styles {
    margin:15px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.image-title {
    background:#000;
    width:80%;
    position:absolute;
    bottom:15px;
    left:15px;
    color:#f7f7f7;
    text-align:center;
    padding:2px;
    opacity:0.6;
    filter:alpha(opacity=60);
    /* For IE8 and earlier */
}
</style>

About the Author

Maria C. Lima

Maria C. Lima has spent the past 10 years studying web development and becoming a sought-after independent web designer & developer in New York City. She now runs MCL Interactive, her own NYC design and technology firm, where she prides herself in providing creative web solutions for savvy entrepreneurs. She helps bring their vision to life in a beautiful and functional web presence. Her goal is to take care of all the techy stuff so that they can do what they love and work on growing their businesses. You can find her on Twitter (@mclinteractive) or on Facebook (Facebook.com/mclinteractive). Read more

Related posts

You might be interested in the following posts: