JavaScript生成的圖片庫
[英]Javascript Generated Image Gallery
問題描述
我正在嘗試使用JS從JSON文件創建動態圖片庫。 最終目的是在JSON中嵌套的對象之間移動，獲取圖像源位置並將它們添加到要在單個圖片框內顯示的列表中（每個動物都有自己的框，但是每個框會自動顯示/滾動多張圖片） ）。 還可以獲得動物的名稱和描述，以及作為每個圖片框的覆蓋圖顯示的圖形標題。
簡化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);
});
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
指定的JSON格式無效，因為它缺少兩個} （大括號）和一個] （右大括號）。 我訪問了https://jsoneditoronline.org並進行了更正。
注意：我已經在Github的此網頁上保存了更正的JSON文件
paws.json。 請使用那個。
錯誤線在下圖（左）中突出顯示。 我已添加]}}來解決JSON問題。
最后，在您的服務器上嘗試以下HTML代碼。
注意：我是Django開發人員，因此我使用Django（Python的Web框架）來提供網頁。 工作正常。
<!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>
而已。
Javascript圖庫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.