{"id":13790996,"url":"https://github.com/quarto-ext/lightbox","last_synced_at":"2025-05-12T20:26:10.474Z","repository":{"id":47510275,"uuid":"511670528","full_name":"quarto-ext/lightbox","owner":"quarto-ext","description":"Create lightbox treatments for images in your HTML documents.","archived":false,"fork":false,"pushed_at":"2024-02-02T10:53:30.000Z","size":5558,"stargazers_count":76,"open_issues_count":7,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-01T03:10:01.165Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://quarto-ext.github.io/lightbox/","language":"Lua","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/quarto-ext.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-07T20:49:37.000Z","updated_at":"2025-03-20T20:12:34.000Z","dependencies_parsed_at":"2024-01-05T23:45:42.395Z","dependency_job_id":"c466e95d-a369-4c54-ae8a-7730662b2a83","html_url":"https://github.com/quarto-ext/lightbox","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quarto-ext%2Flightbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quarto-ext%2Flightbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quarto-ext%2Flightbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quarto-ext%2Flightbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quarto-ext","download_url":"https://codeload.github.com/quarto-ext/lightbox/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253815442,"owners_count":21968622,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T22:00:54.084Z","updated_at":"2025-05-12T20:26:10.452Z","avatar_url":"https://github.com/quarto-ext.png","language":"Lua","funding_links":[],"categories":["Extensions"],"sub_categories":[],"readme":"# Lightbox\n\n\u003e **IMPORTANT NOTE:** The `lightbox` extension is now a built-in feature of Quarto v1.4 (https://quarto.org/docs/prerelease/1.4/lightbox.html) so if you are using this version or later there is no need to install this extension.\n\nAn extension that uses the [GLightbox](https://biati-digital.github.io/glightbox/) javascript library to add lightbox styling and behavior to images in your HTML documents.\n\n## Installation\n\nTo install this extension in your current directory (or into the Quarto project that you're currently working in), use the following command:\n\n``` bash\nquarto add quarto-ext/lightbox\n```\n\n## Usage\n\nThe Lightbox extension is implemented as a filter in Quarto. Once installed, using the extension is easy.\n\n### Apply To Images Automatically\n\nThe Lightbox extension can automatically give images in your web page a lightbox treatment. You can enable this like:\n\n``` markdown\n---\ntitle: Simple Lightbox Example\nfilters:\n   - lightbox\nlightbox: auto\n---\n\n![A Lovely Image](mv-1.jpg)\n```\n\nYou can exclude an image from receiving this automatic treatment by giving it a `nolightbox` class, like so:\n\n``` markdown\n![Don't lightbox me!](mv-1.jpg){.nolightbox}\n```\n\n### Choose Specific Images\n\n1)  Add `lightbox` to the list of filters in your `_quarto.yml` file or your document front matter. For example:\n\n``` markdown\n---\ntitle: Simple Lightbox Example\nfilters:\n   - lightbox\n---\n```\n\n2)  Add the class `lightbox` to any images that you'd like to have the lightbox treatment. For example:\n\n``` markdown\n---\ntitle: Simple Lightbox Example\nfilters:\n   - lightbox\n---\n\n![A Lovely Image](mv-1.jpg){.lightbox}\n```\n\n## Galleries\n\nIn addition to simply providing a lightbox treatment for individual images, you can also group images into a 'gallery'. When the user activates the lightbox, they will be able to page through the images in the gallery without returning to the main document. To create galleries of images, apply a `group` attribute (with a name) to the images that you'd like to gather into a gallery. Images with the same group name will be placed together in a gallery when given a lightbox treatment.\n\nFor example, the following three images will be treated as a gallery:\n\n``` markdown\n![A Lovely Image](mv-1.jpg){group=\"my-gallery\"}\n\n![Another Lovely Image](mv-2.jpg){group=\"my-gallery\"}\n\n![The Last Lovely Image](mv-3.jpg){group=\"my-gallery\"}\n```\n\n## Global Options\n\nThe following options may be specified in the front matter for lightbox:\n\n| Option          | Description                                                                                                                                                              |\n|-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `match`         | Set this to `auto` if you'd like any image to be given lightbox treatment. If you omit this, only images with the class `lightbox` will be given the lightbox treatment. |\n| `effect`        | The effect that should be used when opening and closing the lightbox. One of `fade`, `zoom`, `none`. Defaults to `zoom`.                                                 |\n| `desc-position` | The position of the title and description when displaying a lightbox. One of `top`, `bottom`, `left`, `right`. Defaults to `bottom`.                                     |\n| `loop`          | Whether galleries should 'loop' to first image in the gallery if the user continues past the last image of the gallery. Boolean that defaults to `true`.                 |\n| `css-class`     | A class name to apply to the lightbox to allow css targeting. This will replace the lightbox class with your custom class name.                                                                                                            |\n\nA complete example:\n\n``` markdown\n---\ntitle: Complete Lightbox Example\nfilters:\n  - lightbox\nlightbox:\n  match: auto\n  effect: fade\n  desc-position: right\n  loop: false\n  css-class: \"my-css-class\"\n---\n```\n\n## Per Image Attributes\n\nThe following options may be specified as attributes on individual images to control the lightbox behavior:\n\n| Option          | Description                                                                                                                         |\n|-----------------|-------------------------------------------------------------------------------------------------------------------------------------|\n| `desc-position` | The position of the title and description when displaying a lightbox. One of `top`, `bottom`, `left`, `right`. Defaults to `bottom` |\n\n\n## Using lightbox with computation cells\n\nOptions for lightbox can be passed using chunk option `lightbox` like the following:\n\n````markdown\n```{r}\n#| fig-cap: Simple demo R plot \n#| lightbox:\n#|   group: r-graph\n#|   description: This is 1 to 10 plot\nplot(1:10, rnorm(10))\n```\n````\n\nIt is possible to create several plots, and group them in a lightbox gallery. Use list in YAML for options when you have several plots, on per plot.\n\n````markdown\n```{r}\n#| fig-cap: \n#|   - Caption for first plot\n#|   - Caption for second plot\n#| lightbox: \n#|   group: cars\n#|   description: \n#|     - This is the decription for first graph\n#|     - This is the decription for second graph\nplot(mtcars)\nplot(cars)\n```\n````\n\nWhen `lightbox: auto` is in main YAML config, you can opt-out lightbox on a plot by setting `lightbox: false`\nWhen `lightbox: auto` is not set, you can opt-in for lightbox on a specific plot by setting `lightbox: true` or by setting `lightbox` with some options.\n\n## Example\n\nHere is the source code for a minimal example: [example.qmd](https://github.com/quarto-ext/lightbox/blob/main/example.qmd)\n\nThis is the output of [example.qmd](https://quarto-ext.github.io/lightbox/).\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquarto-ext%2Flightbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquarto-ext%2Flightbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquarto-ext%2Flightbox/lists"}