jQuery ギャラリープラグインGalleria(2ページ目)

サンプル

今度は、Galleriaサイトのデモ1を少し シンプルにして試してみます。

エフェクトなどはほとんどそのまま使い、コメントを和訳してみました。ちなみに、ソースにあるように、li要素に class="active" を書いておくとその画像が最初に選択された状態になります。

* photo at 牛久大仏

<link   type="text/css" 
        href="./galleria.css" 
        rel="stylesheet" media="screen">
<script src="./jquery-1.2.3.min.js" 
        type="text/javascript"></script>
<script src="./jquery.galleria.js" 
        type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    
    $('ul.gallery_test').galleria({
    
      //履歴を記録し戻るボタンで戻れるようにする
      history   : true, 
      //画像クリックで移動
      clickNext : true, 
      // メイン画像のセレクタ
      insert    : '#main_image', 
      
      // 画像のエフェクト
      onImage   : function(image,caption,thumb) { 
        
        //  画像とキャプションのフェイドイン 1000ミリ秒
        image.css('display','none')
             .fadeIn(1000);
        caption.css('display','none')
             .fadeIn(1000);
        
        // サムネールのコンテナ
        var _li = thumb.parents('li');
        
        // サムネールのフェイドアウト
        _li.siblings()
           .children('img.selected')
           .fadeTo(500,0.3);
        
        // 次のサムネールをフェイドイン
        thumb.fadeTo('fast',1).addClass('selected');
        
        // 画像にtitle属性をセット
        image.attr('title','Next image >>');
      },
      
      // サムネールのエフェクト
      onThumb : function(thumb) {
        
        // サムネールのコンテナ
        var _li = thumb.parents('li');
        
        // サムネールアクティブならopacityを1、違えば0.3
        var _fadeTo = _li.is('.active') ? '1' : '0.3';
        
        // load終了でサムネールを_fadeToの値にフェイドイン
        thumb.css({display:'none',opacity:_fadeTo})
             .fadeIn(1500);
        
        // ホバー時のトグルエフェクト
        thumb.hover(
          function() { thumb.fadeTo('fast',1); },
          function() { 
            _li.not('.active')
               .children('img')
               .fadeTo('fast',0.3); 
          } 
        )
      }
    });
})
</script>
<style  type="text/css">

<style media="screen,projection" type="text/css">

  .demo *{margin:0;padding:0} /*リセット*/
  .demo {
    padding-top:45px;
    text-align:center;
    background:black;
    height:520px;
  }
  .caption{
    font-style:italic;color:#887;
  }
  .gallery_test{
    width:350px;
    margin:0 auto;
  }
  .gallery_test li{
    width:68px;height:50px;
    border:3px double #111;
    margin: 0 2px;background:#000;
  }

  #main_image{
    margin:0 auto 60px auto;
    background:black;
  }
  #main_image img{
    margin-bottom:10px;
  }
</style>

<div class="demo">
<div id="main_image"></div>
<ul class="gallery_test">
  <li class="active"><img src="kawara.gif" class="noscale" 
           alt="入場門の瓦屋根" title="入場門の瓦屋根"></li>
  <li><img src="botan.gif" class="noscale" 
           alt="十方堂の牡丹" title="十方堂の牡丹"></li>
  <li><img src="honbyo.gif"
           alt="本廟" title="本廟"></li>
  <li><img src="sakura.gif" class="noscale" 
           alt="桜の花びら" title="桜の花びら"></li>
  <li><img src="zyodoteien.gif"
           alt="浄土庭園" title="浄土庭園"></li>
  <li><img src="usikudaibutu.gif" class="noscale" 
           alt="大仏" title="大仏"></li>
  <li><img src="ishi.gif" class="noscale" 
           alt="東庭の石" title="東庭の石"></li>
  <li><img src="daibutusakura.jpg"
           alt="大仏と桜" title="大仏と桜"></li>
</ul>
</div>