[JavaScriptとは?]
JavaScript(ジャヴァスクリプト)とは,プログラミング言語のひとつである.Javaと名前が似ているが,異なるプログラミング言語です.オブジェクト指向のスクリプト言語であることを特徴とします.(wikipediaより)
このスクリプトをwebサイトに使用することで動的なウェブサイト構築が可能となり,様々なインタラクションやそれぞれのオブジェクトに「動き」をつける事が出来ます.
<script>ここにコードを記述する</script>
JavaScriptを使用するには上記のスクリプトタグを使用します.記述する位置は通常はheadタグの終了の直前でスタイルシートの読み込みよりも後に書きます.
[jQuery]
jQuery(ジェイクエリー)は,ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです.ジョン・レシグが,2006年1月に開催された BarCamp NYC でリリースしました.様々な場面で活用されており,JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいます.(wikipediaより)
<head> <meta charset="utf-8"> <title>タイトル</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> <script src="js/jquery.min.js" type="text/javascript"></script> </head>
jQueryを使用する際にはまずjQueryの本体をスクリプトタグを使用して読み込みます.上記の例では「index.html」の同階層に「js」というフォルダを作成しその中にjQueryファイルを置いて,5行目でscriptタグを使用して読み込んでいます.(※ファイルパスに注意 src=”js/jquery.min.js”)
[jQueryプラグイン]
jQuery本体を読み込むことで使用できる様々なプラグインを指します.プラグインは様々な用途に合わせて各ユーザーが使いやすく作成したものです.使用する際は著作権やライセンスなどに注意して下さい.目的に合わせて使用するプラグインを探し使用していきます.
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>LightBox Sample</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> <link href="css/lightbox.css" type="text/css" rel="stylesheet" media="all" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> </head> <body> <header id="siteheader"> <h1>LightBox Test</h1> <nav> <ul> <li class="button"><a href="#works">WORKS</a></li> </ul> </nav> </header> <div id="contents"> <!--works--> <div id="works"> <h2> WORKS<br/> ─ </h2> <div><a href="img/works_img/01.jpg" rel="lightbox[group]"><img src="img/thumb/01.jpg" width="250px" alt="thumb01"></a></div> <div><a href="img/works_img/02.jpg" rel="lightbox[group]"><img src="img/thumb/02.jpg" width="250px" alt="thumb02"></a></div> <div><a href="img/works_img/03.jpg" rel="lightbox[group]"><img src="img/thumb/03.jpg" width="250px" alt="thumb03"></a></div> <div><a href="img/works_img/04.jpg" rel="lightbox[group]"><img src="img/thumb/04.jpg" width="250px" alt="thumb04"></a></div> </div> </div> </body> </html>
→サンプルページ(サムネイルをクリックするとポップアップで表示)
jQueryプラグインを使用する際にはまずjQueryの本体を先に読み込む必要があります.その後目的のプラグインを読み込み,使用するプラグイン特有の設定を行い使用していきます.
上記は「LightBox」というプラグインの読み込みと設定です.scriptタグを使用して,8行目でjQuery本体を読み込み,9行目でlightBoxを読み込んでいます.(jsフォルダを作成しその中に両ファイルを置いています).7行目ではlightBox特有のCSSを読み込んでいます.(閉じるボタン,矢印など)プラグインによってはCSSも読み込まなければ使用できないモノもあります.
読み込むだけでは何も起きません.使用するには27行目aタグを使用して,hrefで拡大画像を指定しています.aタグの入れ子でimgタグを使用してサムネイル画像を表示しています.lightBoxを使用するには,aタグにオプションで「rel=”lightbox”」と記述します.lightboxの後ろに[グループ名]を付けるとグループ化されてまとめて閲覧できるようになります.
[様々なjQueryプラグイン]
参考01:http://www.skuare.net/test/jQuery.html
参考02:http://coliss.com/articles/build-websites/operation/javascript/100-jquery-plugins-2013-best.html