JavaScript生成的图片库
[英]Javascript Generated Image Gallery
问题描述
I am attempting to create a dynamic image gallery from JSON files using JS. 
我正在尝试使用JS从JSON文件创建动态图片库。 The final intent is to move through the nested objects in JSON, grab the image source locations and add them to a list to be displayed within a single picture box (each animal has its own box, but multiple pictures are displayed/scrolled automatically per box). 最终目的是在JSON中嵌套的对象之间移动，获取图像源位置并将它们添加到要在单个图片框内显示的列表中（每个动物都有自己的框，但是每个框会自动显示/滚动多张图片） ）。 The animal name and description are obtained as well, as a figure caption shown as an overlay for each picturebox. 还可以获得动物的名称和描述，以及作为每个图片框的覆盖图显示的图形标题。
An example of the simplified javascript (which I know will display multiple pictures per animal in a gallery, but I just want to test this in stages for understanding): 简化javascript的示例（我知道它将在画廊中为每只动物显示多张图片，但我只想分阶段进行测试以了解情况）：
$(document).ready(function() {
function displayPhotos(data) {
var photoHTML = "";
$.each(petfinder.pets,function(i,pet) {
$.each(pet.media.photos,function(i, photo){
photoHTML += '<div class="picbox"><figure><img src="' + photo.$t + '" class="frame"><figcaption>' + pet.description + '</figcaption></figure></div>';
});
}); // end each
$('#photos').html(photoHTML);
};
$.getJSON("paws.json", displayPhotos);
});
The JSON data is as follows: JSON数据如下：
{
"@encoding": "iso-8859-1",
"@version": "1.0",
"petfinder": {
"@xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
"lastOffset": {
"$t": "25"
},
"pets": {
"pet": [
{
"options": {
"option": [
{
"$t": "altered"
},
{
"$t": "hasShots"
},
{
"$t": "noDogs"
},
{
"$t": "noCats"
}
]
},
"status": {
"$t": "A"
},
"contact": {
"phone": {
"$t": "(618) 833-3647"
},
"state": {
"$t": "IL"
},
"address2": {
"$t": "N/A"
},
"email": {
"$t": "pawsplace1@yahoo.com"
},
"city": {
"$t": "Anna"
},
"zip": {
"$t": "62906"
},
"fax": {
"$t": "N/A"
},
"address1": {
"$t": "139 East Vienna Street"
}
},
"age": {
"$t": "Adult"
},
"size": {
"$t": "L"
},
"media": {
"photos": {
"photo": [
{
"@size": "pnt",
"$t": "http://photos.petfinder.com/photos/pets/26443178/1/?bust=1371662519&width=60&-pnt.jpg",
"@id": "1"
},
{
"@size": "fpm",
"$t": "http://photos.petfinder.com/photos/pets/26443178/1/?bust=1371662519&width=95&-fpm.jpg",
"@id": "1"
},
{
"@size": "x",
"$t": "http://photos.petfinder.com/photos/pets/26443178/1/?bust=1371662519&width=500&-x.jpg",
"@id": "1"
},
{
"@size": "pn",
"$t": "http://photos.petfinder.com/photos/pets/26443178/1/?bust=1371662519&width=300&-pn.jpg",
"@id": "1"
},
{
"@size": "t",
"$t": "http://photos.petfinder.com/photos/pets/26443178/1/?bust=1371662519&width=50&-t.jpg",
"@id": "1"
},
{
"@size": "pnt",
"$t": "http://photos.petfinder.com/photos/pets/26443178/2/?bust=1371662521&width=60&-pnt.jpg",
"@id": "2"
},
{
"@size": "fpm",
"$t": "http://photos.petfinder.com/photos/pets/26443178/2/?bust=1371662521&width=95&-fpm.jpg",
"@id": "2"
},
{
"@size": "x",
"$t": "http://photos.petfinder.com/photos/pets/26443178/2/?bust=1371662521&width=500&-x.jpg",
"@id": "2"
},
{
"@size": "pn",
"$t": "http://photos.petfinder.com/photos/pets/26443178/2/?bust=1371662521&width=300&-pn.jpg",
"@id": "2"
},
{
"@size": "t",
"$t": "http://photos.petfinder.com/photos/pets/26443178/2/?bust=1371662521&width=50&-t.jpg",
"@id": "2"
},
{
"@size": "pnt",
"$t": "http://photos.petfinder.com/photos/pets/26443178/3/?bust=1371662522&width=60&-pnt.jpg",
"@id": "3"
},
{
"@size": "fpm",
"$t": "http://photos.petfinder.com/photos/pets/26443178/3/?bust=1371662522&width=95&-fpm.jpg",
"@id": "3"
},
{
"@size": "x",
"$t": "http://photos.petfinder.com/photos/pets/26443178/3/?bust=1371662522&width=500&-x.jpg",
"@id": "3"
},
{
"@size": "pn",
"$t": "http://photos.petfinder.com/photos/pets/26443178/3/?bust=1371662522&width=300&-pn.jpg",
"@id": "3"
},
{
"@size": "t",
"$t": "http://photos.petfinder.com/photos/pets/26443178/3/?bust=1371662522&width=50&-t.jpg",
"@id": "3"
}
]
}
},
"id": {
"$t": "26443178"
},
"shelterPetId": {
"$t": "1"
},
"breeds": {
"breed": [
{
"$t": "Labrador Retriever"
},
{
"$t": "Pit Bull Terrier"
}
]
},
"name": {
"$t": "MIKEY"
},
"sex": {
"$t": "M"
},
"description": {
"$t": "Mikey is a Lab/Pit Bull mix who was born in August of 2011, He was adopted from PAWS after he had been found abandoned out in the middle of nowhere. The family had him for about a year, and then they got a couple more dogs. That didn't work out because Mikey prefers to be an only child (dog). He does well with people, he just prefers not to share them. He loves to cuddle, wants to be a lap dog, and he will smile for you. He's a beautiful boy, and he has been neutered, micro-chipped, dewormed, has been tested for heartworms, is current on his routine vacinations and is on a heartworm preventative. The adoption fee for him is $200.\n"
},
"mix": {
"$t": "yes"
},
"shelterId": {
"$t": "IL09"
},
"lastUpdate": {
"$t": "2013-06-19T17:21:59Z"
},
"animal": {
"$t": "Dog"
}
},
{
"options": {
"option": [
{
"$t": "altered"
},
{
"$t": "hasShots"
},
{
"$t": "housetrained"
}
]
},
"status": {
"$t": "A"
},
"contact": {
"phone": {
"$t": "(618) 833-3647"
},
"state": {
"$t": "IL"
},
"address2": {
"$t": "N/A"
},
"email": {
"$t": "pawsplace1@yahoo.com"
},
"city": {
"$t": "Anna"
},
"zip": {
"$t": "62906"
},
"fax": {
"$t": "N/A"
},
"address1": {
"$t": "139 East Vienna Street"
}
},
"age": {
"$t": "Adult"
},
"size": {
"$t": "M"
},
"media": {
"photos": {
"photo": [
{
"@size": "pnt",
"$t": "http://photos.petfinder.com/photos/pets/26605681/1/?bust=1476815920&width=60&-pnt.jpg",
"@id": "1"
},
{
"@size": "fpm",
"$t": "http://photos.petfinder.com/photos/pets/26605681/1/?bust=1476815920&width=95&-fpm.jpg",
"@id": "1"
},
{
"@size": "x",
"$t": "http://photos.petfinder.com/photos/pets/26605681/1/?bust=1476815920&width=500&-x.jpg",
"@id": "1"
},
{
"@size": "pn",
"$t": "http://photos.petfinder.com/photos/pets/26605681/1/?bust=1476815920&width=300&-pn.jpg",
"@id": "1"
},
{
"@size": "t",
"$t": "http://photos.petfinder.com/photos/pets/26605681/1/?bust=1476815920&width=50&-t.jpg",
"@id": "1"
},
{
"@size": "pnt",
"$t": "http://photos.petfinder.com/photos/pets/26605681/2/?bust=1476815921&width=60&-pnt.jpg",
"@id": "2"
},
{
"@size": "fpm",
"$t": "http://photos.petfinder.com/photos/pets/26605681/2/?bust=1476815921&width=95&-fpm.jpg",
"@id": "2"
},
{
"@size": "x",
"$t": "http://photos.petfinder.com/photos/pets/26605681/2/?bust=1476815921&width=500&-x.jpg",
"@id": "2"
},
{
"@size": "pn",
"$t": "http://photos.petfinder.com/photos/pets/26605681/2/?bust=1476815921&width=300&-pn.jpg",
"@id": "2"
},
{
"@size": "t",
"$t": "http://photos.petfinder.com/photos/pets/26605681/2/?bust=1476815921&width=50&-t.jpg",
"@id": "2"
},
{
"@size": "pnt",
"$t": "http://photos.petfinder.com/photos/pets/26605681/3/?bust=1476815922&width=60&-pnt.jpg",
"@id": "3"
},
{
"@size": "fpm",
"$t": "http://photos.petfinder.com/photos/pets/26605681/3/?bust=1476815922&width=95&-fpm.jpg",
"@id": "3"
},
{
"@size": "x",
"$t": "http://photos.petfinder.com/photos/pets/26605681/3/?bust=1476815922&width=500&-x.jpg",
"@id": "3"
},
{
"@size": "pn",
"$t": "http://photos.petfinder.com/photos/pets/26605681/3/?bust=1476815922&width=300&-pn.jpg",
"@id": "3"
},
{
"@size": "t",
"$t": "http://photos.petfinder.com/photos/pets/26605681/3/?bust=1476815922&width=50&-t.jpg",
"@id": "3"
}
]
}
},
"id": {
"$t": "26605681"
},
"shelterPetId": {
"$t": "2"
},
"breeds": {
"breed": {
"$t": "Domestic Short Hair"
}
},
"name": {
"$t": "DELILAH"
},
"sex": {
"$t": "F"
},
"description": {
"$t": "Delilah is a beautiful gray tortoiseshell female who was born around the middle of March, 2013.; She and her brother and sisters were owner surrendered because their family didn't have their mom spayed; she had kittens; and they didn't want the kittens.; Delilah is just a gorgeous, dignified lovely lady who would like nothing more than to spend hours on your lap just purring and keeping you company! Come get her and give her that chance today! We guarantee you will never regret it!"
},
"mix": {
"$t": "yes"
},
"shelterId": {
"$t": "IL09"
},
"lastUpdate": {
"$t": "2013-07-07T12:24:24Z"
},
"animal": {
"$t": "Cat"
}
}
}
1 个解决方案
解决方案1
2 已采纳 2018-05-10 11:11:02
The specified JSON was not in valid form as it is missing two } (curley braces) and one ] (right big bracket). 指定的JSON格式无效，因为它缺少两个} （大括号）和一个] （右大括号）。 I visited https://jsoneditoronline.org and corrected it. 我访问了https://jsoneditoronline.org并进行了更正。
Note: I have saved the corrected JSON file
paws.jsonat this web page on Github.paws.json。 Please use that one.
The error line is highlighted in the below image (on left). 错误线在下图（左）中突出显示。 I have added ]}} to fix the issue with JSON. 我已添加]}}来解决JSON问题。
Finally, try the below HTML code on your server. 最后，在您的服务器上尝试以下HTML代码。
Note: I am Django developer so I used Django (Python's web framework) to serve the web page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Read JSON and process</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<!-- Populate all the photos and descriptions here-->
<div id='photos'>
</div>
<!-- Code to grab pets/photos and creating div elements -->
<script type="text/javascript">
$.getJSON("paws.json' %}", function(data){
// console.log("It's great to see you here.");
// console.log(data);
var photoHTML = ''
// Storing pets to a variable named pets
var pets = data.petfinder.pets.pet; // Here pets(in paws.json) has 2 items
// Loop through pets array
$.each(pets, function(index, pet){
// console.log("PETS INDEX :", index);
// Storing photos to a varibale named photos
var photos = pet.media.photos.photo;
// Loop through photos array
$.each(photos, function(index, photo){
// console.log("PHOTO INDEX ", index);
// console.log(photo.$t)
photoHTML += '<div class="picbox"><figure><img src="' + photo.$t + '" class="frame"><figcaption>' + pet.description.$t + '</figcaption></figure></div>';
})
})
console.log(photoHTML)
$('#photos').html(photoHTML);
})
</script>
</body>
</html>
That's it. 而已。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Javascript图库 - Javascript Image Gallery
在javascript中带有缩略图的图片库 - image gallery with tumbnails in javascript
JavaScript图片库2 - JavaScript Image Gallery 2
带有数组的Javascript图片库 - Javascript Image Gallery with Array
Javascript 简单的图片库 - Javascript simple image gallery
手机Javascript图片库 - Javascript image gallery for mobile
Javascript图片库 - Javascript Image Gallery
Javascript图片库不起作用 - Javascript image gallery not working
JavaScript 缩略图图片库 - JavaScript thumbnail image gallery
基本 Javascript 图片库 - Basic Javascript Image Gallery
相关标签