2013-08-31

iPad：フリックで写真をスライドさせるiPad用Webアプリ

サンプル

iPadのSafariで開き、「ホーム画面に追加」を実施する。
次回、ホーム画面に作成されたアイコンをタップするとフルスクリーンで表示される。

または、iPadのChromeで開けばフルスクリーンで表示される。

フリックで、次の写真が表示されます。
タップで、コメントが表示されます。もう一度タップすると消えます。

以下のサイトを参考にフリックで写真をスライドさせるiPad用Webアプリを作成しました。

①jQueryでフリック／スワイプ動作の画像スライドギャラリーを作成する実験〈ﾘﾝｸ〉
②さくっと簡単！jQueryでコンテンツをオーバーレイ表示させる方法〈ﾘﾝｸ〉


以下がhtmlです。

①のスクリプトをベースに、②を参考にして、タッチでコメントをオーバーレイさせるスクリプトを追加しました。（追加とコメントしてある部分）

8行目は、Safariでフルスクリーン表示するための記述。

14～16行目は、chromeで開いたときに、仮想的なスクロールを実施することで、ツールバーを非表示にさせるために（フルスクリーンにするために）追加しました。


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>フリックでスライドさせるWebアプリ</title>
  6. <meta http-equiv="content-style-type" content="text/css" />
  7. <meta http-equiv="content-script-type" content="text/javascript" />
  8. <meta name="apple-mobile-web-app-capable" content="yes" />
  9. <link rel="stylesheet" type="text/css" href="css/base.css" media="all" />
  10. <link rel="stylesheet" type="text/css" href="css/common.css" media="all" />
  11. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  12. <script type="text/javascript">
  13.  
  14. window.onload = function(){
  15.  window.scroll(0,0);
  16. }  // 追加
  17.  
  18. // 以下、http://black-flag.net/jquery/20120306-3710.htmlのスクリプトをコピーして作成
  19.  
  20. $(function(){
  21.  var $setMainId = $('#flickscroll');
  22.  var scrollSpeed  = 300;
  23.  
  24.  var overlay = false; // 追加 
  25.  
  26.  var $setMainUl = $setMainId.children('ul'),
  27.  listWidth = parseInt($setMainUl.children('li').css('width')),
  28.  listCount = $setMainUl.children('li').length,
  29.  leftMax = -((listWidth)*((listCount)-1));
  30.  
  31.  $setMainUl.each(function(){
  32.   $(this).css({width:(listWidth)*(listCount)});
  33.  });
  34.  
  35.  var isTouch = ('ontouchstart' in window);
  36.  $setMainUl.bind(
  37.   {'touchstart mousedown': function(e){
  38.    var $setMainUlNot = $setMainId.children('ul:not(:animated)');
  39.    $setMainUlNot.each(function(){
  40.     e.preventDefault();
  41.     this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
  42.     this.leftBegin = parseInt($(this).css('left'));
  43.     this.left = parseInt($(this).css('left'));
  44.     this.touched = true;
  45.     this.moved = false; // 追加 
  46.    });
  47.   },'touchmove mousemove': function(e){
  48.    if(!this.touched){
  49.     return;
  50.    }
  51.    this.moved = true; // 追加 
  52.    e.preventDefault();
  53.    this.left = this.left - (this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX) );
  54.    this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
  55.  
  56.    if(this.left < 0 && this.left > leftMax){
  57.     $(this).css({left:this.left});
  58.    } else if(this.left >= 0) {
  59.     $(this).css({left:'0'});
  60.    } else if(this.left <= leftMax) {
  61.     $(this).css({left:(leftMax)});
  62.    }
  63.   },'touchend mouseup mouseout': function(e){
  64.    if (!this.touched) {
  65.     return;
  66.    }
  67.    this.touched = false;
  68.  
  69.    if (!this.moved) {
  70.     if ( overlay == false ){
  71.               $(".description").fadeIn();
  72.      overlay = true;
  73.     }
  74.     else{
  75.               $(".description").fadeOut();
  76.      overlay = false;
  77.     }
  78.    } // 追加  http://liginc.co.jp/web/js/jquery/39777を参照
  79.    this.moved = false; // 
  80.  
  81.    if(this.leftBegin > this.left && (!((this.leftBegin) === (leftMax)))){
  82.     $(this).stop().animate({left:((this.leftBegin)-(listWidth))},scrollSpeed);
  83.    } else if(this.leftBegin < this.left && (!((this.leftBegin) === 0))) {
  84.     $(this).stop().animate({left:((this.leftBegin)+(listWidth))},scrollSpeed);
  85.    } else if(this.leftBegin === 0) {
  86.     $(this).css({left:'0'});
  87.    } else if(this.leftBegin <= leftMax) {
  88.     $(this).css({left:(leftMax)});
  89.    }
  90.   }
  91.  });
  92.  
  93. });
  94. </script>
  95. </head>
  96.  
  97. <body>
  98.  
  99. <div id="container">
  100.  
  101. <div id="flickscroll">
  102. <ul>
  103. <li><img src="img/photo01.jpg" width="1024" height="768" alt="" /><div class="description">アカバナシモツケソウ</div></li>
  104. <li><img src="img/photo02.jpg" width="1024" height="768" alt="" /><div class="description">アサギマダラ</div></li>
  105. <li><img src="img/photo03.jpg" width="1024" height="768" alt="" /><div class="description">イブキジャコウソウ　ピラタス蓼科</div></li>
  106. <li><img src="img/photo04.jpg" width="1024" height="768" alt="" /><div class="description">イブキジャコウソウ</div></li>
  107. </ul>
  108. </div><!--/#flickscroll-->
  109.  
  110. <div id="overlay">
  111.    <p id="text">XXX</p>
  112. </div>
  113.  
  114. </div><!--/#container-->
  115.  
  116.  
  117.  
  118.  
  119. </body>
  120. </html>
  121.  
  122.


