ポートフォリオギャラリーを作成する

画像ギャラリーは写真を紹介して 閲覧者を楽しませるための優れた手段です Lightbox jQueryプラグインは画像ギャラリーを 簡単に作成できる無料のリソースです このビデオでは画像グリッドを作成し Lightboxプラグインを使って画像のスライドショーを表示する方法を説明します ギャラリープロジェクトの構造は単純です 「ファイル」パネルを見てみましょう プロジェクトファイルをダウンロードして解凍し、指示に従います まずは「デザイン」ワークスペースに切り替えます このプロジェクトには 低解像度画像と高解像度画像を含むimagesフォルダー Lightboxのプラグインフォルダー gallery.htmlとgallery.cssのファイルが含まれています ギャラリーの設定を完了したら、「分割」ビューで HTMLファイルとCSSファイルを編集します 「ライブ」ビューで、画像グリッドが作成済みであることを確認できます 画像上にマウスを置くと、キャプションが表示され、不透明度が切り替わります グリッドを探索するときの、優れた双方向性を実感できます 「コード」ビューでは 各プレビューとともにアンカータグ、別のdivタグを囲むdivタグ imgタグが作成されていることがわかります ネストされたdivタグにはキャプションが含まれます 「ライブ」ビューを使用すると、CSSに簡単にナビゲートできます 画像を選択し、上矢印を使ってdivタグに移動し セレクタを右クリックして「コードへ移動」を選択します ここで、画像をマウスオーバーしたときに ロールオーバー効果を作り出すCSSを確認できます 画像グリッド内の各要素のスタイルも確認できます 画像グリッドの設定方法がわかったので Lightboxプラグインを簡単に有効化できます いくつかのファイルにリンクし アンカータグを設定するだけです HTMLファイルのheadタグを見ると Lightboxに必要な3つのリソースに リンク済みであることがわかります jQuery、Lightbox JavaScriptファイル Lightbox CSSファイルの3つです 次に、アンカータグに属性を追加して 設定を完了します Lightboxはdata属性を使って、読み込む画像を識別し 画像にタイトルを割り当てます 「ライブ」ビューでアンカータグを選択し Ctrl+T（Windows）、または Command+T（Mac）を押して クイックタグ編集を編集モードで開きます Lightboxを有効にするため、data-lightboxと data-titleの属性を追加します できました 次に、残りのアンカータグを data属性で更新します これにより、プレビューをクリックするたびに その画像が入ったLightboxが起動します この時点でデザインを確認して Lightboxスライドショーが動作していることを確認できます 「ライブ」ビューでの選択を一時的にオフにするため 「表示」から「ライブビューオプション」を選択し、 「ライブビューの表示を隠す」を選択するか WindowsでCtrl+Alt+H、MacでCommand+Control+Hを押します 「ライブ」ビューで、プレビュー上にマウスを置き クリックして、Lightboxを起動します 最後に「ファイル」から「ブラウザーでプレビュー」を選択して そのページを確認しましょう このように、魅力的な画像ギャラリーを簡単に設定できます ご覧のとおり、DreamweaverとLightboxを使うと 簡単に画像ギャラリーを設定できます 「ライブ」ビューでは結果をプレビューして編集でき コードをすばやくナビゲートできます 「コード」ビューとクイックタグ編集で 設定を編集できます 同じ構造のプロジェクトを作成してみて ポートフォリオギャラリーがほんの数ステップで作成できることを確認してください Dreamweaverを起動し、試してみてください