getJSON - how to retrieve data and images in .json file and display images in html
Hello All, I'm new to JQuery and I'm having a tough time with a problem I'm trying to solve.
Using $.getJSON function, I need to retrieve the data in the .json file and display the images in a gallery. The gallery should display each image at roughly thumbnail size with its caption below it in a 3-column grid at desktop resolution.
I can get the .json data to output on the HTML page, but I'm stuck after that. Any help or suggestions are much appreciated. Thanks!
output so far:
- URL: images/image_1.jpg
-
caption: Image 1 Caption
-
URL: images/image_2.jpg
-
caption: Image 2 Caption
-
URL: images/image_3.jpg
-
caption: Image 3 Caption
-
URL: images/image_4.jpg
- caption: Image 4 Caption
index.html
item.json
- {
- "items": [
- {
- "url": "images/image_1.jpg",
- "caption": "Image 1 Caption"
- },
- {
- "url": "images/image_2.jpg.jpg",
- "caption": "Image 2 Caption"
- },
- {
- "url": "images/image_3.jpg.jpg",
- "caption": "Image 3 Caption"
- },
- {
- "url": "images/image_4.jpg.jpg",
- "caption": "Image 4 Caption"
- }
- ]
- }
script.js
-
- $(document).ready( function(){
- $.getJSON('item.json', function(data) {
- $.each(data.items, function(i,f) {
- $("ul").append("<img src="+f.url+" id="image"/><li>Caption: "+f.caption+"</li><br />");
- });
- });
- });