Language
ログイン
言語設定
X
English
日本語 [Japanese]
アプリの説明へ
サッカー選手おみくじ
いいね!
15
Loading...
var PG = PG || {}; // ※プロパティの設定 PG.property = { image : "画像", label : "名前", address : "ポジション" } $("#push").click(function () { var list = ""; var index = 0; var random = 0; $("#result").empty(); $("#omikuji, #showAll").remove(); // 指定されたworkを全件取得 $.each(LinkData.getWorks(), function(workKey, workValue) { // workに含まれるfileを全件取得 var propUri = stringToUri(PG.property, workValue); $.each(LinkData.getFiles(workValue), function(fileKey, fileValue) { random = Math.floor( Math.random() * LinkData.getSubjects(workValue, fileValue).length); // 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/831091f7.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; index += 1; if (index === random) { $("#omikujibox").append('<div id="omikuji"><div id="omikujiInner"><p class=\"label\">ラッキーサッカー選手は:</p><h4>' + label + '</h4><img src="' + image + '" alt="image" /><p class="detail">' + detail + '</p>' + address + '<span class="button">' + addLinkToMap(latitude, longitude) + '</span></div></div>'); } }); }); }); $("#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' ); }); $("#omikuji").fadeIn(500, function(){ // 画像を折りたたむエフェクト var $folded = $('#omikuji').oriDomi({ hPanels: 8, speed: 0, shadingIntesity: .6 }); $folded.oriDomi('reveal', 1000, 'top'); setTimeout(function(){ $folded.oriDomi('reveal', 0, 'top') .oriDomi('setSpeed', 2000); }, 2000); }); setTimeout(function(){ $('html,body').animate({ scrollTop: 400 }, 1000); }, 1000); $("#omikujibox").after('<div id="showAll"><p>Show All</p><p class="off">Hide</p></div>'); $("#showAll").on('click', function() { $("#showAll p").toggleClass("off") // $("#showAll").text('Hide'); $('.photo-grid').toggle(500); }); }); // Google Mapのルート検索へのリンクを追加 function addLinkToMap( latitude, longitude ) { var str = ""; if (latitude.length != 0 && longitude.length != 0) { str = "<a target=\"_blank\" class=\"object\" href=\"http://maps.apple.com/?q=" + latitude + "," + longitude + "\">Show Map</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-image: url("http://app.linkdata.org/asset/bee56f61.jpg"); /* ※背景画像 */ background-repeat: repeat; } h4 { font-size: 120%; } .wrapper { text-align: center; } .container { width: 100%; max-width: 320px; background: #DE2900; text-align: center; margin: 0 auto; padding: 20px 20px 100px 20px; } #omikujibox { width: 100%; margin: 0 auto; padding: 10px; text-align: center; } #push { cursor: pointer; border-radius: 50px; box-shadow: 0 8px 0 rgb(121, 45, 33); margin-left: 20px; } #push:active, .tch-active { box-shadow : none; transform : translate3d(0, 8px, 0); } #slot { display: inline-block; background: #000; height: 60px; width: 100%; margin: 30px 0; } #omikuji { display: none; background: #FFF; width: 240px; margin: 0 10px; padding: 10px; font-size: 11pt; } #omikujiInner { border: solid 1px #000; } #showAll { background: #FFF; color: #000; margin: 0 20px 20px; padding: 5px 0; cursor: pointer; } .off { display: none; } .button a { color: #FFF; text-decoration: none; font-weight: bold; display: block; background: #000000; padding: 5px 30px; } .photo-grid { display:none; text-align: center; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } img { max-width: 100%; height: auto; vertical-align: middle; } .photo-grid { position: relative; max-width: 100%; word-wrap: break-word; } .photo-grid ul { list-style: none; margin: 0; padding: 0; } .flipImage{ margin: 20px; display: block; cursor: pointer; width: 240px; height: 240px; } .flipImage > .front{ position:absolute; transform: perspective( 500px ) rotateY( 0deg ); -webkit-transform: perspective( 500px ) rotateY( 0deg ); background: #E39E83; width:240px; height: 240px; 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: #8C1A00; /* ※写真の裏側の背景色 */ background-image: url("http://app.linkdata.org/asset/a98f21d5.jpg"); color: #FFFFFF; width: 240px; height: 240px; 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; } .flipImage .detail { background: #650000; color: #FFF; 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: #000; width: 92%; color: #FFF; 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 ); }
<div id="wrapper" class="wrapper"> <div id="container" class="container"> <div id="omikujibox"> <img src="http://app.linkdata.org/asset/52c0aef8.png" /> <img id="push" src="http://app.linkdata.org/asset/b360f3c0.png" /> <div id="slot"></div> </div> <div class="photo-grid clearfix"> <ul id="result"> </ul> </div> </div> </div>
実行画面
入力データ
概要
保存した実行結果
データ作品
テーブルデータ
日本のサッカー選手
作者:太田朔久
更新日:2017年10月27日
558 ダウンロード, 3 アプリケーション
ハッカソンで作った日本のサッカー選手です。 共通語彙基盤を使いました。
soccer_nihon_daihyo
[
]
データ作品を追加する
Link http://app.linkdata.org/run/app1s1536i?tab=readme
jquery-1.11.2.min.js
imgLiquid.js
oridomi.min.js
Work
追加
クリア
insert work id or work name.