워드프레스 강좌 / 플러그인 / Responsive Lightbox & Gallery / 이미지 클릭했을 때 확대하는 플러그인
워드프레스 테마는 일반적으로, 이미지를 본문에 넣을 때 이미지가 아무리 커도 본문 가로폭을 넘어가지 못하게 만듭니다. 보기에는 좋지만, 그렇게 하면 큰 이미지가 작게 보여서 이미지 안의 내용을 보기 힘들 수가 있습니다. 이를 해결하는 방법은 라이트박스 플러그인을 사용하는 것입니다. 이미지를 클릭하면 원본 이미지로 또는 크게 확대 되는 걸 본 적 있으시죠? 그게 라이트박스의 기능입니다.
여러 가지 플러그인이 있지만, 널리 쓰이는 것은 Responsive Lightbox & Gallery입니다. 어떻게 사용하는지 간략히 알아보겠습니다.
플러그인 설치
- [플러그인 새로 추가]에서 Responsive Lightbox & Gallery를 검색하고 설치하고 활성화합니다.
설정
- 기본 설정은 Lightbox 메뉴에서 합니다.
- 이미지가 미디어 파일로 링크가 걸려있을 때 Lightbox가 적용되는 것이 기본 설정입니다. [Enable lightbox for WordPress image links.]에 체크되어 있기 때문입니다.
사용
- 본문에 이미지를 삽입하고, [미디어 파일]로 링크를 겁니다.
- 이제 사이트에서 이미지를 클릭하면 크게 확대되어 나옵니다.
효과 변경
- 클릭했을 때의 모양은 Dedault lightbox에서 정합니다.
- 각 모양마다 상세 설정을 할 수 있는데, 그것은 상단의 [Lighrboxes] 탭에서 합니다.
- 모양을 바꿔가며 마음에 드는 것을 찾으세요.
미디어 폴더
Responsive Lightbox & Gallery를 설치하고 활성화하면, 미디어 폴더라는 것이 생깁니다. 미디어 목록에서도 볼 수 있고...
미디어 업로드 창에서도 볼 수 있습니다.
미디어 폴더는 미디어를 그룹화하여 관리할 수 있게 도와줍니다. 이름은 폴더지만 미디어에 붙는 태그 정도로 이해하시면 됩니다. 실제로 폴더가 생성되는 것은 아니고, 풀더에 정리한 것처럼 보여질 뿐입니다.
만약 이 기능이 필요하지 않다면 Folders 설정에서 [Enable media folders.]의 체크를 해제하세요.
TIP
- 만약 라이트박스가 잘 작동하지 않는다면 오류가 있는 스크립트가 있기 때문입니다. 크롬 요소 검사 등으로 스크립트 오류가 있나 살펴보세요.