forked:パタパタフォトギャラリー「日本のサッカー選手」

fullscreen

中山碧

写真がパタパタ回るフォトギャラリーアプリです。マウスオーバーすると写真が回転して、詳細情報や地図へのリンクが表示されます。逆マッシュアップで作りました。

Rating

useful

Application

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

var PG = PG || {};

// ※表示タイトル
PG.title ="日本のサッカー選手データギャラリー";

// ※プロパティの設定
PG.property = {
	image : "画像",
	label : "名前",
	detail : "参照",
	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/f8a2076d.jpg"); /* ※背景画像 */
	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;
  }
}

Fork this app as your new one download

Web Search

Contributor Send Message	中山碧
Collaborators	Hirokazu Tokuno Sayoko Shimoyama sakuota
Forked from (Parent App)	Sayoko Shimoyama 's パタパタフォトギャラリー
Run count	304
Website
License
Fork count	0
Created date	Oct 9, 2017
Last update date	Oct 9, 2017