ブログパーツの様なスライドショー/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>スライドショー</title>
<link rel="stylesheet" type="text/css" href="css/jquery.popeye.css" />
<link rel="stylesheet" type="text/css" href="css/styling.css" />
</head>

<body>
<div id="popeye1" class="popeye"> 
  <ul> 
    <li><a href="image/1.jpg"><img src="image/thumbs/1.jpg" alt="馬の瞳" /></a></li> 
    <li><a href="image/2.jpg"><img src="image/thumbs/2.jpg" alt="偶像的な雲" /></a></li> 
    <li><a href="image/3.jpg"><img src="image/thumbs/3.jpg" alt="表情を誘う木偶" /></a></li> 
    <li><a href="image/4.jpg"><img src="image/thumbs/4.jpg" alt="椿と光" /></a></li> 
    <li><a href="image/5.jpg"><img src="image/5.jpg" alt="部屋" /></a></li>           
  </ul> 
</div>

<div id="popeye2" class="popeye"> 
  <ul> 
    <li><a href="image/1.jpg"><img src="image/thumbs/1.jpg" alt="馬の瞳" /></a></li> 
    <li><a href="image/2.jpg"><img src="image/thumbs/2.jpg" alt="偶像的な雲" /></a></li> 
    <li><a href="image/3.jpg"><img src="image/thumbs/3.jpg" alt="表情を誘う木偶" /></a></li> 
    <li><a href="image/4.jpg"><img src="image/thumbs/4.jpg" alt="椿と光" /></a></li> 
    <li><a href="image/5.jpg"><img src="image/thumbs/5.jpg" alt="部屋" /></a></li>           
  </ul> 
</div>
<!-- [example js] begin --> 
<script type="text/javascript" src="lib/jquery-1.2.6.min.js"></script> 
<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="lib/jquery.popeye-0.2.1.js"></script> 
<script type="text/javascript"> 
    <!--//<![CDATA[
    
    $(document).ready(function () {
        var options1 = {
            easing:     'easeInOutCirc'
        }
        var options2 = {
            direction:  'right',
            duration:   230            
        }
    
        $('#popeye1').popeye(options1);
        $('#popeye2').popeye(options2);
    });
    
    //]]>--> 
</script> 
<!-- [example js] end -->
</body>
</html>

	Plugins \| jQuery Plugins

ブログパーツのような感覚で設置できる画像のスライドショー、popeye。
もちろん拡大表示も可能で、サムネイル画像をスライドショーして、拡大画像は別に用意する。
めんどくさいと思うかもしれないが、サムネイルと拡大画像を違うレイアウトで見せれるので重宝する場合もある。
imgのalt属性に書き込んだテキストは、スライドショーのキャプションとして表示可能。
jquery.popeye-0.2.1.jsが必要になる。

セットアップ
設置

ダウンロード

サイトから、Popeyeをダウンロードする。
グリーンのライン上にある「Download」をクリックすればOK。
それのほかにjquery.popeye-0.2.1.jsをダウンロードする。

<head>～<head>の設定

ここではCSSのみを読み込ませる。
今回のスクリプトは画像を全部読み込んだ後でないと、それと認識しないようだ。

ダウンロードファイルのCSSフォルダにこの２つのファイルが入っているので、これらを読み込む設定をする。
ヘッダー内の設定はこれで完了する。

</body>直前の設定

ここでJavascriptを読み込ませる。
画像より後であれば、別に</body>直前でなくても良いが、やはり最後が使いやすい。
場所は任意でOKとして、以下の記述をする。

<script type="text/javascript" src="lib/jquery-1.2.6.min.js"></script> 
<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="lib/jquery.popeye-0.2.1.js"></script> 
<script type="text/javascript"> 
    <!--//<![CDATA[
    $(document).ready(function () {
        var options1 = {
            easing:     'easeInOutCirc'
        }
        var options2 = {
            direction:  'right',
            duration:   230
        }
        $('#popeye1').popeye(options1);
        $('#popeye2').popeye(options2);
    });
    //]]>--> 
</script>

これで下準備が完了する。

スライドショーの設定

サンプルでは以下のコードになっている。

微妙な違いだが、スライドショーには２種類あり、divにあるidでそれを設定している。
classとidを上記のように設定したdivの内部に、ul等でリスト表示した画像がスライドショーとして認識されるので、
設定は簡単な方だと思う。
ul以外のタグでもOKだが、その場合はjquery.popeye-0.2.1.jsの方で以下の部分を書き換えなければならない。

obj.find('ul').remove();

あまり必要性を感じないので、デフォルトのまま使用するのが良いだろう。

次は画像の設定だが、これは簡単。
リンクのhrefにポップアップの画像を設定して、imgにサムネイル画像を設定、alt属性にキャプションとなるコメントを記述する。

スライドショーの外見は、styling.cssで設定する。
クラス名などがそのままアクション等に関連しているのでいじりやすい。