이 요소를 사용하면 Bricks에서 동적 콘텐츠 라이트박스를 시각적으로 빌드할 수 있습니다. 라이트박스의 콘텐츠는 모든 요소로 채울 수 있으며 쿼리 루프 내부에서 사용하는 경우 동적 데이터와 함께 사용하여 각 게시물에서 콘텐츠를 가져올 수 있습니다. 게시물 루프 내에서 더 많은 게시물 콘텐츠를 표시하기 위한 “더 보기” 버튼을 추가하는 데 이상적입니다.
모달 요소와의 차이점들
동적 라이트박스 요소도 모달 요소와 비슷하게 팝업으로 콘텐츠를 표시하지만, 여러 면에서 모달과 다릅니다.
- 그룹화를 지원하므로 사용자는 여러 라이트박스 간에 왼쪽/오른쪽으로 스와이프할 수 있습니다.
- iframe, 비디오, 이미지 등의 링크를 사용하여 동적으로 호출할 때 동적으로 콘텐츠를 가져올 수 있습니다.
- 항상 클릭을 통해 표시되며, 다른 트리거로 인해 나타나는 모달로 사용하도록 설계되지 않았습니다.
- Backdrop은 모바일이 아닌 데스크톱에서만 라이트박스를 닫습니다. (모바일 터치 이벤트는 이미지 확대 등에 사용됩니다)
쿼리 루프 내부
라이트박스 콘텐츠는 아래 옵션들 중에서 선택할 수 있습니다.
- Nest 요소 – 라이트박스 컨테이너 내부에 어떤 요소든 추가할 수 있습니다.
- iFrame – 다른 URL의 콘텐츠를 라이트박스 내부에 동적으로 로드할 수 있습니다. 같은 도메인의 다른 URL을 표시하는 경우 페이지의 일부만 표시하도록 선택할 수 있습니다. 예를 들어, 해당 섹션의 선택자를 제공하기만 하면 섹션 하나만 표시할 수 있습니다.
- 수동(링크) – 페이지의 여러 링크와 함께 사용할 라이트박스 요소를 하나 설정할 수 있습니다. 링크의 href는 라이트박스 내부에 어떤 콘텐츠가 표시되는지 결정합니다. 링크가 이미지 URL을 가리키는 경우 클릭하면 라이트박스에 해당 이미지가 표시됩니다. 링크가 많은 경우 “그룹화”를 활성화하여 갤러리 내부에 표시할 수 있으므로 사용자가 각 링크 사이를 넘길 수 있습니다.
- 갤러리(신규) – 미디어 라이브러리에서 이미지를 선택하거나 동적 데이터를 사용하여 라이트박스를 채울 수 있습니다. 여러 이미지에서 스와이프할 수 있도록 “그룹화”를 활성화해야 합니다. iframe을 사용할 때와 비슷하게, 사용자가 클릭해서 열어야 하는 요소를 라이트박스 구조 내부에 추가합니다.
Link selector – 사용자가 라이트박스를 열기 위해 클릭해야 하는 링크에 대한 선택자를 설정합니다. 선택자는 반드시 링크여야 하므로 버튼이나 이미지 요소를 사용하는 경우 요소 설정에서 링크로 설정해야 합니다.
사용자 정의 Close 버튼
라이트박스 오른쪽 상단에 항상 닫기 버튼이 있지만, 라이트박스 콘텐츠 내부에 사용자 지정 닫기 버튼을 추가할 수도 있습니다.
라이트박스 내부 어떤 요소든지 data-x-lightbox-close 속성을 추가하면 해당 요소를 클릭할 때 라이트박스가 닫힙니다.
“hash link to close”를 활성화하는 옵션도 있는데, 이는 라이트박스 내부(사용자를 페이지의 특정 부분으로 스크롤하는 메뉴 내부와 같이)에서 해시 링크를 클릭하면 라이트박스가 닫힘을 의미합니다.
사용자 정의 Nav 버튼
위의 사용자 지정 닫기와 유사하게, 그룹화된 라이트박스 내부에 요소를 중첩하고 클릭 시 라이트박스를 이전/다음으로 이동하는 요소를 포함하려는 경우, 모든 요소(이상적으로는 버튼)에 data-x-lightbox-prev 및 data-x-lightbox-next 속성을 추가할 수 있습니다.
iFrame 또는 갤러리 옵션 사용
iframe 또는 갤러리 옵션을 사용할 때는 콘텐츠를 요소로 채울 때와 반대 방식으로 프로세스가 진행됩니다. 이 경우 콘텐츠는 설정값을 기반으로 동적으로 가져옵니다. 사용자가 라이트박스를 열기 위한 버튼/이미지/제목 또는 요소를 라이트박스로 감싸기만 하면 됩니다.
아래의 구조 예입니다. 여기서는 라이트박스 요소 내부의 이미지가 페이지에 인라인으로 표시되고 클릭하면 라이트박스가 열려 설정된 콘텐츠(iframe URL 또는 갤러리의 이미지)가 표시됩니다. dynamic lightbox element는 여기에서 link-wrapper처럼 작동하여 콘텐츠를 여는 역할을 합니다.
매뉴얼(링크) 옵션 사용
실제 라이트박스가 페이지의 어디에 배치되어 있든 상관없습니다. 템플릿 안에 있거나 필요한 페이지에 있을 수 있습니다. “수동” 모드의 역할은 라이트박스에 해당 페이지에서 특정 링크(제공한 선택기와 일치하는 링크)를 찾도록 지시하는 것입니다.
라이트박스는 해당 링크(href 속성에서)에서 찾은 콘텐츠를 동적으로 로드합니다. 링크가 Youtube 비디오 URL을 가리키는 경우 클릭하면 Youtube 비디오가 팝업됩니다. 이미지의 경우 이미지가 표시되고 페이지 URL의 경우 페이지가 iFrame 내부에 표시됩니다.
라이트박스 콘텐츠의 너비는 “콘텐츠 너비” 설정에 따라 달라집니다. 또한 특정 비디오 너비와 이미지 너비 설정이 있어 이를 별도로 사용자 지정할 수 있습니다. 예를 들어 iFrame이 상당히 크게 보이지만 모든 비디오의 최대 너비를 제한할 수 있습니다.
Bricks의 갤러리 또는 이미지 요소와 함께 라이트박스 사용
Bricks의 이미지 요소 또는 갤러리의 모든 이미지는 동적 라이트박스를 트리거하는 데 사용할 수 있습니다. 그 이미지들이 링크 안에 래핑되었는지 확인하려면 ‘link to’ 옵션을 ‘media file’로 설정하기만 하면 됩니다. 그런 다음 라이트박스에서 ‘manual’ 모드를 사용하여 해당 링크에 대한 선택자를 추가할 수 있습니다.
예를 들어,
- 갤러리 요소 설정에서 ‘link to’ 옵션을 ‘media file’로 설정합니다. 이제 각 이미지 URL에 대한 링크가 포함된 갤러리가 있습니다.
- 갤러리에 ‘my-gallery’와 같은 클래스를 지정합니다.
- 페이지에 동적 라이트박스 요소를 추가하고 링크를 찾기 위해 ‘manual’ 모드로 설정합니다.
- 링크 선택기에서 갤러리의 클래스를 사용하여 라이트박스가 갤러리 내부의 링크인 ‘.my-gallery a’를 타겟팅하는지 확인합니다.
라이트박스 스타일링
Content height/width
라이트박스 내부의 콘텐츠 높이/너비를 설정합니다. 기본적으로 높이는 자동이므로, 라이트박스가 항상 내부의 요소의 높이를 차지하도록 하려면 그대로 둘 수 있습니다. 콘텐츠가 많을 경우, 라이트박스를 스크롤할 수 있도록 높이를 설정하는 것이 가장 좋습니다.
Styling the UI
Built-in Close 버튼과 Navigation Arrows(Grouping이 활성화된 경우)는 모두 별도로 스타일을 지정할 수 있습니다.
Inner Content
레이아웃, 콘텐츠의 기본 배경색, 테두리 등을 설정하려면 내부 콘텐츠 탭의 스타일 설정으로 이동하세요.
Grouping
쿼리 루프 내부에서 라이트박스를 사용하는 경우 모든 게시물을 함께 그룹화하여 사용자가 하나의 라이트박스를 열 때 다른 게시물 사이를 앞뒤로 탐색할 수 있는 옵션이 있습니다. 탐색 화살표가 나타납니다.
Loop slides on end
이 기능을 활성화하면, 사용자가 마지막 슬라이드에 도달하면 첫 번째 슬라이드로 돌아갑니다.
Draggable
사용자가 왼쪽/오른쪽으로 드래그하여 탐색할 수 있도록 합니다(화살표를 누를 필요 없음). 대부분의 경우 이 기능을 활성화하는 것이 가장 좋지만, 비활성화하는 것이 가장 좋은 경우는 다음과 같습니다.
- 라이트박스 내부에 슬라이더나 다른 드래그 가능한 요소를 추가했으므로 사용자가 라이트박스 대신 해당 요소를 드래그하도록 합니다.
- 슬라이드 효과에 “슬라이드”가 아닌 다른 애니메이션을 사용합니다(예: 사용자가 스와이프하여 페이드 효과를 보는 것이 의미가 없는 “페이드”).
Slide effect
사용자가 슬라이드 간을 이동할 때 다른 애니메이션을 설정합니다.
Config
Close button
뷰포트 오른쪽 상단에 닫기 버튼이 나타나도록 설정
Click backdrop to close
라이트박스 콘텐츠 외부의 아무 곳이나 클릭하여 라이트박스를 닫을 수 있도록 허용합니다.
Keyboard Navigation
그룹화를 사용하는 경우 사용자가 화살표 키를 사용하여 슬라이드 사이를 탐색할 수 있도록 설정합니다.
Animation
라이트박스가 열리고 닫힐 때의 움직임을 변경하려면 “start position”과 “end position”을 모두 변경할 수 있습니다.
시작 위치는 라이트박스가 나타나기 전의 위치입니다. 종료 위치는 닫힐 때 이동하는 위치입니다.
미리보기 옵션을 사용하여 모달을 다른 위치에서 볼 수 있습니다.
Prefers reduce motion
브라우저에서 동작 감소를 설정한 사용자의 애니메이션을 제한하도록 선택합니다.
Captions
‘manual link mode’ 또는 ‘gallery’ 모드를 사용하여 라이트박스에 이미지를 포함하는 경우, 새로운 캡션 옵션을 사용하면 각 이미지가 표시될 때 뷰포트 하단에 이미지 캡션을 표시할 수 있습니다.
사용하는 갤러리에 따라 캡션을 표시하는 방법은 다음과 같습니다.
If using the Pro Slider Gallery
이미지에 자동으로 캡션이 내장되므로, 라이트박스 설정에서 간단히 활성화하여 각 이미지의 캡션 데이터를 표시할 수 있습니다.
If using the ‘gallery’ option in the lightbox
이미지에 자동으로 캡션이 내장되므로, 라이트박스 설정에서 간단히 활성화하여 각 이미지의 캡션 데이터를 표시할 수 있습니다.
If using the Bricks’ Gallery Element
갤러리 요소 설정에서 ‘captions’가 활성화되어 있는지 확인하세요.
If using your own links with ‘manual link mode’
사용자 정의 링크에 attribute를 이용하여 ‘data-description’을 추가하고 캡션으로 표시하려는 텍스트를 value로 설정합니다. 어떠한 다이내믹 데이터도 가능합니다.
