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

1 단계

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

2 단계

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

3 단계

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

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

4 단계

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

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

5 단계

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

6 단계

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

보기 디자인, 그래픽 최초의 축소판을 선택 뒤집어; 다음 속성 검사기에 (링크 필드 옆에있는 폴더 아이콘) '파일에 대해 찾아보기'를 클릭하십시오. "이미지"폴더에있는 해당 전체 크기의 이미지로 이동합니다. 이 경우 "fullsize1.jpg." 자신의 전체 크기의 대응 각을 연결, 각각의 작은 이미지에 대해이 단계를 반복합니다.

7 단계

우리는 결국 물건을 밖으로 시험 준비! 파일을 저장한 다음 파일을 선택합니다

다음을 확인하십시오

이미지 갤러리 라이트 박스 프로젝트 파일 만들기