All Articles Dreamweaver
DreamweaverでjQueryのイメージギャラリーのライトボックスを作成します。
Geoff Blake on Sat, June 18th | 9 comments
You've probably seen the Lightbox effect at work during your travels on the web, although you may not have known that it was called Lightbox.

あなたはそれがライトと呼ばれていたことが知られていない可能性がありますおそらく、ウェブ上で旅行中に職場でのライトの効果を見てきました。基本的に、イメージギャラリーのサムネール上で訪問者をクリックすると、拡大版はそれの​​後ろのページの内容を調光、ページの上部に表示されます。この広く使われている効果は、jQueryを利用して、もともとアンドロビエラPinhoによって執筆されました。実際のライトの効果は私達が私達のページで設定されたハイパーリンクによってトリガされます。彼らは非常に滑らかだし、このチュートリアルでは、1つの構築方法を習得するつもりだDreamweaverを


ステップ1

最初に、確認して、このチュートリアル用のプロジェクトファイルをダウンロードしてください。ファイルを解凍し、デスクトップのように、覚えている場所にプロジェクトファイルを保存する。プロジェクトファイルのフォルダ内にはさらに2つのフォルダが、"資産"と"イメージ"を見つけることができます。彼らは我々が必要なすべてのコンポーネントが含まれています。


ステップ2

今、先に行くと起動Dreamweaverをしてサイトを選択します。


ステップ3

次に、新しい空白のファイルを作成し、コードビューにひっくり返してから貼り付ける

このコードは、私たちのページにいくつかの追加機能のほか、必要な外部JavaScriptとCSSファイルへのリンクが含まれています。上記のサイトのように定義されているフォルダにファイルを保存してください。


ステップ4

今、私たちは、私たちのサムネイルを保持するだろうフレームワークである、ページの構造のための準備が整いました。先に行くと貼り付け

見てわかるように、外側の"lightboxgalleryは"あります


ステップ5

今我々のサムネイルを必要とする。最初のサムネイルにカーソルをドロップ


ステップ6

代わりに私たちのサムネイルと、それは全部ひとまとめにするとライトのスクリプトの出来事を得るために、今の時間です。前述したように、ourライトボックスのスクリプトは、ハイパーリンクでトリガされる予定ですので、私達は行くとリンクが設定されている各画像の大きいバージョンおよび、私達の結果をテストします。

デザインビューに裏返して、グラフィック最初のサムネイルを選択し、[プロパティ]インスペクタで(リンクフィールドの横にあるフォルダのアイコン)"は、ファイルの参照"をクリックします。 "images"フォルダ内の対応するフルサイズの画像に移動します。このケースでは、"fullsize1.jpg。"彼らのフルサイズの相手にそれぞれを結ぶ、各サムネイルのためにこれを繰り返します。


ステップ7

我々は最終的に物事をテストする準備が整いました!あなたのファイルを保存し、 ファイルを選択してください

これらをチェックしてください

イメージギャラリーライトボックスのプロジェクトファイルを作成します。

Comments (9)

You must be logged in to comment. Login Now

  • Hi there, I can't seem to find the project files(zip folder) to download, that is needed for this tutorial???
    • 7 years ago
    • By:
    Reply
  • Rounik Admin
    Hi, They are hyperlinks in the text (in blue) in Step 3, Step 4 and the very last line of this tutorial is a link: "Create Image Gallery Lightbox Project Files". Just click on these to begin downloading the files. Hope this helps Rounik
    • 7 years ago
    • By: Rounik Admin
    Reply
  • Thanks for the reply. I have a website up but I want my photography page to have a lightbox, but when I try and do it on the content page which is an ap div, it doesnt seem to show up at all??? Am I doing something wrong with placing the code maybe???
    • 7 years ago
    • By:
  • Thanks for the previous reply. I now got that done but I have a website already up but I want to have a lightbox on my photography page in the content area. The content area box is an ap div though, and I did the exact same procedure with the code and all but it doesnt show up when I refresh the page????
    • 7 years ago
    • By:
    Reply
  • Un souci ds votre tuto je ne trouve pas les code a copier coller ds dreamweaver ds le fichier que jai telecharger et dc je peu rien fr sur dream sauf si fo recopier ce que vous avez marquer sur votre excemple tuto
    • 7 years ago
    • By:
    Reply
  • wow!!!this tutorial was helpful....but what about prev,next,close and loading icons....hope you will provide the tutorials about that...
    • 6 years ago
    • By:
    Reply
  • azex
    hi, 4 images is looks simple. but, how about if the images is hundred over..? do i need to edited one by one? any other way to simplify it.
    • 6 years ago
    • By: azex
    Reply
  • Ian
    Thanks Geoff, That's a fantastic tutorial for someone like me who sits more on the creative side but sometimes needs to pretend he is a programmer!! The code works perfectly well. I am wondering if there is a fairly simple option - or a tutorial of yours somewhere else - to show how to add descriptive text for each image when it is displayed in the Lightbox, rather than just the "Image 4 of 14" text? Cheers, Ian
    • 6 years ago
    • By: Ian
    Reply
  • Emily
    Is there a way to add HTML content (like another webpage) to pop up in the lightbox as well?
    • 6 years ago
    • By: Emily
    Reply
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: