Skip to content

Create an embeddable JS widget of the viewer #53

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>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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