jQuery入門！

ずっとずっと気になっていたjQueryを自分も使ってみたーいっということで、
この記事 を参考に、使ってみました。

■環境構築
まずは、jQuery 本体のDL。
次に、開発環境。
一応Aptana を使うことにしました。
私の場合はEclipseをすでに使っていたのでプラグインとして導入。
なんか色々ごちゃごちゃとインストールされたので普段使っているのとは別にしたほうがよかったかも・・・。

■プロジェクトの作成
Aptanaのプロジェクト群からDefault Web Projectを選択。
次に、ライブラリにjQueryを選択してOK。
ここのライブラリは起動後のスタートガイドからインストールしたものが表示されるのかな？

最後にjQueryをプロジェクトに組み込みます。・・・と記事にはありましたが、
すでに組み込まれてました。
スタートガイドからサポートをインストールしたからかも？

なお、デフォルトでできるプロジェクトにはサンプルも含まれていたのでこれは削りました。

■jQueryを使う
こっからは記事を飛ばして、自分の試してみたいスクリプトを実行してみます。
いろんなサイトで見て気になっていた下図のような画像のポップアップを試してみます。
<img loading="lazy" src="http://farm4.static.flickr.com/3492/3861041996_b07f6d6762.jpg" alt="2009-08-27_1118" width="258" height="193" />

まずはこれを実現するプラグインをDL。
<strong>jQuery lightBox plugin</strong>
プロジェクトに組み込みます。
libフォルダ内にプラグインフォルダを作ってその中に入れました。
写真は自前のものを使うので省略。

次に、ヘッダーにインクルード文を書きます。
プラグイン分とCSS分。

そして画像を配置。
表示用の小さめ画像とクリックしたときに表示される画像を用意します。
画像タグ自体は通常のHTMLと書き方一緒です。

最後にjavascriptコード（必要なコードだけ）をヘッダーに挿入！
これでOK！
（今回はフォルダ構成変えてるのでjsファイルの画像パスをちょっと修正してます）

できました！
デモページ

とてもらくーにすてきなページができちゃいます。
プラグインも豊富なので今後もちょこちょこやってみたいです。