image-comparison-slider

Community Help
1

I import this image comparison slider and it works fine in my notebook. However, it doesn’t work when I embed it

Here is the link to the notebook: Old-Photo Restoration / cadasa | Observable

Can anyone help?

2

Are you embedding all the cells, including style?

3

I am not embedding all the cells but I did include style

4

If you try and embed all the cells, does it work? If that’s the case then you could bisect to which cell is missing, and integrate it somehow.

5

Yes, it works when I embed all the cells. So I have to find which one causing the problem now - thanks

6

Ha - to my surprise, I need to embed the cell that I import the library:
import("https://unpkg.com/img-comparison-slider@7/dist/index.js")

7

When you load libraries that have side effects (i.e., they do things that the Observable runtime isn’t aware of) it is advisable to declare them as dependencies of the cell that relies on them. In your case you can change

slider = result && result.completed_at

to

slider = imgcomp, result && result.completed_at

which will tell the notebook runtime to wait for imgcomp to resolve before running the slider cell. That way you no longer have to list it explicitly in your embed.

A few more notes:

  • You can include the style cell in your images cell (by reparenting it via ${style}) so that you don’t have to list it explicitly for embeds.
  • For your inputs you may want to look into Inputs.form() which lets you combine multiple inputs and wrap them in custom markup (with the template option).
1 Like