How To Display A List Of Images From A JSON Object

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="https://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>

RELATED

You might be interested in the following: