ImageViewer

ImageViewer integrates Viewer.js into Anki card templates, so you can open images in a full-screen viewer with zoom, pan, and swipe navigation.

Mobile Compatibility

This extension works well on the Anki desktop client, but it has not been extensively tested on mobile devices (e.g., AnkiMobile, AnkiDroid).

Installation

Add the following to your template:

<script src="https://cdn.jsdelivr.net/npm/@anki-eco/extensions/dist/image-viewer.js" defer></script>

Installation Note

If your Back Template does not include {{FrontSide}}, add the same script there as well.

After loading, clicking any image on the card opens the viewer automatically.

Configuration

The extension works out-of-the-box without any configuration required. However, if you need to customize its behavior, you can do so by providing a JSON configuration block.

<script id="anki-eco-image-viewer-config" type="application/json">
  {
    "selector": "#qa"
  }
</script>
<script src="https://cdn.jsdelivr.net/npm/@anki-eco/extensions/dist/image-viewer.js" defer></script>

• Config must be declared in #anki-eco-image-viewer-config with type="application/json".
• selector: Gallery root selector. Default is #qa.

Feedback

If you have any questions or suggestions, please submit them on GitHub or discuss at Discord.

If you find it helpful, please consider Sponsoring us or giving it a star 🌟: GitHub