Language
Login
Language Setting
X
English
日本語 [Japanese]
about this App
西山動物園レッサーパンダギャラリー
useful
0
Loading...
var PG = PG || {}; // ※表示タイトル PG.title = "西山動物園レッサーパンダギャラリー"; // ※プロパティの設定 PG.property = { image : "phote", label : "name", detail : "placeofbirth ", address : "residence", long : "http://www.w3.org/2003/01/geo/wgs84_pos#long", lat : "http://www.w3.org/2003/01/geo/wgs84_pos#lat" } window.onload = function() { var list = ""; $("#container").prepend("<h3>" + PG.title + "</h3>"); // 指定されたworkを全件取得 $.each(LinkData.getWorks(), function(workKey, workValue) { // workに含まれるfileを全件取得 var propUri = stringToUri(PG.property, workValue); $.each(LinkData.getFiles(workValue), function(fileKey, fileValue) { // subjectを全件取得 $.each(LinkData.getSubjects(workValue, fileValue), function(subjKey, subjValue) { var image = ""; var label = ""; var detail = ""; var address = ""; var longitude = ""; var latitude = ""; var str = ""; $.each( LinkData.getTriplesBySubject(workValue, fileValue, subjValue), function( tripleKey, tripleValue ) { var prop = tripleValue.property; var obj = tripleValue.object; if ( prop == propUri.image ) image = obj; else if ( prop == propUri.label ) label = obj ; else if ( prop == propUri.detail ) detail = obj ; else if ( prop == propUri.address && obj.length != 0) address = "<p class=\"address\"><img src=\"http://app.linkdata.org/asset/47cb55da.png\" />" + obj + "</p>" ; else if ( prop == propUri.long ) longitude = obj; else if ( prop == propUri.lat ) latitude = obj; }); str += "<li class=\"flipImage\"><div class=\"front\"><a href='#'><img src=\"" + image + "\" alt=\"image\" /></a></div><div class=\"back\"><p class=\"label\">" + label + "<p class=\"detail\">" + detail + "</p>" + address + "<span class=\"button\">" + addLinkToMap(latitude, longitude) + "</span></div></li>" list += str; }); }); }); $("#result").append( list ); // 画像を正方形にトリミング $(".front").imgLiquid(); // 画像が読み込めなかった時の処理 $("img").error(function(){ $(this).before("No Image"); }); $( 'a' ) .bind( 'touchstart', function(){ $( this ).addClass( 'hover' ); }).bind( 'touchend', function(){ $( this ).removeClass( 'hover' ); }); }; // Google Mapのルート検索へのリンクを追加 function addLinkToMap( latitude, longitude ) { var str = ""; if (latitude.length != 0 && longitude.length != 0) { str = "<a target=\"_blank\" class=\"object\" href=\"http://maps.google.co.jp/maps?daddr=" + latitude + "," + longitude + "\">ルート検索</a>" } return str; } function stringToUri (p, workId) { $.each (p, function(propKey, propVal){ if(propVal.indexOf("http") != 0){ p[propKey] = "http://linkdata.org/property/" + workId + "#" + encodeURIComponent(propVal); } }) return p; }
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; } body { background: #FFFFF; background-image: url("http://app.linkdata.org/asset/dc4bcdc8.png"); /* ※背景画像 */ background-repeat: repeat; } h3 { background: #C8E9EC; /* ※タイトルの背景色 */ color: #777; /* ※タイトルの文字色 */ text-align: center; font-size: 190%; margin: 5px; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } img { max-width: 100%; height: auto; vertical-align: middle; } .wrapper { text-align: center; } .container { width: 1080px; text-align: left; margin: 0 auto; padding: 20px; } .photo-grid { position: relative; max-width: 100%; word-wrap: break-word; } .photo-grid ul { list-style: none; margin: 0; padding: 0; } .flipImage{ margin: 5px; float: left; display: block; cursor: pointer; width: 250px; height: 250px; } .flipImage > .front{ position:absolute; transform: perspective( 500px ) rotateY( 0deg ); -webkit-transform: perspective( 500px ) rotateY( 0deg ); background: #E39E83; width:250px; height: 250px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .5s linear 0s; -webkit-transition: transform .5s linear 0s; } .flipImage .front a { color: #dddddd; font-size: 180%; font-weight: bold; text-align: center; line-height: 250px; text-decoration: none; } .flipImage > .back{ position:absolute; transform: perspective( 500px ) rotateY( 180deg ); -webkit-transform: perspective( 500px ) rotateY( 180deg ); background: #9A7B65; /* ※写真の裏側の背景色 */ color: #FFFFFF; width: 250px; height: 250px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .5s linear 0s; -webkit-transition: transform .5s linear 0s; } .flipImage p { margin: 5px 10px; font-size: 9pt; } p.detail { background: #FFF; color: #9A7B65; padding: 5px; max-height: 130px; } p.address img { margin: 0 5px; } .flipImage p.label { font-weight: bold; font-size: 14pt; } .flipImage .button { display: block; text-align: center; width: 100%; } .flipImage .button a { display: inline-block; background: #83DAE3; width: 92%; color: #777; text-decoration: none; padding: 7px; margin: 0 10px; font-weight: bold; } .flipImage:hover > .front{ transform: perspective( 600px ) rotateY( -180deg ); -webkit-transform: perspective( 600px ) rotateY( -180deg ); } .flipImage:hover > .back{ transform: perspective( 600px ) rotateY( 0deg ); -webkit-transform: perspective( 600px ) rotateY( 0deg ); } @media only screen and (max-width: 1080px) { .container { width: 820px; } .photo-grid li:last-child { display: none; } } @media only screen and (max-width: 820px) { .container { width: 560px; } .photo-grid li:last-child { display: inline-block; } } @media only screen and (max-width: 560px) { .container { width: 300px; } .photo-grid li:last-child { display: inline-block; } }
<div id="wrapper" class="wrapper"> <div id="container" class="container"> <div class="photo-grid clearfix"> <ul id="result"> </ul> </div> </div> </div>
Preview
Input Data
ReadMe
Snapshots
LinkData Work
Table Data
西山動物園レッサーパンダ
Contributor:Sabae City
Update:Jan 17, 2016
544 Downloads, 8 Applications
sabaeredpanda
[
]
Add LinkData work(LinkData)
Link http://app.linkdata.org/run/app1s1231i?tab=readme
jquery-1.11.2.min.js
imgLiquid.js
Work
Add
Clear
insert work id or work name.