×
Album>xCategory

概要

 <div id="banner">
  <div id="controls">
   <span><a href="" id="prev" title="前へ"></a></span>
   <span><a href="" id="next" title="次へ"></a></span>
  </div>
  <div id="cycle">
   <a class="fbox" group="banner" href="001.jpg"><img src="001.jpg" /></a>
   <a class="fbox" group="banner" href="002.jpg"><img src="002.jpg" /></a>
   <a class="fbox" group="banner" href="003.jpg"><img src="003.jpg" /></a>
  </div>
 </div>

写真

001 002 003 004 005 
<a class="fbox" group="img" href="img/2011.jpg"><img src="thumb/2011.jpg" alt="001"></a>

動画

00:00 00:00

html5: MEDIA_ELEMENT_ERROR: Format error

spaceplay / pause

escstop

ffullscreen

shift + ←→slower / faster (latest Chrome and Safari)

↑↓volume

mmute

←→seek

 . seek to previous

12…6 seek to 10%, 20%, …60% 

            <div class="flowplayer color-grn" data-ratio="0.5625">
             <video poster="video/001.jpg" src="video/001.mp4" preload="metadata" /></video>
            </div>

地図


Googleマップを開く 
           <div id="gmaps" class="tab-pane fade">
            <h2>地図</h2>
            <img src="img/map.jpg"><br><a href="URL">Googleマップを開く</a>
           </div>

構造

         <UL id="myTab" class="nav nav-tabs">
           <LI class="active"><A href="#home" data-toggle="tab">概要</A></li>
           <LI><A href="#thumb" data-toggle="tab">写真</A></li>
           <LI><A href="#video" data-toggle="tab">動画</A></li>
           <LI><A href="#gmaps" data-toggle="tab">地図</A></li>
           <LI><A href="#info" data-toggle="tab">情報</A></li>
         </UL>
 
         <div id="myTabContent" class="tab-content">

           <div id="home" class="tab-pane fade in active">
             ・・・
           </div>

           <div id="thumb" class="tab-pane fade">
             ・・・
           </div>

           <div id="video" class="tab-pane fade">
             ・・・
           </div>
           ・・・
         </div>

tab の切り替え

tabを表示するときは、Ａタグに data-toggle="tab" を指定する。.tab-contentの外側にあってもいい。 
 <p id="tabnav">
  <a href="#thumb" data-toggle="tab"><i class="nav-thumb"></i>写真</a>
  <a href="#video" data-toggle="tab"><i class="nav-video"></i>動画</a>
  <a href="#gmaps" data-toggle="tab"><i class="nav-amap"></i>地図</a>
 </p>

MT6 ナビゲーション

前後の記事へのリンクを追加。 
<table width="100%" class="content-nav">
    <tr><td align="left" width="40%"><mt:EntryPrevious><a class="back" href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></mt:EntryPrevious></td>
     <td width="20%"><a href="<$mt:BlogURL$>">HOME</a></td>
     <td align="right" width="40%"><mt:EntryNext><a class="next" href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></mt:EntryNext></td>
    </tr>
</table>

見本

enlarge　マウスを重ねると拡大　xxx_off.jpg と xxx_on.jpg を用意する。
:hoverを使って background-image を切り替える方法もある。

About （JQueryプラグイン slideToggleサンプル）

参考

Smart対応

Responsive Designという。あれこれ試しながら学んでいる。以下テンプレート用メモである。

<meta name="viewport" content="width=device-width,initial-scale=1">　画面幅に合わせた大きさにする。
<meta name="format-detection" content="telephone=no">　電話番号をリンクさせない。
@media (max-width: 640px) {...}　画面幅が640px以下のときのスタイルを定義する。

Photo Carousel

スワイプswipeで写真を見れるようにする。Bootstrapにもカルーセル機能があるが使いにくいので、Blueimpを改変して使うことにした。単独で使うときは、gallery.css と gallery.jsを呼び出す。Album用には、media.css と mmdd.jsに組み込んだ。

インラインで表示する場合とフルスクリーン（最大ウィンドウ幅）で表示する場合がある。いずれの場合も対象とする写真ファイルを #photos のなかにAタグで書く。

<div id="photos">  
  <a href="001.jpg" title=""></a>
  <a href="002.jpg" title=""></a>
   .....
</div>
※title属性値を写真の左下に20pxで表示するようにした。
インライン表示
<div id="photo-carousel" class="jgallery jgallery-carousel">
  <div class="slides"></div><h3 class="title"></h3>
  <a class="prev">‹</a><a class="next">›</a><a class="play-pause"></a>
</div>
フルスクリーン用
<div id="jgallery" class="jgallery" data-start-slideshow="true">
  <div class="slides"></div><h3 class="title"></h3>
  <a class="prev">‹</a><a class="next">›</a>
  <a class="close">×</a><a class="play-pause"></a><ol class="indicator"></ol>
</div>
※写真に加えて HTML5 Video もカルーセル表示できる。プレイヤーのスキンはブラウザに依存する。カスタム・プレイヤをデザインすることも可能である。
※カルーセル操作の設定は、Javascriptで書く。開いたときに開始し、クリックするとコントロールが表示されるように設定した。
　最初からコントロールを表示するときは、jgallery-controls を追加する。
※jquery.js を先に読み込むことを忘れないようにする。
※カルーセルに続けてHTMLを書くときは、オフセットする必要がある。写真の縦横比率を％でパディングする。
標準は16x9 で、.jgallery-carousel { padding-bottom : 56.25%; }。3x2 のときは、66.66% とする。

写真 動画 地図

FAQ

質問001
回答001　トグル機能を持ったスクリプトは数多くある。数年前からはJQueryを使うことが多くなった。それまではprototypeやmootoolsベースであったため、そのまま使うと競合が起きて動かないことが多い。そのデバグに四苦八苦した。
質問002
回答002

Interactive Element, Toddish popup, Magnificient popup, Blueimpなど（画像の拡大、ギャラリを含む）があり、個別機能だけを切り出すのが難しかった。同じページで複数スクリプトを使うと競合が起きﾙｶるからだ。たとえばjpopupとblueimpのギャラリー機能では同じクラス名jgalleryが使われていた。それに気がつくまでデバグ時間を浪費してしまった。

質問003
回答003　結果的につい最近気がついたのは、Bootstrap(Twitter標準）のTabs機能をトグルにも使えることだ。同じページで複数組を使えることが分かった。単純なJQueryプラグインでは開いた項目を閉じるために再度クリックする。Tabsを使えば、他の項目を開くと、すでに開いた項目が一緒に閉じてくれる。Collapseスクリプトを使っている。
   Share