Photosにスライドショーとサムネイル切替をつけてみた。

スライドショーは、jQueryライブラリであるCrossSlide を利用。 ■HTMLヘッダー

■JavaScript(汎用化)

var photos = new Array();
//初期化
function slideInit() {
    $('#display').crossSlide({ sleep: 3, fade: 2 }, photos);
}
//スライド開始
function startSlide() {
  $("#photo").hide();
  $("#display").fadeIn("slow");
  $("#display").crossSlideRestart();
}
//スライド停止
function stopSlide() {
  $("#display").crossSlideStop();
  $("#display").fadeOut("slow");
}
//photos配列インデックスから写真表示
function showPhoto(index) {
  stopSlide();
  var photo = photos[index];
  $("#photo").fadeOut("slow");
  $("#photo").attr("src", photo);
  $("#photo").fadeIn("slow");
}

「var photos」とグローバルにしてるのが、ちょっと危ないけどｗ

■JavaScript(実行) ※PHPで動的に写真配列をJavaScript出力

$(function() {
    loadPhotos();
    slideInit(); 
});

function loadPhotos() {                
    photos.push({src:'http://colinux/yoo_blog/images/photos/22.jpg', dir:'up'});                   
    photos.push({src:'http://colinux/yoo_blog/images/photos/21.jpg', dir:'down'});           
    photos.push({src:'http://colinux/yoo_blog/images/photos/20.jpg', dir:'up'});                     
    photos.push({src:'http://colinux/yoo_blog/images/photos/9.jpg', dir:'down'});  
}

データ生成処理は、Ajaxで非同期通信してデータで処理するのもありかも。

■HTML（データ生成＆実行） ※PHPで写真配列をアウトプット

Slide Show 


  

  
 
  
 
  
 
 

スライドショーは、予め写真を先読みしておいて（このサイトではPHP）画像配列を設定しています。

$(id).crossSlide(オプション、画像配列)

これで指定したidのエレメントにスライドショーが表示される。 画像取得は、JSONで取得した方がJS側で応用がききそうですが、まぁ時間があれば。スライドショー停止はcrossSlideStop()、リスタートはcrossSlideRestart()を直接呼ぶだけ。 ※詳しくは、CrossSlide のページを参照

手動切替は、jQuery標準のfadeIn、fadeOutを利用。 写真を先読みして配列にしておいて、indexで切り替えるだけです。

$(id).attr("src", photos[index]);