以下がcssです。

base.cssは、①のものをそのまま使いました。
common.cssは、①のものをベースに、
・幅と高さを、1024pxと768pに変更した。
・コメントを表示するdivのclassのcssを追加した。

common.css

  1. @charset "utf-8";
  2.  
  3. /* =======================================
  4.  
  5.  CommonElements
  6.  
  7. ======================================= */
  8. body {
  9.  font-size: 100%;
  10.  line-height: 140%;
  11.  font-family: Arial,Helvetica,sans-serif;
  12.  color: #000;
  13.  text-align: center;
  14.  background: #fff;
  15. }
  16.  
  17.  
  18. #container {
  19.  margin: 0 auto;
  20. /* width: 1024px; */
  21.  text-align: center;
  22. }
  23.  
  24. /* #flickscroll
  25. --------------------------- */
  26. #flickscroll {
  27.  margin: 0 auto;
  28.  width: 1024px; 
  29.  height: 768px; 
  30.  text-align: left;
  31.  position: relative;
  32.  top: -20px;
  33.  overflow: hidden;
  34.  cursor: pointer;
  35. }
  36. #flickscroll ul {
  37.  left: 0;
  38.  height: 768px; 
  39.  position: absolute;
  40.  overflow: hidden;
  41. }
  42. #flickscroll ul li {
  43.  width: 1024px;
  44.  height: 768px; 
  45.  float: left;
  46.  display: inline;
  47.  overflow: hidden;
  48. }
  49.  
  50. .description{
  51.  display: none;
  52.  position: relative;
  53.  padding: 10px;
  54.  top: -128px;
  55.  font-size: 24px;
  56.     width: 1024px;
  57.     height:128px;
  58.     text-align: left;
  59.     color: #eee;
  60.     background: rgba(0,0,0,0.7);
  61. }
  62.  
  63.  
  64.


base.css


  1. @charset "utf-8";
  2.  
  3. /* =======================================
  4.  
  5.   CSS BrowserReset BaseElements
  6.  
  7.   (C)BLACKFLAG.NET ALL RIGHTS RESERVED.
  8.   http://black-flag.net/
  9.  
  10.  ======================================= */
  11.  
  12. html, body, div, span, applet, object, iframe,
  13. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  14. a, abbr, acronym, address, big, cite, code,
  15. del, dfn, em, font, img, ins, kbd, q, s, samp,
  16. small, strike, strong, sub, sup, tt, var,
  17. dl, dt, dd, ol, ul, li,
  18. fieldset, form, label, legend,
  19. table, caption, tbody, tfoot, thead, tr, th, td {
  20.  margin: 0;
  21.  padding: 0;
  22.  border: 0;
  23.  vertical-align: baseline;
  24.  font-family: inherit;
  25.  font-style: inherit;
  26.  font-weight: inherit;
  27. /* outline: 0;*/
  28. }
  29.  
  30. html {
  31.  font-size: 75%;
  32.  filter: expression(document.execCommand("BackgroundImageCache", false, true));
  33. }
  34.  
  35. img {
  36.  vertical-align: text-bottom;
  37.  -ms-interpolation-mode: bicubic;
  38. }
  39.  
  40. strong {
  41.  font-weight: bold;
  42. }
  43.  
  44. ol, ul {
  45.  list-style: none;
  46. }
  47.  
  48. table {
  49.  border-collapse: collapse;
  50. /* border-collapse: separate;*/
  51.  border-spacing: 0;
  52. }
  53.  
  54. caption, th, td {
  55.  font-weight: normal;
  56.  text-align: left;
  57.  vertical-align: top;
  58. }
  59.  
  60. blockquote:before, blockquote:after,
  61. q:before, q:after {
  62.  content: "";
  63. }
  64.  
  65. blockquote, q {
  66.  quotes: "" "";
  67. }
  68.  
  69. a:focus {
  70. /*\*/
  71.  overflow: hidden;
  72. /**/
  73. }
  74.  
  75. option {
  76.  padding-right: 10px;
  77. }
  78.

投稿者 時刻: