jQuery

シンプルなフォトギャラリー（１）

jQueryの働き
  • サムネイルをリストの先頭画像を拡大表示スペースに表示する（初期化処理）。拡大する画像およびサムネイルの大きさはcssで設定
  • マウスがサムネイルをクリックしたタイミングでその画像を拡大表示する

    • jQuery

    $(function () {
  $('#big').attr('src', $('#list img:first').attr('src'));   //最初に表示する拡大画像をセット（id=bigにattr(追加)。<img id="big" src="resources/photo1.jpg">となる)
     //.attrの後の（）の中は、まず、srcという文字列を出力、リスト項目の最初のイメージをfirstフィルターで取得、それを'src'に追加

  $('#list img').click(function () {             //サムネイルのリスト配下のimg要素をクリックしたときの処理
    $('#big').attr('src', $(this).attr('src'));  //id=bigに追加、以下の（）の中を追加、まずsrc文字列を追加、thisはクリックされたものを'src'に追加
  });                                            //ここまで
});


    CSS設定

    #list { margin: 0px; padding: 0px;}
#list li {margin: 2px;height: 40px;list-style-type: none;float: left; }
#list img {width: 55px;height: 40px;}
hr {clear : both;}
#big {width: 315px;height: 235px;}


    実行例　

    画像の比率が指定の枠の大きさに強引にリサイズされているので変形している。

    html
    <ul id="list">
  <li><img src="../../../../resources/photo1.jpg" /></li>
  <li><img src="../../../../resources/photo2.jpg" /></li>
  <li><img src="../../../../resources/kaminari-mon.png" /></li>
  <li><img src="../../../../resources/Desktop.jpg" /></li>
</ul>
<hr />
<img id="big" />

    ３行目の「Click」を「mouseover」に変更するとマウスを乗せただけで画像を変化させることが出来る。