갤러리 클릭 시 새로운 갤러리가 나오게 하는 방법 (라이트박스 활용) : 애드리빙 - 관리페이지 개요

알림

이미지/갤러리갤러리 클릭 시 새로운 갤러리가 나오게 하는 방법 (라이트박스 활용)

갤러리 대표 이미지 클릭 시 관련된 다른 여러 갤러리 이미지들이 표시되도록 구성할 수 있습니다. 예를 들어 이미지 하나를 클릭하면, 갤러리가 나오며, 방문자는 화살표를 클릭해 다음 이미지들을 감상할 수 있게 됩니다.

이 방법은 로딩 없이 방문자들이 빠르게 감상할 수 있는 점이 장점입니다.

구성방법

1단계: 메뉴 추가하기

디자인 모드에 접속합니다. 접속방법
디자인 모드 왼쪽 상단 메뉴 관리를 클릭합니다.
상단 메뉴 오른쪽 끝 ⨁를 클릭합니다.
메뉴명을 입력하고 확인을 누릅니다.

2단계: 갤러리 위젯 추가하기

왼쪽 상단 위젯 추가를 클릭합니다.
갤러리 위젯을 클릭합니다.

3단계: 이미지 추가하기

갤러리 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
갤러리 설정을 클릭합니다.
갤러리 설정 창 왼쪽 상단 +이미지, 동영상 추가에서 이미지 추가를 클릭합니다.
내 PC 이미지를 선택하고 업로드합니다.
참고: 모든 이미지를 미리 같은 비율(4:3, 16:9 등)로 편집해두시면 더욱 깔끔하게 표시됩니다.

4단계: 갤러리 묶음으로 구성하기

갤러리 설정 창 상단 디자인 탭을 클릭합니다.
아래 설정 항목을 다음처럼 지정합니다.
- 이미지 비율: 편집하신 이미지 비율 선택 *필수
- 한줄 표시: 1개 *필수
- 간격: 0
- 세로 줄 수: 1줄 *필수
- 이미지 음영: rgba(0, 0, 0, 0) 을 입력
- 라이트 박스 사용 안함: 체크 해제 *필수

(선택 사항) 5단계: 갤러리 묶음 추가하기

위 2-4단계를 반복해 원하는 만큼 추가합니다.
갤러리 위젯을 다음 샘플 사이트처럼 배치합니다.

(선택 사항) 6단계: 더보기 표시 감추기

한 줄에 1개가 표시되도록 갤러리를 설정했지만 1개 이상 이미지를 넣은 경우 다음처럼 더보기가 표시될 수 있습니다. 이 더보기 표시를 숨기는 코드를 추가합니다.

코드 위젯을 추가합니다. 위젯 추가방법
코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
코드 설정을 클릭합니다.

다음 코드를 복사합니다.

<style>
#섹션ID .widget._gallery_wrap a._more_btn {
display: none !important;
}
</style>

복사한 코드를 코드 설정 빈칸에 붙여넣습니다.
코드에 작성된 #섹션ID를 갤러리 위젯이 삽입된 섹션의 #섹션ID로 변경합니다. 섹션 ID 확인방법
저장을 클릭합니다.

7단계, 미리보기 및 게시하기

디자인 모드 오른쪽 상단 미리보기 아이콘을 클릭합니다.
작업한 사항이 정상적으로 동작하는지 확인합니다.
문제가 없다면 게시하기 버튼을 클릭해 적용합니다.

마지막 게시 시점으로 되돌리기 일반 메뉴와 쇼핑 메뉴의 차이점