lightboxの設置の仕方(↓元記事)
http://www.chamanet.com/lightbox/(※英文の説明自体が一部間違っているので、本ページの説明を読んで編集してください)
画像紹介を多く扱うサイトの作成
画像を多く紹介するサイト作成には、htmlページを大量に作成(複製)するか、
元画像そのものを呼び出して表示できるjqueryを使うか
photoshopの自動処理のwebフォトギャラリー機能を使って作成すると効率が良い。
(jquery=高度なcssとjavascriptを使いやすく改良した配布セット[キット]のようなもの)
lightbox
[公式サイト 英字サイト]
(※英文の説明自体が一部間違っているので、本ページの説明を読んで編集してください)
(※英文の説明自体が一部間違っているので、本ページの説明を読んで編集してください)
日本語サイト(※説明が古いので、本ページの説明を読んで編集してください)
http://www.chamanet.com/lightbox/
| |||||||||||||||||
| Lightboxのサンプル | |
| サンプルページ | サンプルページの写真をクリックすると Lightboxが起動します。 サンプルページのHTMLコード |
| Lightbox導入方法 | |
| １．ダウンロード | LightBoxサイトからLightboxをダウンロードして下さい。 ダウンロードはこちら |
| ２．ZIPファイルを解凍 | LHACA、LHASAなどで解凍して下さい。 解凍するとdistというフォルダの中に  |
| ３．サーバーに転送 | 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ではこの機能がなくなりました