AppleMobileMeみたいなギャラリー/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

ギャラリーjquery-ui-1.7.1.custom.min.js

SAMPLE
CODE
DownLoad

<!DOCTYPE html>
<html>
    <head>
        <title>Gallery</title>
        <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
        <script type="text/javascript" src="assets/data/data.json"></script>
        <script type="text/javascript" src="assets/js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="assets/js/jquery-ui-1.7.1.custom.min.js"></script>
        <script type="text/javascript" src="assets/js/javascript.js"></script>
     </head>
     <body>
         <h1>Devon's Gallery</h1>
         <div id="content">
         
         </div>
         <div id="controls">
             <div id="views">
                 <a href="#" id="grid" class="selected">Grid</a>
                 <a href="#" id="mosaic">Mosaic</a>
             </div>
             <div id="slider"></div>
         </div>
         
     </body>   
</html>

	net.tutsplus.com

MobileMeのギャライーのようなギャラリーを設置できるスクリプトです。
独立したコンテンツとして使用するのが良いと思います。
ベースはhtmlですが、画像情報やギャラリー情報は.jsonファイルで設定します。
こちらからサンプルを見たほうが分かりやすいかも知れません。

セッティング

１．ダウンロード＆セッティング

サイトへ行き、demo.zip をダウンロードしてください。
解凍したら、demoフォルダ内にある、assets/js , assets/cssフォルダをアップロード。
assetsフォルダ内に全て入っていますが、これは取り除いてしまって省略させても良いと思います。

２．<head>設定、HTML設定

フォルダ内にある、index.html を丸ごとコピペでOKです。
ファイルの位置を変えた場合は、スクリプトのパスを調節するのを忘れないで下さい。

３．.jsonファイル

このスクリプトでは、アルバム単位で写真をギャラリー表示することができます。
var albums = [] 内に、{}単位でアルバムを入れます。
data/data.json を開いて見ると分かるとおり、
//Add more albums.. とコメントされている所に、アルバムの設定を書き込んでやればOKです。

var albums = [

{
ここにアルバムの設定が記述されている

}
//Add more albums..　上の鍵括弧をこのコメントの上に上書きする感じ

]

アルバム内の設定は、title , src 等分かりやすい単語で示されているので、それにあわせた画像の情報を入力します。
ただ、sprite: で指定されている画像はちょっとめんどくさいかもしれません。
ここではサムネイル画像を指定するのですが、これは表示する画像のサムネイルを全て縦につなげて一つの画像として保存したものを指定します。
今回のサンプルでは、http://solidstate.jp/sample/AppleMobileMe/assets/images/0.jpg のように、160px×160px のサムネイルを画像の枚数分、画像の順序順につなげています。
これがないと、アルバムのサムネイルも、レイアウト変えたときもちょっと不恰好になるので、大変だけどがんばってください。