Template

ここは管理用で、記事作成に使用する標準テンプレートである。複数のjsをまとめて mmdd.js(2014/01/07 235kb)にした。cssもまとめて media.css(120KB)とした。冗長が多いので別途整理する。

写真スライド JQuery Cycle

５秒間隔のスライドショーで、１１枚目で停止する。左右をクリックして前後に移動できる。中央部をクリックすると、拡大表示されスライドショーになる。この場合はfboxを利用する。使わないときはＡタグは不要である。同じページにふたつ目のスライドショーを埋め込むときは #slideshowと#slidesを使う。この場合は２１枚目で停止する。

<div id="home" class="tab-pane fade in active">
 <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="img" href="001.jpg"><img src="001.jpg"></a>
   <a class="fbox" group="img" href="002.jpg"><img src="002.jpg"></a>
   <a class="fbox" group="img" href="003.jpg"><img src="003.jpg"></a>
  </div>
 </div>
</div>

停止枚数を変えたり、無限ループにするときは </body> の前にスクリプトを書く。
<script>$(function() {$('#slides').cycle({autostop:1,autostopCount:11});});</script>

縮小画像の拡大とスライドショー fbox

ページ内のどこに書いても良い。グループ名imgの写真がスライドショー表示される。グループ名を任意の英数字で書く。これによりグループごとのスライドショーを表示できる。ウィンドウ一杯に表示される。画面一杯（フルスクリーン）に表示するときはキーボード F11 キーを押す。元に戻るときは ESC キーを押す。

<div id="thumb" class="tab-pane fade">
 <a class="fbox" group="img" href="001.jpg"><img src="thumb/001.jpg"></a>
 <a class="fbox" group="img" href="002.jpg"><img src="thumb/002.jpg"></a>
 <a class="fbox" group="img" href="003.jpg"><img src="thumb/003.jpg"></a>
</div>

<div id="thumb" class="tab-pane fade">を書くと初期ページには表示されない。 <A href="#thumb" data-toggle="tab">写真</A>をクリックすると表示される。

動画の埋め込み flowplayer

プレイリストの例を示す。動画ひとつの場合は、fp-playlistは不要である。

<div id="thumb" class="tab-pane fade">
 <div class="flowplayer color-grn" data-ratio="0.5625">
  <video poster="video/001.jpg" src="video/001.mp4" preload="metadata"></video>
  <div class="fp-playlist">
   <a href="video/001.mp4">動画001</a>
   <a href="video/002.mp4">動画002</a>
   <a href="video/003.mp4">動画003</a>
  </div>
 </div>
</div>

地図の埋め込み

Google MyMapsの埋め込みコードを書いても良いが、レスポンスが悪くなる。

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

地図をポップアップ表示するときは、<a class="gmaps" href="url">～</a> と書く。.gmaps は jpopup.js で定義する。Google MyMapsのurlは、かならず埋め込み用urlにする。共有urlを書くと表示されない。※これはiframeの時も同じである。

スマホ対応の写真

スマホのスワイプswipe機能に対応するときは、Jquery Blueimpを改変したgallery.jsを使う。css/jsはmedia.css/mmdd.jsに組み込んだ。フルスクリーン用のcarouselスクリプトもmmdd.jsに組み込んだ。

組込みカルーセル

<div id="home" class="tab-pane fade in active">
 <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>
<div id="thumb" class="tab-pane fade">
 <div id="photos">  
  <a href="001.jpg" title=""><img src="thumb/001.jpg"></a>
  <a href="002.jpg" title=""><img src="thumb/002.jpg"></a>
  <a href="003.jpg" title=""><img src="thumb/003.jpg"></a>
 </div>
</div>

フルスクリーン用(記事テンプレートに組込み）

<div id="jgallery" class="jgallery">
  <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>

マウスを重ねて拡大

マウスカーソルを重ねて画像を拡大表示する。スタイルシートまたはJavascriptを使って実現できる。ここでは jqueryスクリプトを組み込み、クラス名を .enlarge とした。

$(function(){
 $('.enlarge img').hover(function(){
 $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
 $(this).attr('width','320');
 $(this).attr('height','240');
 }, function(){
 if (!$(this).hasClass('currentPage')) {
 $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
 $(this).attr('width', '32');
 $(this).attr('height','32');
 }
 });
});

本文に埋込む縮小画像ファイル名を file_off.jpg 、マウスオーバのときの拡大画像ファイル名を file_on.jpg として用意する。例では、縮小画像サイズを32x32、拡大画像サイズを320x240としている。オリジナルサイズを使うときは、省略（4～5行目、9～10行目を削除)する。

更新日: