フォトスライド。
確かに様々な優秀なライブラリがすでにある。
jQueryを使ったもの（たとえば、30 Best jQuery Photo Pluginsで紹介されているような）やprototypejsなど。
ただ、優秀すぎるゆえにデザインされすぎているのが多い印象。「そこまでの機能はいらない」「もっとさくっとカスタマイズしたい」「機能だけがほしい。デザインは自分で作りたい」そして「スマートフォンでも使いたい」。
こう考えたときのライブラリが見つけられなかった（そもそもスキル不足によりカスタマイズ方法がピンとこなくて思うようにできなかった・・・）。

そこで、「だったら作っちゃえ」ってノリでhtml5のタグ要素とCSS3を使ってみたら、超シンプルなソースで作れたのでご紹介（スマートフォンにも対応したフォトライブラリのサンプル）。

UI - 特徴

まず、スマートフォンで使用することを前提としました。

• フォト画像を表示する領域は固定。
• フォト画像自体の縦横サイズはフォト画像ごとに違ってもセンタリング表示（リサイズなし）。
• 表示領域をシンプルにするために「フォト画像+サムネイル」という見せ方はなしとし、フォト画像を変更する場合は「前へ」「次へ」の矢印アイコンで対応。
• フォト画像をクリック（PCではマウスオーバー）したときに補足情報を表示。
• 同じページで複数のフォトスライドを使用可能。

設計

プログレッシブ・エンハンスメントを適用し、html5でマークアップ、CSS3を使用。
IE6やレガシーブラウザはそもそも対象外とし、ばっさり見捨てます。

さらにシンプル実装するために下記、意識しました。

• 必須設定は、フォト画像を表示する縦横のサイズのみ。
• 矢印アイコンは背景画像とし、画像の参照先を変更するだけで矢印アイコンを変更。
• 変更したいだろうな、という項目を別途用意し、デフォルトを上書きできるようにする。
• 不要なオプションはマークアップから削るだけ。

マークアップにちょっと癖がありますが、実際のソースでご説明します。
スマートフォンにも対応したフォトライブラリのサンプルでは、ベーシック、シンプル、カスタマイズ、複数、の4パターンを用意しています。

サンプルソース

html(head内)（※1）

<link rel="stylesheet" href="https://sample.simplesimplesdesign.com/slide/aitm_slide.css" media="all" />

<script src="https://sample.simplesimplesdesign.com/slide/aitm_slide.js"></script>

html（body内）

<div id="photo_area_slide" class="photo_slide">
<div id="photo_area_prev" class="photo_prev"><div>前へ</div></div>
<div id="photo_area_wrap" class="photo_wrap">
<div id="photo_area" class="photo">

<figure class="caption_off">
<div class="img_wrap"><img src="1.jpg" alt="" /></div>
<figcaption>
<p class="top">上テキスト1</p>
<p class="bottom">下テキスト1</p>
</figcaption>
</figure>

<figure class="caption_off">
<div class="img_wrap"><img src="2.jpg" alt="" /></div>
<figcaption>
<p class="top">上テキスト2</p>
<p class="bottom">下テキスト2</p>
</figcaption>
</figure>
<figure class="caption_off">
<div class="img_wrap"><img src="3.jpg" alt="" /></div>
<figcaption>
<p class="top">上テキスト3</p>
<p class="bottom">下テキスト3</p>
</figcaption>
</figure>
<figure class="caption_off">
<div class="img_wrap"><img src="4.jpg" alt="" /></div>
<figcaption>
<p class="top">画像が大きい場合</p>
<p class="bottom">はみ出たとこは非表示でセンタリング</p>
</figcaption>
</figure>
<figure class="caption_off">
<div class="img_wrap"><img src="5.jpg" alt="" /></div>
<figcaption>
<p class="top">画像が小さい場合</p>
<p class="bottom">センタリング表示</p>
</figcaption>
</figure>

</div>
</div>
<div id="photo_area_next" class="photo_next"><div>次へ</div></div>
<!--.photo_slide--></div>

CSS

#photo_area_wrap,
#photo_area figure,
#photo_area .img_wrap{width:250px;}

#photo_area_slide,
#photo_area figure,
#photo_area .img_wrap{height:188px;}

JavaScript（※2）

window.onload = function(){photoSlide("photo_area");}

