リンクを知っている人にのみ公開

千駄ヶ谷データギャラリー

fullscreen

T.Waka

パタパタフォトギャラリーからForkして作成したアプリです。

評価指数

アプリケーション

Play
JavaScript
CSS
HTML
概要
保存した実行結果

var PG = PG || {};

// ※表示タイトル
PG.title = "千駄ヶ谷データギャラリー";

// ※プロパティの設定
PG.property = {
	image : "http://schema.org/image",
	label : "http://www.w3.org/2000/01/rdf-schema#label",
	detail : "http://purl.org/dc/elements/1.1/description",
	address : "http://schema.org/address",
	long : "http://www.w3.org/2003/01/geo/wgs84_pos#long",
	lat : "http://www.w3.org/2003/01/geo/wgs84_pos#lat"
}

// 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;
  }
}

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<title>千駄ヶ谷データギャラリー</title>
		
				
		
		<link rel="stylesheet" type="text/css" media="screen,print" href="user.css" />
		
		<script type="text/javascript">
			(function(){
				try {
					var e = function(){return ""};
				 	var f = function(){return false};
				 	Object.defineProperty(document, "cookie", { get: e, set: e, configurable:false });
				 	Object.defineProperty(navigator, "cookieEnabled", { get: f, set: f, configurable:false });
				} catch(e) { 
					/* not supported */
				}
			})();		
		</script>
	</head>
	<body>
		
		
		
		
		<div id="applicationWorkFileListContainer">
											<div class="applicationWorkFile">
					<input type="hidden" class="applicationWorkFileWorkId" value="rdf1s7853i"/>
					<input type="hidden" class="applicationWorkFileName" value="OpenDataSoftCream"/>
					<input type="hidden" class="applicationWorkFileWorkName" value="千駄ヶ谷データ"/>
					<input type="hidden" class="applicationWorkTag" value=""/>
				</div>
									</div>
		
		
		<div id="wrapper" class="wrapper">  <div id="container" class="container">    <div class="photo-grid clearfix">      <ul id="result">      </ul>    </div>  </div></div>
		
									<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
												<script type="text/javascript" src="imgLiquid.js"></script>	
							
		
				
			<script type="text/javascript" src="http://app.linkdata.org/js/script.js"></script>
			<script type="text/javascript">
				var workFileObj = new Object();
									workFileObj['rdf1s7853i|Sendagaya_data16'] = 'Sendagaya_data16';
								LinkData.databases = workFileObj;
				LinkData.userdata = new Array(1);
				
													LinkData.userdata['rdf1s7853i'] = new Array(1);
											LinkData.__fnrdf1s7853i = function(data) {
							LinkData.userdata['rdf1s7853i']['Sendagaya_data16'] = data;
						}
																			
			</script>
			
							<script src='http://linkdata.org/api/1/rdf1s7853i/OpenDataSoftCream_rdf.json?callback=LinkData.__fnrdf1s7853i' type='text/javascript'></script>
						
				
		
		<script type="text/javascript" src="user.js"></script>
	</body>
</html>

ダウンロード

作者メッセージ送信	T.Waka
Fork元のアプリ	Sayoko Shimoyama 's パタパタフォトギャラリー
実行回数	90
ウェブサイト
ライセンス
Fork count	0
作成日	2019年3月18日
最終更新日	2019年3月19日