概要
<div id="slideshow">
<div id="controls">
<span><a href="" id="prev" title="前へ"></a></span>
<span><a href="" id="next" title="次へ"></a></span>
</div>
<div id="slides">
<a class="fbox" group="banner" href="banner/001.jpg"><img src="banner/001.jpg" /></a>
<a class="fbox" group="banner" href="banner/002.jpg"><img src="banner/002.jpg" /></a>
<a class="fbox" group="banner" href="banner/003.jpg"><img src="banner/003.jpg" /></a>
</div>
</div>
写真
<a class="fbox" group="img" href="img/2011.jpg"><img src="thumb/2011.jpg" alt="001"></a>
動画
<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>
見本
- Inline Text（IDセクション）の表示
<a class="popup" href="#inline">Inline Text</a>
ここが表示される
- 画像の拡大表示
<a class="popup" href="img/2011.jpg">横幅最大 95% - 複数画像の表示 1 2 3
.gallery_popup設定スクリプトが必要。 - HTMLページの表示
URL?pw=640&ph=480ph,pw で縦横サイズを指定 - グーグル地図
.gmap_popup標準 800x450 pw&phで変更できる - HTML5 Video 640x360
video_popup - titleを表示
title_popup
enlarge マウスを重ねると拡大 xxx_off.jpg と xxx_on.jpg を用意する。
FAQ
- 質問001
- 回答001 トグル機能を持ったスクリプトは数多くある。数年前からはJQueryを使うことが多くなった。それまではprototypeやmootoolsベースであったため、そのまま使うと競合が起きて動かないことが多い。そのデバグに四苦八苦した。
- 質問002
- 質問003
回答002
Interactive Element, Toddish popup, Magnificient popup, Blueimpなど（画像の拡大、ギャラリを含む）があり、個別機能だけを切り出すのが難しかった。同じページで複数スクリプトを使うと競合が起きﾙｶるからだ。たとえばjpopupとblueimpのギャラリー機能では同じクラス名jgalleryが使われていた。それに気がつくまでデバグ時間を浪費してしまった。
回答003 結果的につい最近気がついたのは、Bootstrap(Twitter標準）のTabs機能をトグルにも使えることだ。同じページで複数組を使えることが分かった。単純なJQueryプラグインでは開いた項目を閉じるために再度クリックする。Tabsを使えば、他の項目を開くと、すでに開いた項目が一緒に閉じてくれる。Collapseスクリプトを使っている。