• ※1 適時、ローカルにコピーしてご利用ください（クリエイティブ・コモンズ）。
• ※2 DOMが生成されたタイミングで関数「photoSlide("photo_area");」を実行してください（addEventListenerやjQueryであればreadyなんかに置き換えてください）。
• IEもターゲットにする場合は、IEでhtml5のタグを認識させる必要があります（タグ自体を変更する場合は、※1のCSSとJavaScriptを修正する必要があります）。

実装方法

サンプルソースの強調表示したところだけ修正すれば、とりあえずのお試しができます。

1. aitm_slide.cssとaitem_slide.jsをheadタグ内で読み込み
2. 画像を表示させる縦横サイズをCSSで指定（例では、幅250px、高さ188px）
3. figureタグで囲まれた部分をまるっとコピーして、画像分用意
4. JavaScriptでphotoSlide("photo_area")を実行

補足説明

必須箇所

html（body内）

<div id="photo_area_slide" class="photo_slide">
<div id="photo_area_prev" class="photo_prev"><div>前へ</div></div>
<div id="photo_area_wrap" class="photo_wrap">
<div id="photo_area" class="photo">

<figure class="caption_off">
<div class="img_wrap"><img src="1.jpg" alt="" /></div>
<figcaption>
<p class="top">上テキスト1</p>
<p class="bottom">下テキスト1</p>
</figcaption>
</figure>

</div>
</div>
<div id="photo_area_next" class="photo_next"><div>次へ</div></div>
<!--.photo_slide--></div>

強調表示されているところが変更してはいけないところです。ここを変更したい場合は、aitm_slide.cssとaitem_slide.jsの修正が必要です。

idについて

html（body内）

<div id="photo_area_slide" class="photo_slide">
<div id="photo_area_prev" class="photo_prev"><div>前へ</div></div>
<div id="photo_area_wrap" class="photo_wrap">
<div id="photo_area" class="photo">

<figure class="caption_off">
<div class="img_wrap"><img src="1.jpg" alt="" /></div>
<figcaption>
<p class="top">上テキスト1</p>
<p class="bottom">下テキスト1</p>
</figcaption>
</figure>

</div>
</div>
<div id="photo_area_next" class="photo_next"><div>次へ</div></div>
<!--.photo_slide--></div>

JavaScript（※2）

window.onload = function(){photoSlide("photo_area");}

id名に注目してください。共通ワードがあることが分かると思います（この例では「photo_area」）。
この共通ワードをもとに他のid名を決定しています（この例では「photo_area_slide」や「photo_area_wrap」、「photo_area_prev」など）。
この共通ワードを変更して使用することで、同じページ内で複数のフォトスライドを共存できるようになります（複数サンプル）。

さらにaitm_slide.cssで設定されたCSSレイアウトも、この共通ワードをもとに決定したid名を使って上書きすることができます（カスタマイズサンプル）。スライドや写真の補足情報が表示される速度、写真フレーム線、矢印アイコンなどを変更できます。

htmlをもっとシンプルにする

画像自体に補足情報が要らない場合もあるでしょう。そのようなときは、htmlソースのfigcaptionタグを削除するだけで完了です（（シンプルサンプル）。

html（body内）

<div id="photo_area_slide" class="photo_slide">
<div id="photo_area_prev" class="photo_prev"><div>前へ</div></div>
<div id="photo_area_wrap" class="photo_wrap">
<div id="photo_area" class="photo">

<figure class="caption_off">
<div class="img_wrap"><img src="1.jpg" alt="" /></div>
</figure>

</div>
</div>
<div id="photo_area_next" class="photo_next"><div>次へ</div></div>
<!--.photo_slide--></div>

というわけで、あとはスマートフォンにも対応したフォトライブラリのサンプルで確認していただければと思います。

余談

aitm_slide.js

aitm_slide.css

ライブラリとはいえ、ソースはこれだけです。めっちゃ軽いです。下記ポイント。

• CSS3で追加される予定のdisplay:box;ですが、IE8とOpera11では機能しません。そのため、IEとOperaの場合は、class名に「ie」を追加し、floatで対応しています。
• スライドさせるときは、CSS3で追加される予定のtransitionプロパティを使用しています。現状（2011年3月現在）Google Chrome、Safariでしか機能しませんが、他ブラウザではスライドしないだけでスライド自体がマストではないため、プログレッシブ・エンハンス的にこれでよしとしています。
• スマートフォンとPCのイベント処理をそれぞれに最適化（ontouchstartとonmouseoverなど）するよう振り分けています。