Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    JQuery $.getJSON function help

    Hello All, I'm new to JQuery and I'm having a tough time getting started on a homework assignment. Any help or suggestions are much appreciated.

    Using jQUery's $.getJSON function, retrieve the data in the images.json file provided and display the images in a gallery below. The gallery should display each image at roughly thumbnail size with its caption below it in a 3-column grid at desktop resolution. Smaller resolutions may use fewer columns if you want to make this responsive. You may make any edits to the HTML page that you want.

    .html file:
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Title</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
    
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
            <link rel="stylesheet" href="css/styles.css">
        </head>
        <body>
    
            <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="index.html">Title</a>
                    </div>
                </div>
            </div>
    
            <div class="container">
                
                <h1>JSON Image Gallery</h1>
                
                <h2>Instructions</h2>
                
                <p>Using jQUery's <code>$.getJSON</code> function, retrieve the data in the <a href="images.json"><code>images.json</code></a> file provided and display the images in a gallery below. The gallery should display each image at roughly thumbnail size with its caption below it in a 3-column grid at desktop resolution. Smaller resolutions may use fewer columns if you want to make this responsive. You may make any edits to this <code>json.html</code> page that you want.</p>
    
                <h3>CSS</h3>
                <p>Use Bootstrap styles as much as possible, but you may write your own CSS in the <a href="css/styles.css"><code>css/styles.css</code></a> file.</p>
    
                <h3>JavaScript</h3>
                <p>Use the <a href="js/json-scripts.js"><code>js/json-scripts.js</code></a> file for your <code>$.getJSON</code> and other JavaScript functions if possible.</p>
    
                <hr>
    
                <div id="gallery">
                    <p><strong>***Gallery goes here***</strong></p>
                </div>
    
                <hr>
    
                <footer>
                    <p>Footer Here</p>
                </footer>
            </div>
    
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="js/jquery-1.11.1.min.js"><\/script>')</script>
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
            <script src="js/json-scripts.js"></script>
    
        </body>
    </html>
    .json file:
    Code:
    {
    	"items": [
    		{
    			"url": "images/Russian_Blue_kitten.jpg",
    			"caption": "Russian Blue Kitten"
    		},
    		{
    			"url": "images/kitten_grass.jpg",
    			"caption": "Kitten in Grass"
    		},
    		{
    			"url": "images/Bengal_kitten.jpg",
    			"caption": "Bengal Kitten"
    		},
    		{
    			"url": "images/jumping_kittens.jpg",
    			"caption": "Jumping Kittens"
    		},
    		{
    			"url": "images/kitten_tree.jpg",
    			"caption": "Kitten in Tree"
    		},
    		{
    			"url": "images/kittens_sleeping.jpg",
    			"caption": "Kittens Sleeping"
    		},
    		{
    			"url": "images/kittens_box.jpg",
    			"caption": "Kittens in a Box"
    		},
    		{
    			"url": "images/kitten_ball.jpg",
    			"caption": "Kitten with a Ball"
    		},
    		{
    			"url": "images/yin_yang_kittens.jpg",
    			"caption": "Yin Yang Kittens"
    		},
    		{
    			"url": "images/kittens_basket.jpg",
    			"caption": "Kittens in a Basket"
    		},
    		{
    			"url": "images/kitten_close_up.jpg",
    			"caption": "Kitten Close-up"
    		},
    		{
    			"url": "images/mother_and_kittens.jpg",
    			"caption": "Mother and Kittens"
    		}
    	]
    }

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    which part are you stuck on? you should be aware that few people will be willing to write your code for you, especially if it's homework. if you show an effort and ask specific questions you are much more likely to get help

  • #3
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for the advise, I will take that into consideration. My apologies.

    I have created my JavaScript file and I cant get anything to output. Any suggestions?

    Code:
    $(document).ready( function(){
    	$.getJSON('items.json', function(data) {
    	    $.each(data.items, function(i,f) {
    	        $("ul").append("<li>URL: "+f.url+"</li><li>Caption: "+f.caption+"</li><br />");
    
    	    });
    	});
    });

  • #4
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Update, I was able to get the list on the HTML page. I forgot the <ul></ul> in my HTML page.

    Output now:


    • URL: images/Russian_Blue_kitten.jpg
    • Caption: Russian Blue Kitten



    • URL: images/kitten_grass.jpg
    • Caption: Kitten in Grass



    • URL: images/Bengal_kitten.jpg
    • Caption: Bengal Kitten


    Any suggestion oh how to display the actual images on the page instead of the URL text?

    Thank you for all of your help!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •