ファイルのダウンロード

 
こちらからファイル一式ダウンロードしてください。
 
ダウンロードしてzipファイルを解凍したら自分のサイトの中に下記のソースコードを記述。

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/thumb_gallery.js"></script>
<link href="css/thumb_gallery.css" rel="stylesheet" type="text/css"> 

フォトギャラリー部分のHTMLマークアップ

<div class="display_image">
 <ul>
  <li><img alt="画像01" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
  <li><img alt="画像02" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
  <li><img alt="画像03" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
  <li><img alt="画像04" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
  <li><img alt="画像05" src="画像ファイルのパス" width="画像幅※必須" height="画像高さ※必須"></li>
 </ul>
</div>

上記のように、div要素にクラス属性「display_image」を記述し、その中にリスト(※<ul>)で画像を配置します。・・・終了です。なんとシンプルでなんと設定しやすいスクリプトだこと。K野さん恐るべし!!
 

注意点

 
※div要素内のリストは、ul要素にのみ対応しています。

※挿入するimg要素のwidth属性とheight属性は必ず指定してください。

※各画像のサイズが統一されていなくても、問題なく動作しますが、各画像の縦横比（特に高さ）は統一されている、もしくは、ある程度近い数値である事を推奨します。
 

<script src="css_browser_selector.js" type="text/javascript"></script>

準備はこれでOKです。あとはアンドロイドで別の記述をしたいセレクターに「.android」を頭につけて記述する。

p{
  text-align:right;
}

.android p{
  text-align:center;/*for-Android-*/
}

上記の様にCSSを書くとAndroidで観たときだけ<p>タグの中の文字列は中央揃え、それ以外のブラウザやデバイスで閲覧すると右揃えとなります。(※コメントアウトは分かりやすい様に付けているだけなので、無くても問題ありません。)

そして、このスクリプトのすごい所はブラウザの違いだけでなくOSの違いも判別出来るところです。例えばmacのIEやウインドウズのサファリなどの指定も出来てしまうんです。下記の例はウインドウズのサファリでの指定例です。

.win.safari p{
  text-align:center;/*for-Windows safari-*/
}

対応OS

・win – Microsoft Windows
・linux – Linux
・mac – Mac OS
・ipod – iPod Touch
・iphone – iPhone
・android – Android
 

対応ブラウザ

・ie – Internet Explorer (All versions)
・ie8 – Internet Explorer 8.x
・ie7 – Internet Explorer 7.x
・ie6 – Internet Explorer 6.x
・gecko – Mozilla, Firefox (all versions), Camino
・opera – Opera (All versions)
・safari – Safari
・chrome – Google Chrome
 
これさえあれば、IEだって怖くない!!(笑)。