jQueryを組み込む1-1---練習 : lightbox 仕組みの把握



jQueryとは？
jQueryとは、John Resig（ジョン・レッシグ）氏によって開発／公開されたJavaScript用のライブラリです。2006年8月に最初のバージョンをリリースして以来、着実にバージョンアップを重ねています。
 ライセンスは、MIT Licenseとなっており、ライブラリの著作権表示を消さなければ、商用・非商用を問わず、誰でも自由に利用することができます。

要するに使わないとどうなるの？

jQueryのようなJavaScript用ライブラリを使わない場合、自分で素のJavaScriptで記述し、更に各ブラウザごとの違いも自分で対応させなければ行けません（どちらも煩雑な作業を伴います）。
jQueryを使えば、主要なブラウザに、簡単な方法で対応させることができます。
特に、現在のVer.1系の最新版でもIE6にも対応している点は見逃せません。


多くのjQueryでたどるだいたい同じ手順
　まずダウンロードする。 

 → ダウンロードしたもののうち、　必要なフォルダやファイルだけをサーバの必要な場所にアップロードする。　　※アップロードする場所を間違えると動かない 

 → jQueryを表示するhtmlのhead内に<link rel="~で 始まるコードをコピーペーストし、アップロードしたファイルとhtmlが連動できるようにする 
※コピーペーストするコードと自分がアップロードしたデータの場所の関係がわかっていないとコピペしても動かない
  
→ そのjQueryでコードが指定されている<script src=" 〜 "></script>のコードをbody内の表示場所にコピーペーストして埋め込む　　
※どこからどこがなんのboxかコードを見てわかっていないと正しい場所に埋め込めない 

 → そのjQueryの機能のうち自分が使いたいオプション機能を実装できるようにコードを追加してカスタマイズする。 
※それぞれのjQuery用のclassやidに当たるようなもの(例えばlight-boxではdata-lightbox="~")を指定するので、まず最低限としてclassやidの使い方がわかっていないとカスタマイズが出来ない。




jQueryを組み込む(例: lightbox)


lightboxの設置の仕方(↓元記事)

 http://www.chamanet.com/lightbox/
(※英文の説明自体が一部間違っているので、本ページの説明を読んで編集してください)

画像紹介を多く扱うサイトの作成


画像を多く紹介するサイト作成には、htmlページを大量に作成(複製)するか、
元画像そのものを呼び出して表示できるjqueryを使うか
photoshopの自動処理のwebフォトギャラリー機能を使って作成すると効率が良い。
(jquery=高度なcssとjavascriptを使いやすく改良した配布セット[キット]のようなもの)

lightbox
[公式サイト 英字サイト]
日本語サイト(※説明が古いので、本ページの説明を読んで編集してください)
http://www.chamanet.com/lightbox/ 




Lightbox導入方法

Lightboxの導入方法とサンプルのダウンロード
簡単にLightboxに対応出来ます。




Lightboxのサンプル
サンプルページサンプルページの写真をクリックすると
Lightboxが起動します。
サンプルページのHTMLコード


Lightbox導入方法
１．ダウンロードLightBoxサイトからLightboxをダウンロードして下さい。
ダウンロードはこちら
２．ZIPファイルを解凍LHACA、LHASAなどで解凍して下さい。
解凍するとdistというフォルダの中に
「css」「images」「js」が作成されます。



３．サーバーに転送Lightboxに対応させたいページ(例えばgallery.html)があるフォルダと同じフォルダ内に「css」「images」「js」を転送します
転送後、ディレクトリ構造はこのようになります。

index.html  ←Lightboxに対応させたいページのばあい





※　解凍した「images」の中のデータは不要です
４．HTMLタグの編集Lightboxに対応させたいページのHTMLタグを編集します。

<head>〜</head>内に を挿入します。

</body>の直前の行に
を挿入します。
※公式サイトの説明にはhead内に入れるとありますが、head内では動きません。
※公式サイトの説明にはlightbox.jsやlightbox.min.jsを入れると書いてありますが、この２つのファイルはそれだけでは動きません。
lightbox-plus-jquery.jsをbody内に書かないと動きません。


各写真のHTMLタグを下記のように修正します。

グループ名は「aiueo」や「abc」など自由な半角英字で指定します。

サムネール画像クリックでlightbox出現 　文字クリックでlightbox出現 






















PhotoshopのWEBフォトギャラリーの機能を使う



(↓使い方の紹介サイト)※CS6のphotoshopではこの機能がなくなりました














































コメント











コメントを投稿