iPadのSafariで開き、「ホーム画面に追加」を実施する。
次回、ホーム画面に作成されたアイコンをタップするとフルスクリーンで表示される。
または、iPadのChromeで開けばフルスクリーンで表示される。
フリックで、次の写真が表示されます。
タップで、コメントが表示されます。もう一度タップすると消えます。
以下のサイトを参考にフリックで写真をスライドさせるiPad用Webアプリを作成しました。
①jQueryでフリック／スワイプ動作の画像スライドギャラリーを作成する実験〈ﾘﾝｸ〉
②さくっと簡単！jQueryでコンテンツをオーバーレイ表示させる方法〈ﾘﾝｸ〉
以下がhtmlです。
①のスクリプトをベースに、②を参考にして、タッチでコメントをオーバーレイさせるスクリプトを追加しました。（追加とコメントしてある部分）
8行目は、Safariでフルスクリーン表示するための記述。
14～16行目は、chromeで開いたときに、仮想的なスクロールを実施することで、ツールバーを非表示にさせるために（フルスクリーンにするために）追加しました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>フリックでスライドさせるWebアプリ</title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" type="text/css" href="css/base.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/common.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function(){
window.scroll(0,0);
} // 追加
// 以下、http://black-flag.net/jquery/20120306-3710.htmlのスクリプトをコピーして作成
$(function(){
var $setMainId = $('#flickscroll');
var scrollSpeed = 300;
var overlay = false; // 追加
var $setMainUl = $setMainId.children('ul'),
listWidth = parseInt($setMainUl.children('li').css('width')),
listCount = $setMainUl.children('li').length,
leftMax = -((listWidth)*((listCount)-1));
$setMainUl.each(function(){
$(this).css({width:(listWidth)*(listCount)});
});
var isTouch = ('ontouchstart' in window);
$setMainUl.bind(
{'touchstart mousedown': function(e){
var $setMainUlNot = $setMainId.children('ul:not(:animated)');
$setMainUlNot.each(function(){
e.preventDefault();
this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
this.leftBegin = parseInt($(this).css('left'));
this.left = parseInt($(this).css('left'));
this.touched = true;
this.moved = false; // 追加
});
},'touchmove mousemove': function(e){
if(!this.touched){
return;
}
this.moved = true; // 追加
e.preventDefault();
this.left = this.left - (this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX) );
this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
if(this.left < 0 && this.left > leftMax){
$(this).css({left:this.left});
} else if(this.left >= 0) {
$(this).css({left:'0'});
} else if(this.left <= leftMax) {
$(this).css({left:(leftMax)});
}
},'touchend mouseup mouseout': function(e){
if (!this.touched) {
return;
}
this.touched = false;
if (!this.moved) {
if ( overlay == false ){
$(".description").fadeIn();
overlay = true;
}
else{
$(".description").fadeOut();
overlay = false;
}
} // 追加 http://liginc.co.jp/web/js/jquery/39777を参照
this.moved = false; //
if(this.leftBegin > this.left && (!((this.leftBegin) === (leftMax)))){
$(this).stop().animate({left:((this.leftBegin)-(listWidth))},scrollSpeed);
} else if(this.leftBegin < this.left && (!((this.leftBegin) === 0))) {
$(this).stop().animate({left:((this.leftBegin)+(listWidth))},scrollSpeed);
} else if(this.leftBegin === 0) {
$(this).css({left:'0'});
} else if(this.leftBegin <= leftMax) {
$(this).css({left:(leftMax)});
}
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="flickscroll">
<ul>
<li><img src="img/photo01.jpg" width="1024" height="768" alt="" /><div class="description">アカバナシモツケソウ</div></li>
<li><img src="img/photo02.jpg" width="1024" height="768" alt="" /><div class="description">アサギマダラ</div></li>
<li><img src="img/photo03.jpg" width="1024" height="768" alt="" /><div class="description">イブキジャコウソウ ピラタス蓼科</div></li>
<li><img src="img/photo04.jpg" width="1024" height="768" alt="" /><div class="description">イブキジャコウソウ</div></li>
</ul>
</div><!--/#flickscroll-->
<div id="overlay">
<p id="text">XXX</p>
</div>
</div><!--/#container-->
</body>
</html>
以下がcssです。
base.cssは、①のものをそのまま使いました。
common.cssは、①のものをベースに、
・幅と高さを、1024pxと768pに変更した。
・コメントを表示するdivのclassのcssを追加した。
common.css
@charset "utf-8";
/* =======================================
CommonElements
======================================= */
body {
font-size: 100%;
line-height: 140%;
font-family: Arial,Helvetica,sans-serif;
color: #000;
text-align: center;
background: #fff;
}
#container {
margin: 0 auto;
/* width: 1024px; */
text-align: center;
}
/* #flickscroll
--------------------------- */
#flickscroll {
margin: 0 auto;
width: 1024px;
height: 768px;
text-align: left;
position: relative;
top: -20px;
overflow: hidden;
cursor: pointer;
}
#flickscroll ul {
left: 0;
height: 768px;
position: absolute;
overflow: hidden;
}
#flickscroll ul li {
width: 1024px;
height: 768px;
float: left;
display: inline;
overflow: hidden;
}
.description{
display: none;
position: relative;
padding: 10px;
top: -128px;
font-size: 24px;
width: 1024px;
height:128px;
text-align: left;
color: #eee;
background: rgba(0,0,0,0.7);
}
base.css
@charset "utf-8";
/* =======================================
CSS BrowserReset BaseElements
(C)BLACKFLAG.NET ALL RIGHTS RESERVED.
http://black-flag.net/
======================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-weight: inherit;
/* outline: 0;*/
}
html {
font-size: 75%;
filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
img {
vertical-align: text-bottom;
-ms-interpolation-mode: bicubic;
}
strong {
font-weight: bold;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
/* border-collapse: separate;*/
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
vertical-align: top;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a:focus {
/*\*/
overflow: hidden;
/**/
}
option {
padding-right: 10px;
}
