All Articles 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.

당신이 그것이 라이트 박스라는 것을 몰랐을 수도 있지만 아마도 웹에서 여행하는 동안 직장에서 라이트 박스 효과를 봤어요. 기본적으로, 이미지 갤러리에서 썸네일에 방문자를 클릭하고, 더 큰 버전은 뒤에있는 페이지의 콘텐츠를 dimming, 페이지의 상단에 나타납니다. 이것은 널리 사용되는 효과는 jQuery를 사용하게하고 원래 리안 드로 비에 Pinho에 의해 작성되었습니다. 실제 라이트 박스 효과는 우리가 페이지에 설정된 하이퍼 링크에 의해 트리거됩니다. 그들은 매우 매끄러운하고 있으며,이 튜토리얼에서, 당신은 한 빌드하는 방법에 대한 자세한 내용은거야 ​​드림위버를 !


1 단계

첫째, 확인이 튜토리얼에 대한 프로젝트 파일을 다운로드합니다. 파일을 압축 해제하고 바탕 화면처럼 기억하는 위치에 프로젝트 파일을 저장합니다. 프로젝트 파일 폴더 안에 당신은 2 개 폴더, "자산"과 "영상"을 확인할 수 있습니다. 그들은 우리가 필요한 모든 구성 요소가 포함되어 있습니다.


2 단계

이제 가서 실행 드림위버를 하고 사이트를 선택


3 단계

다음, 새로운 빈 파일을 만들려면 코드보기로 플립; 다음 붙여넣기를

이 코드는 외부 자바 스크립트와 페이지뿐만 아니라, 몇 가지 추가 기능이 필요합니다되는 CSS 파일에 대한 링크가 포함되어 있습니다. 당신은 위의 사이트로 정의된 폴더로 파일을 저장해야합니다.


4 단계

이제 우리는 우리의 축소판을 기다 리죠 프레임 워크는 페이지의 구조에 대한 준비가되었습니다. 어서 붙여넣기

보시다시피, 바깥쪽 "lightboxgallery"는있다


5 단계

지금 우리는 우리의 축소판을해야합니다. 최초의 축소판으로 커서를 버려라


6 단계

대신에 우리의 작은 이미지로, 지금은 모든걸 함께 넥타이 라이트 박스 스크립트 발생을하는 시간이야. 앞에서 설명했듯이, 우리의 조명에 대한 스크립트는 하이퍼 링크와 실행 될 것입니다, 그래서 우리가 가서 링크를 설정 각 이미지의 큰 버전에 대한 다음의 결과를 테스트합니다.

보기 디자인, 그래픽 최초의 축소판을 선택 뒤집어; 다음 속성 검사기에 (링크 필드 옆에있는 폴더 아이콘) '파일에 대해 찾아보기'를 클릭하십시오. "이미지"폴더에있는 해당 전체 크기의 이미지로 이동합니다. 이 경우 "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
    • 6 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: