이미지 갤러리는 사진을 선보이고 방문자와 교류하기 위한 탁월한 방법입니다.
Lightbox jQuery 플러그인은 무료 리소스로 간편하게 이미지 갤러리를 만드는 데 사용할 수 있습니다.
이 비디오에서는 이미지 격자를 만들고 Lightbox 플러그인을 사용해 이미지 슬라이드 쇼를 표시하는 방법을 살펴보겠습니다.
갤러리 프로젝트의 구조는 간단합니다.
파일 패널을 살펴보죠.
직접 따라 하려면 프로젝트 파일을 다운로드하고 압축을 풉니다.
먼저 디자인 작업 영역으로 전환해보죠.
프로젝트에는 이미지 폴더가 있는데 저해상도 및 고해상도 이미지가 있고 Lightbox 플러그인 폴더, gallery.html과 gallery.css 파일이 있습니다.
분할 뷰에서 HTML과 CSS 파일을 사용하여 갤러리 설정을 완료해보죠.
라이브 뷰를 보면 이미지 격자가 이미 만들어져 있습니다.
이미지 위로 마우스를 가져가면 캡션이 표시되고 불투명하게 바뀌는데요.
이처럼 격자 탐색 시 매력적인 인터랙티브 요소를 추가할 수 있습니다.
코드 뷰를 보면 각 미리 보기가 anchor 태그로 생성되어 있고 하나의 div 태그가 다른 div 태그와 image 태그를 감싸고 있습니다.
중첩된 div 태그에는 캡션이 포함되어 있죠.
라이브 뷰에서 간편하게 CSS로 이동하는 방법이 있는데요.
이미지를 선택하고 위쪽 화살표를 사용하여 div 태그로 이동한 다음 선택기를 마우스 오른쪽 버튼으로 클릭하고 "코드로 이동"을 선택합니다.
CSS를 보면 이미지 위로 마우스를 가져갈 때 롤오버 효과가 만들어지고 이미지 격자에 있는 각 요소의 스타일이 있습니다.
이미지 격자를 설정하는 방법을 알고 있다면 Lightbox 플러그인을 간편하게 활성화할 수 있습니다.
일부 파일에 연결하고 anchor 태그를 설정하면 됩니다.
HTML 파일에서 head 태그를 보면 이미 Lightbox에 필요한 세 개의 리소스에 연결되어 있습니다.
바로 jQuery, Lightbox JavaScript 파일, Lightbox CSS 파일입니다.
이제 설정을 완료하기 위해 속성을 anchor 태그에 추가합니다.
Lightbox는 data 속성을 기반으로 로드할 이미지를 식별하고 제목을 할당합니다.
라이브 뷰를 사용하여 anchor 태그를 선택한 다음 Ctrl + T 또는 Mac의 경우 Command + T를 눌러 빠른 태그 편집기의 편집 모드를 엽니다.
Lightbox를 활성화하는 경우 data Lightbox와 data title 속성을 추가하면 됩니다.
여기에서 다른 anchor 태그를 data 속성으로 업데이트하면 미리 보기를 클릭할 때마다 Lightbox에서 이미지를 실행합니다.
이제 Lightbox 슬라이드 쇼가 잘 진행되는지 확인할 수 있습니다.
잠시 라이브 뷰에서 선택 항목을 끄기 위해 보기에서 라이브 뷰 옵션을 선택하고 라이브 뷰 표시 숨기기를 선택합니다.
또는 Ctrl + Alt + H, Mac의 경우 Command + Alt + H를 누릅니다.
라이브 뷰에서 미리 보기 위로 마우스를 가져간 다음 클릭하여 Lightbox를 실행합니다.
마지막으로 파일 > 브라우저에서 미리보기를 선택하고 페이지를 확인하겠습니다.
이처럼 간단하게 매력적인 이미지 갤러리를 설정할 수 있습니다.
보시다시피 Dreamweaver와 Lightbox를 사용하여 간편하게 이미지 갤러리를 설정할 수 있습니다.
라이브 뷰를 사용하여 작업을 미리 보고 편집하거나 코드로 신속하게 이동할 수 있고 코드 뷰와 빠른 태그 편집기를 사용하여 설정을 조정할 수도 있습니다.
동일한 구조로 프로젝트를 만들어 보면서 간단한 단계를 통해 포트폴리오 갤러리를 만들어 보십시오.
Dreamweaver를 실행하여 직접 해보시기 바랍니다.
