Javascript生成的图像库 [英] Javascript Generated Image Gallery
本文介绍了Javascript生成的图像库的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用JS从JSON文件创建动态图库。最后的目的是在JSON中移动嵌套对象，抓取图像源位置并将它们添加到列表中以显示在单个图片框中（每个动物都有自己的框，但每个框自动显示/滚动多个图片）。动物名称和描述也被获得，作为每个图片框的叠加显示的图形标题。
简化的javascript示例（我知道将显示多个图库中每只动物的图片，但我只是想分阶段进行测试以便理解）：
$（文件）.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>';
}）;
}）; //结束每个
$（'＃photos'）。html（photoHTML）;
};
$ .getJSON（paws .json，displayPhotos）;
}）;
JSON数据如下：
{
@encoding：iso-8859-1，
@ version：1.0，
petfinder：{
@xmlns：xsi：http://www.w3.org/2001/XMLSchema-instance，
lastOffset：{
$ t：25
}，
宠物：{
宠物：[
{
期权：{
期权：[
{
$ t：已更改
}，
{
$ t：hasShots
}，
{
$ t：noDogs
}，
{
$ t：noCats
}
]
}，
状态：{
$ t：A
}，
联系人：{
电话：{
$ t：（618）833-3647
}，
州：{
$ t：IL
}，
address2：{
$ t：N / A
}，
电子邮件 ：{
$ t：pawsplace1@yahoo.com
}，
city：{
$ t：Anna
} ，
zip：{
$ t：62906
}，
传真：{
$ t：N / A
}，
地址1：{
$ t：139东维也纳街
}
}，
年龄： {
$ t：成人
}，
尺寸：{
$ t：L
}，
媒体：{
照片：{
照片：[
{
@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
}，
{
@尺寸：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
}，
品种：{
品种：[
{
$ t： 拉布拉多猎犬
}，
{
$ t：斗牛梗
}
]
}，
名称：{
$ t：MIKEY
}，
性别：{
$ t：M
}，
说明：{
$ t：Mikey是一名实验室/比特斗牛队的混合体，出生于2011年8月，他被PAWS收录后被发现被遗弃在中间地区。这家人有他一年左右，然后他们又养了几条狗。这没有成功，因为Mikey更喜欢独生子（狗）。他对人很好，他只是不愿意分享。他喜欢搂抱，想成为一只小狗，他会为你微笑。他是一个漂亮的男孩，他已被绝育，微芯片，驱虫，已接受心丝虫测试，目前正在进行他的常规假期，并预防心丝虫。他的领养费是$ 200.\
}，
mix：{
$ t：是
}，
shelterId：{
$ t：IL09
}，
lastUpdate：{
$ t：2013-06-19T17：21：59Z
}，
动物：{
$ t：狗
}
}，
{
期权：{
选项：[
{
$ t：已更改
}，
{
$ t： hasShots
}，
{
$ t：housetrained
}
]
}，
status：{
$ t：A
}，
联系人：{
电话：{
$ t：（618）833 -3647
}，
州：{
$ t：IL
}，
address2：{
$ t：N / A
}，
email：{
$ t： pawsplace1@yahoo.com
}，
city：{
$ t：Anna
}，
zip：{
$ t：62906
}，
传真：{
$ t：N / A
}，
地址1：{
$ t：139 East Vienna Street
}
}，
age：{
$ t：Adult
}，
尺寸：{
$ t：M
}，
媒体：{
照片 ：{
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
}，
{
@尺寸：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
}，
品种：{
品种：{
$ t：国内短发
}
}，
名称：{
$ t：DELILAH
}，
性别：{
$ t：F
}，
description：{
$ t：Delilah is一位美丽的灰色玳瑁女，出生于2013年3月中旬左右。她和她的兄弟姐妹都被投降了，因为他们的家人没有让他们的妈妈受到伤害;她有小猫;他们不想要小猫。 Delilah只是一位华丽，有尊严的可爱女士，她只想在你的膝盖上花几个小时咕噜咕噜叫，让你保持联系！快来找她，给她今天的机会吧！我们保证你永远不会后悔！
}，
mix：{
$ t：是
}，
shelterId： {
$ t：IL09
}，
lastUpdate：{
$ t：2013-07-07T12：24：24Z
}，
animal：{
$ t：Cat
}
}
}
解决方案
指定的JSON格式不正确，因为缺少两个} （curley braces）和一个] （右大括号）。我访问了
最后，在您的服务器上尝试以下HTML代码。
注意：我是Django开发人员所以我使用Django（Python的Web框架）来提供网页。它工作正常。
<！doctype html>
< html lang =en>
< head>
< meta charset =utf-8>
< title>阅读JSON并处理< / title>
< script src =https://code.jquery.com/jquery-1.10.2.js>< / script>
< / head>
< body>
<！ - 填写所有照片和说明 - >
< div id ='photos'>
< / div>
<！ - 获取宠物/照片和创建div元素的代码 - >
< script type =text / javascript>
$ .getJSON（paws.json'％}，函数（数据）{
// console.log（很高兴见到你。）;
// console .log（数据）;
var photoHTML =''
//将宠物存储到名为pets的变量中
var pets = data.petfinder.pets.pet; //这里宠物（在paws.json中）有2项
//循环宠物数组
$ .each（宠物，函数（索引，宠物）{
// console.log （PETS INDEX：，索引）;
//将照片存储到名为photos的varibale
var photos = pet.media.photos.photo;
//循环播放照片数组
$ .each（照片，功能（索引，照片）{
// console.log（PHOTO INDEX，索引）;
// console.log（照片。$ t）
photoHTML + ='< div class =picbox><图>< img src ='+ photo。$ t +'class =frame>< figcaption>'+ pet。说明。$ t +'< / figcaption>< / figure>< / div> ;
}）
}）
的console.log（photoHTML）
$（＃照片）HTML（photoHTML）。
}）
< / script>
< / body>
< / html>
就是这样。
I am attempting to create a dynamic image gallery from JSON files using JS. 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). 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):
$(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:
{
"@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"
}
}
}
解决方案
The specified JSON was not in valid form as it is missing two } (curley braces) and one ] (right big bracket). I visited https://jsoneditoronline.org and corrected it.
Note: I have saved the corrected JSON file
paws.jsonat this web page on Github. Please use that one.
The error line is highlighted in the below image (on left). I have added ]}} to fix the issue with JSON.
Finally, try the below HTML code on your server.
Note: I am Django developer so I used Django (Python's web framework) to serve the web page. It worked fine.
<!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.
这篇关于Javascript生成的图像库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
