44日目 | web制作

本日は

■画像置換をjQueryで

基本は教科書に忠実に、メインになる大きな画像のalt属性だけ、教科書には取得用jQueryがないので自分で補完

※写真はほぼ自作
スライドギャラリー
実際の動きはこんな感じ

サムネイルをクリックするとメインに画像が、少しクロスフェードしながら出てくる
サムネイルはページ送り
以下、jQueryの記述

$(function(){
  $('#gallery a').click(function(){
    $('#mainImg img').before('<img src="'+$(this).attr('href')+'" alt="'+$('img',this).attr('alt')+'">');
    $('#mainImg img:last').fadeOut('fast',function(){
      $(this).remove();
    });
    return false;
  })
  $('img.next').click(function(){
    $('#gallery .pageWrap').animate({
      marginLeft : parseInt($('#gallery .pageWrap').css('margin-left'))-300+'px'
    },'fast');
  });
  $('img.prev').click(function(){
    $('#gallery .pageWrap').animate({
      marginLeft : parseInt($('#gallery .pageWrap').css('margin-left'))+300+'px'
    },'fast');
  });
});

3行目alt以下はもう少し良い書き方があるかも？？

■Flashで同様のことができる
Swiffy Output
＞＜キーで次の画像を読み込む