【応用編】フォトギャラリーNo2

フォトギャラリーNo1では、単純なスワップイメージでしたが、
このままではjQueryを使ったサイトとしての価値はありません。
フェードイン、フェードアウトを付けて、
メイン画像が切り替わるように改良しましょう。

【基本設計】
サムネイルをクリックしたとき、
メイン画像の手前に画像を重ねて配置し、
元からあった画像をfadeOut()で削除する。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“#navi a”).click(function(){
  $(“#main img”).before(“<img src='” + $(this).attr(“href”) + “‘ alt=”>”);
  $(“#main img:last”).fadeOut(“fast”,function(){
   $(this).remove();
  });
  return false;
 });
});
</script>

【HTML】
フォトギャラリーNo1と同じ

フォトギャラリーサンプル

This entry was written by admin , posted on 土曜日 6月 11 2011at 03:06 pm , filed under 応用例 and tagged , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

コメントを残す

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>