Before-and-after image demo

Driven by juxtapose.js

Author

James Goldie

Step 1: add the CSS to the frontmatter

Your YAML frontmatter should include the library’s CSS (note how the examples on its GitHub README include a <link rel="stylesheet"> tag!):

css:
  - https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css

Step 2: Importing the module

Let’s try it out. JuxtaposeJS is on jsDelivr, so we can just import it! It’s a little stubborn, but requiring the individual file, rather than just the package name, seems to work (thanks, Observable Module Require Debugger!). It produces an error but seems to work, so I just catch the error and ignore it:

require("https://cdn.jsdelivr.net/npm/juxtaposejs@1.1.6/build/js/juxtapose.min.js")
  .catch(() => null)

Step 3: Write the Juxtapose!

And here’s the Juxtapose code! Once the library’s loaded, you can just write it with HTML, as per the README:

::: {.juxtapose data-startingposition="35%" style="margin-bottom:2em"}

![](https://unsplash.com/photos/o3TZx8_j7FE/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjUzMzY0ODYw&force=true&w=640){data-credit="Fabian Mardi on Unsplash" data-label="Image A by Fabian Mardi on Unsplash"}

![](https://unsplash.com/photos/iFdPrhOPI_E/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjUzMzU4Mzg0&force=true&w=640){data-credit="Weyne Yew on Unsplash" data-label="Image B by Weyne Yew on Unsplash"}

:::

Nice! I’ve added a bit of extra margin-bottom to it so that this text clears it properly too.

---
title: "Before-and-after image demo"
subtitle: "Driven by juxtapose.js"
author: "James Goldie"
format:
  html:
    code-tools: true
    css:
      - https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css
---

## Step 1: add the CSS to the frontmatter

Your YAML frontmatter should include the library's CSS (note how the examples on its GitHub README include a `<link rel="stylesheet">` tag!):

```yaml
css:
  - https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css
```

## Step 2: Importing the module

Let's try it out. JuxtaposeJS is on [jsDelivr](https://www.jsdelivr.com), so we can just import it! It's a little stubborn, but requiring the individual file, rather than just the package name, seems to work (thanks, [Observable Module Require Debugger](https://observablehq.com/@observablehq/module-require-debugger)!). It produces an error but seems to work, so I just `catch` the error and ignore it:

```{ojs}
//| output: false
require("https://cdn.jsdelivr.net/npm/juxtaposejs@1.1.6/build/js/juxtapose.min.js")
  .catch(() => null)
```

## Step 3: Write the Juxtapose!

And here's the Juxtapose code! Once the library's loaded, you can just write it with HTML, [as per the README](https://github.com/NUKnightLab/juxtapose#html-implementation):

```markdown
::: {.juxtapose data-startingposition="35%" style="margin-bottom:2em"}

![](https://unsplash.com/photos/o3TZx8_j7FE/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjUzMzY0ODYw&force=true&w=640){data-credit="Fabian Mardi on Unsplash" data-label="Image A by Fabian Mardi on Unsplash"}

![](https://unsplash.com/photos/iFdPrhOPI_E/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjUzMzU4Mzg0&force=true&w=640){data-credit="Weyne Yew on Unsplash" data-label="Image B by Weyne Yew on Unsplash"}

:::
```

::: {.juxtapose data-startingposition="35%" style="margin-bottom:2em"}

![](https://unsplash.com/photos/o3TZx8_j7FE/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjUzMzY0ODYw&force=true&w=640){data-credit="Fabian Mardi on Unsplash" data-label="Image A by Fabian Mardi on Unsplash"}

![](https://unsplash.com/photos/iFdPrhOPI_E/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjUzMzU4Mzg0&force=true&w=640){data-credit="Weyne Yew on Unsplash" data-label="Image B by Weyne Yew on Unsplash"}

:::

Nice! I've added a bit of extra `margin-bottom` to it so that this text clears it properly too.