lightboxの設置の仕方(↓元記事)
画像紹介を多く扱うサイトの作成
画像を多く紹介するサイト作成には、htmlページを大量に作成(複製)するか、
元画像そのものを呼び出して表示できるjqueryを使うか
photoshopの自動処理のwebフォトギャラリー機能を使って作成すると効率が良い。
(jquery=高度なcssとjavascriptを使いやすく改良した配布セット[キット]のようなもの)
lightbox
[公式サイト 英字サイト]
日本語サイト
| |||||||||||||||||
| Lightboxのサンプル | |
| サンプルページ | サンプルページの写真をクリックすると Lightboxが起動します。 サンプルページのHTMLファイルは こちらからダウンロード出来ます。 |
| Lightbox導入方法 | |
| １．ダウンロード | LightBoxサイトからLightboxをダウンロードして下さい。 ダウンロードはこちら（ページの中央あたりのDOWNLOAD） |
| ２．ZIPファイルを解凍 | LHACA、LHASAなどで解凍して下さい。 解凍すると「css」「images」「ｊｓ」が作成されます。 |
| ３．サーバーに転送 | Lightboxに対応させたいページと同じフォルダに「css」「images」「ｊｓ」を転送します 転送後、ディレクトリ構造はこのようになります index.html ←Lightboxに対応させたいページ  ※ 解凍した「images」の中の「image-1.jpg」と「thumb-1.jpg」は不要です |
| ４．HTMLタグの編集 | Lightboxに対応させたいページのHTMLタグを編集します。 <TITLE></TITLE>の次の行に を挿入します。 各写真のHTMLタグを下記のように修正します。 グループ名は「aiueo」や「abc」など自由な半角英字で指定します。 サムネール画像クリックでlightbox出現 文字クリックでlightbox出現 |
PhotoshopのWEBフォトギャラリーの機能を使う
(↓使い方の紹介サイト)※CS6のphotoshopではこの機能がなくなりました
0 件のコメント:
コメントを投稿