Skip to content

Create an embeddable JS widget of the viewer #53

@adamjarling

Description

@adamjarling

Description

The idea here would be to create an embeddable JavaScript widget that can render itself in any web hosted environment. So an application which is using this openseadragon-react-viewer package, makes available it's current viewer as an embeddable widget any website viewer can embed on their own website.

Maybe the player has an "embed icon" which will dynamically generate the code necessary (similar to UV's below)?

Resources:

https://selleo.com/blog/how-to-create-embedded-react-widget

UV example. https://universalviewer.io/uv.html?manifest=https://iiif.stack.rdc.library.northwestern.edu/public/ac/c1/e9/78/-c/6f/c-/42/32/-b/3a/8-/58/70/74/5a/bb/9f-manifest.json?manifest=https://iiif.stack.rdc.library.northwestern.edu/public/ac/c1/e9/78/-c/6f/c-/42/32/-b/3a/8-/58/70/74/5a/bb/9f-manifest.json#?c=0&m=0&s=0&cv=0&xywh=-1007%2C-122%2C3396%2C2432

Can be embedded on any html doc with the following code:

<div class="uv" data-locale="en-GB:English (GB),cy-GB:Cymraeg" data-config="/config.json" data-uri="https://iiif.stack.rdc.library.northwestern.edu/public/ac/c1/e9/78/-c/6f/c-/42/32/-b/3a/8-/58/70/74/5a/bb/9f-manifest.json?manifest=https://iiif.stack.rdc.library.northwestern.edu/public/ac/c1/e9/78/-c/6f/c-/42/32/-b/3a/8-/58/70/74/5a/bb/9f-manifest.json" data-collectionindex="0" data-manifestindex="0" data-sequenceindex="0" data-canvasindex="0" data-xywh="-1007,-122,3396,2432" data-rotation="0" style="width:560px; height:420px; background-color: #000"></div><script type="text/javascript" id="embedUV" src="https://universalviewer.io/vendor/uv/lib/embed.js"></script><script type="text/javascript">/* wordpress fix */</script>

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions