インスタグラムみたいに画像を並べてそれをリンクつきにするというサイトをjsonで管理できるようにして作成しているのですがリンク先も同じ形式のサイトを想像しているのでそれもjsonで管理したいと思いできるようにしたいのですがどうすればいいかわかりせん。このようなjsonの形式でトップページにtitleが入り押すとそれぞれのリンクを作成してそのリンクに繋がりそれぞれの内容に入れ替わるようにしたいです。よ内容というのがdateからしたに入っている内容を出力したいです。簡単に言いますと一つのjsonでトップページの内容から次のリンクの内容までを出力できるようにしたいです。現在jsは枠だけは作れたのですがリンク別に作成するところで止まっている状態です。
json
1[ 2 3 { 4 "titile1": 5 { 6 "date":"20xx-x", 7 "description":"説明が入ります", 8 "img":"./imgs/IMG1.jpg", 9 "subimg": "./imgs/IMG5.jpg" 10 } 11 }, 12 { 13 "titile2": 14 { 15 "date":"20xx-x", 16 "description":"説明が入ります", 17 "img":"./imgs/IMG2jpg", 18 "subimg": "./imgs/IMG5.jpg" 19 } 20 }, 21 { 22 "titile3": 23 { 24 "date":"20xx-x", 25 "description":"説明が入ります", 26 "img":"./imgs/IMG3.jpg", 27 "subimg": "./imgs/IMG5.jpg" 28 } 29 }, 30 { 31 "titile4": 32 { 33 "date":"20xx-x", 34 "description":"説明が入ります", 35 "img":"./imgs/IMG4.jpg", 36 "subimg": "./imgs/IMG5.jpg" 37 } 38 }, 39]
js
1$(function() 2{ 3 $.ajax({ 4 type: 'post', 5 url: 'json/contents.json', 6 async: true, 7 cache: false, 8 dataType: 'json', 9 scriptCharaset: 'utf-8', 10 success: function(data) 11 { 12 for(var i=0;i<data.length;i++) 13 { 14 var imgDiv = $('<a></a>').attr('href', data[i]["path"]); 15 var img = $('<div>').attr({'class':'col-md-4 imgCol'}); 16 img.append($('<div class="imgContainer"></div>') 17 .append($('<img>').attr({"src":data[i]["img"],"width":"100%","height":"350px"})) 18 .append($('<div class="imgCover"><div class="coverTitle">'+data[i]["title"]+'</div></div>'))); 19 20 img.appendTo(imgDiv); 21 imgDiv.appendTo($('#jsonData')); 22 } 23 }, 24 }) 25}); 26
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ポートフォリオサイト</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="./css/jquery-ui.min.css"> <link rel="stylesheet" href="./css/style.css"> <!-- Meta --> <meta name="description" content="ポートフォリオサイトです。"> <meta name="keywords" content="キーワード"> <meta name="language" content="ja"> <!-- Favicon --> <link rel="shortcut icon" href="http://example.com/imgs/favicon.ico"> <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> </head> <body> <div class="main"> <div class="container"> <div class="row" id="jsonData"> <!--ここにインスタグラムみたいに画像が並んでそれをそれぞれリンク別に出力したいです--> </div> </div> </div> <script src="jquery-2.1.3.min.js"></script> <script src="./bootstrap/js/bootstrap.min.js"></script> <script src="jquery-ui.min.js"></script> <script src="main.js"></script> </body> </html>