라이트박스 그림

개요

Quarto는 GLightbox 자바스크립트 라이브러리를 사용하여 HTML 문서의 이미지에 라이트박스 스타일과 동작을 추가합니다. 라이트박스 이미지는 독자가 클릭하여 (캡션을 포함한) 더 큰 버전의 이미지를 볼 수 있게 합니다.

예를 들어, 다음 이미지는 라이트박스 처리가 적용됩니다:

Photo by Hush Naidoo Jade Photography on Unsplash

Photo by Alessandro Bianchi on Unsplash

Photo by Joshua Melo on Unsplash

문서의 모든 이미지에 라이트박스 처리를 적용하려면 YAML 헤더에 lightbox: true를 추가하세요:

---
title: Simple Lightbox Example
lightbox: true
---

![A Lovely Image](mv-1.jpg)

라이트박스 활성화

라이트박스는 문서 내 모든 이미지에 적용하거나 특정 이미지만 선택하여 적용할 수 있습니다. 문서 내 모든 이미지에 라이트박스를 활성화하려면 다음 yaml을 사용하세요:

---
lightbox: true
---

라이트박스를 자동 선택으로 설정하면 그림으로 사용되거나 문단 안에서 단독 블록으로 나타나는 모든 이미지에 적용됩니다. 기본적으로 다른 콘텐츠와 함께 인라인으로 나타나는 이미지는 라이트박스 처리를 받지 않습니다.

특정 이미지에 라이트박스 적용

처리를 적용할 이미지에 lightbox 클래스를 부여하여 특정 이미지에만 라이트박스를 적용할 수 있습니다. 이 경우 프론트 매터에 lightbox를 포함할 필요가 없으며, lightbox 클래스 사용만으로 자동으로 활성화됩니다. 예를 들어:

---
title: Simple Lightbox Example
---

![A Lovely Image](mv-1.jpg){.lightbox}

![Another Lovely Image](mv-2.jpg)

첫 번째 이미지만 라이트박스 처리가 적용되고 두 번째 이미지는 적용되지 않습니다.

라이트박스 처리 비활성화

다음 yaml을 사용하면 문서 전체에서 라이트박스를 비활성화할 수 있습니다:

---
lightbox: false
---

라이트박스를 명시적으로 비활성화하면(위에서 설명한 것처럼) 이미지에 lightbox 클래스가 있어도 어떤 이미지도 라이트박스 처리를 받지 않습니다.

특정 이미지의 라이트박스 비활성화

이미지 자동 라이트박스가 활성화된 경우 nolightbox 클래스를 지정해 특정 이미지가 처리를 받지 않도록 할 수 있습니다. 예를 들어:

---
title: Simple Lightbox Example
lightbox: auto
---

![A Lovely Image](mv-1.jpg)

![Another Lovely Image](mv-2.jpg){.nolightbox}

이 예시에서는 첫 번째 이미지는 라이트박스 처리를 받고, 두 번째 이미지는 받지 않습니다.

갤러리

개별 이미지에 라이트박스 처리를 제공하는 것 외에도 이미지를 ’갤러리’로 묶을 수 있습니다. 사용자가 라이트박스를 활성화하면 본문으로 돌아가지 않고 갤러리의 이미지를 넘겨볼 수 있습니다. 갤러리를 만들려면 묶고 싶은 이미지에 group 속성(이름 포함)을 적용하세요. 같은 그룹 이름을 가진 이미지는 라이트박스 처리 시 하나의 갤러리로 묶입니다.

예를 들어, 다음 세 이미지는 갤러리로 처리됩니다:

![A Lovely Image](mv-1.jpg){group="my-gallery"}

![Another Lovely Image](mv-2.jpg){group="my-gallery"}

![The Last Lovely Image](mv-3.jpg){group="my-gallery"}

옵션

Quarto는 문서의 라이트박스 동작을 사용자 지정할 수 있는 여러 옵션을 지원합니다. 옵션은 다음과 같습니다:

옵션	설명
match	모든 이미지에 라이트박스 처리를 적용하려면 auto로 설정하세요. 이를 생략하면 lightbox 클래스를 가진 이미지만 라이트박스 처리를 받습니다.
effect	라이트박스를 열고 닫을 때 사용할 효과입니다. fade, zoom, none 중 하나이며 기본값은 zoom입니다.
desc-position	라이트박스를 표시할 때 제목과 설명의 위치입니다. top, bottom, left, right 중 하나이며 기본값은 bottom입니다.
loop	갤러리의 마지막 이미지 이후에도 계속 넘기면 첫 이미지로 ’루프’할지 여부입니다. 기본값은 true인 불리언입니다.
css-class	라이트박스에 적용할 클래스 이름으로, CSS 타깃팅에 사용합니다. 라이트박스 클래스가 사용자 정의 클래스 이름으로 대체됩니다.

완전한 예시:

---
title: Complete Lightbox Example
lightbox:
  match: auto
  effect: fade
  desc-position: right
  loop: false
  css-class: "my-css-class"
---

이미지별 속성

라이트박스 동작을 제어하기 위해 개별 이미지에 다음 옵션을 속성으로 지정할 수 있습니다:

옵션	설명
desc-position	라이트박스를 표시할 때 제목과 설명의 위치입니다. top, bottom, left, right 중 하나이며 기본값은 bottom입니다

계산 셀에서 라이트박스 사용

Quarto 라이트박스 처리는 계산 출력의 그림 정보를 사용합니다. 예를 들어 다음 플롯은 라이트박스 처리를 받고 사용자가 플롯을 확대할 때 올바르게 접두어가 붙은 캡션을 포함합니다.

---
lightbox: auto
---

```{r}
#| label: fig-basic
#| fig-cap: Simple demo R plot 
plot(1:10, rnorm(10))
```

계산 셀이 여러 서브그림을 생성하는 경우 각 서브그림이 라이트박스 처리를 받으며, 확대 시 사용자는 서브그림을 앞뒤로 넘길 수 있습니다. 예를 들어 다음은 두 서브그림을 포함하는 ‘갤러리’ 라이트박스 뷰를 생성하여 뷰어가 서브그림 사이를 쉽게 이동할 수 있게 합니다:

```{r}
#| label: fig-plots
#| fig-cap: |
#|   The below demonstrates placing more than one image in a gallery. Note
#|   the usage of the `layout-ncol` which arranges the images on the page
#|   side by date. Adding the `group` attribute to the markdown images places
#|   the images in a gallery grouped together based upon the group name
#|   provided.
#| fig-subcap:
#|   - "This is a caption for the first sub figure"
#|   - "This is a caption for the second sub figure"
#| layout-ncol: 2
plot(ToothGrowth)
plot(PlantGrowth)
```

계산에서 고급 사용자 지정

라이트박스 옵션은 다음과 같이 코드 셀 옵션 lightbox로 전달할 수 있습니다:

```{r}
#| fig-cap: Simple demo R plot 
#| lightbox:
#|   group: r-graph
#|   description: This is 1 to 10 plot
plot(1:10, rnorm(10))
```

여러 플롯을 생성하고 라이트박스 갤러리로 묶을 수 있습니다. 여러 플롯이 있는 경우 YAML에서 옵션을 플롯별 목록으로 사용하세요.

```{r}
#| fig-cap: 
#|   - Caption for first plot
#|   - Caption for second plot
#| lightbox: 
#|   group: cars
#|   description: 
#|     - This is the decription for first graph
#|     - This is the decription for second graph
plot(mtcars)
plot(cars)
```