jQuery lightBox 0.4 改

オリジナルからの変更点

• Slideshow 自動再生
• 最初と最後の画像をループ
• 画像集のデータをオブジェクトでも渡せるように。

<script type="text/javascript" src="jquery-1.2.2.js"></script>
<script type="text/javascript" src="jquery.lightbox-0.4.js"></script>
<script type="text/javascript">
$(function () {
  $.getJSON('photos.json', function (json) { 
    $('#gallery').after($('<ul></ul>').attr({id:'gallery2'}));
    for (var i = 0; i < json.gallery.length; i++) {
      var text = 'Gallery' + (i+1) + '('+json.gallery[i].length+')';
      $('#gallery2').append($('<li></li>').html(
          $('<a></a>').text(text).attr({ href : '#' }).addClass('gallery')
              .lightBox({ imageArray : json.gallery[i] , autoStart : true})
      ))
    }
  });
  $('#gallery a').lightBox({ 
      easing      : 'easeInBounce'
    , resizeSpeed : 2000
    , imageArray  : [
        ['http://farm1.static.flickr.com/194/491128207_b441c63228.jpg','Erika']
      , ['http://farm1.static.flickr.com/104/256238685_5b5f02249a.jpg','Yasu Megumi']
      , ['http://farm1.static.flickr.com/33/103960933_48db5b244b.jpg','Hara Fumina']
    ]
 });
});

    //下記はデフォルト設定値
    $('#gallery a').lightBox({
          overlayBgColor : '#000'
        , overlayOpacity : 0.5
        , imageLoading   : 'img/loading.gif'
        , imageBlank     : 'img/blank.gif'
        , imageBtnPrev   : 'img/prev.png'
        , imageBtnNext   : 'img/next.png'
        , imageBtnClose  : 'img/close.png'
        , imageBtnPlay   : 'img/play.png'
        , imageBtnStop   : 'img/stop.png'
        , cBorderSize    : 10
        , cResizeSpeed   : 400
        , keyToClose     : 'q'
        , keyToPrev      : 'k'
        , keyToNext      : 'j'
        , imageArray     : []
        , activeImage    : 0
        , autoSpeed      : 4000
    })
});
</script>

<p id="gallery">
  <a href="photos/image1.jpg" title="aaa">
    <img src="thumb1.jpg" width="75" height="75" alt="" />
  </a>

  <a href="photos/image2.jpg" title="bbb">
    <img src="thumb2.jpg" width="75" height="75" alt="" />
  </a>
..
</p>