{"id":580,"date":"2020-05-17T21:21:05","date_gmt":"2020-05-17T19:21:05","guid":{"rendered":"https:\/\/asdw.de\/?p=580"},"modified":"2020-05-17T21:21:05","modified_gmt":"2020-05-17T19:21:05","slug":"integrate-openseadragon-into-scriptcase-form","status":"publish","type":"post","link":"https:\/\/asdw.de\/en\/integrate-openseadragon-into-scriptcase-form\/","title":{"rendered":"Integrate openseadragon into Scriptcase form"},"content":{"rendered":"

load openseadragon library to zoom, rotate,… images on a Scriptcase form<\/h2>\n

OpenSeadragon<\/a>
\nAn open-source, web-based viewer for high-resolution zoomable images, implemented in pure JavaScript, for desktop and mobile.<\/p>\n

Steps to integrate into a Scriptcase<\/a> project<\/h3>\n

Download the ZIP file.
\nCreate a new external library (sample: openseadragon – project level)
\nUpload the ZIP file into this external library.
\nActivate and save the new external library.<\/p>\n

\"create<\/a><\/p>\n

Add a new field of type label (sample: my_openseadragon_label)
\nAnd store the div into it:<\/p>\n

onLoad – Event
\n{my_openseadragon_label} = ‘<div id=”openseadragon1″ style=”width: 800px; height: 600px;”><\/div>’;<\/span><\/p>\n

Sample – simple:
\nActivate and load one picture to show in the onApplicationInit event:<\/p>\n

?>\r\n\r\n<script type=\"text\/javascript\" src=\"<?php echo sc_url_library('prj', 'openseadragon', 'openseadragon-bin-2.4.2\/openseadragon.min.js'); ?>\"><\/script>\r\n\r\n<script type=\"text\/javascript\">\r\nwindow.addEventListener('load', function () {\r\nvar viewer = OpenSeadragon({\r\n  id: \"openseadragon1\",\r\n  tileSources: {\r\n    type: \"image\",\r\n    url: \"<?php echo sc_url_library('prj', 'openseadragon', 'openseadragon-bin-2.4.2\/grand-canyon-landscape-overlooking.png'); ?>\"\r\n    },\r\n  prefixUrl: \"<?php echo sc_url_library('prj', 'openseadragon', 'openseadragon-bin-2.4.2\/\/images\/'); ?>\"\r\n  \/\/ tileSources: \"\/path\/to\/my\/image.dzi\"\r\n});\r\n});\r\n<\/script>\r\n\r\n<?php<\/pre>\n
For this sample we copied the image to show into the same external library and named it: grand-canyon-landscape-overlooking.png<\/p>\n
\"\"<\/a><\/p>\n
If you want to use another picture on the same server, change the line<\/p>\n
url: “<?php echo sc_url_library(‘prj’, ‘openseadragon’, ‘openseadragon-bin-2.4.2\/grand-canyon-landscape-overlooking.png’); ?>”<\/span><\/p>\n
to<\/p>\n
url: “your_picture_url”<\/span><\/p>\n
More features<\/h3>\n
There are plenty of additional features in the library, zoom, scale, rotate, call backs, …
\nPlease refer to the documentation of the library on how to use them.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
load openseadragon library to zoom, rotate,… images on a Scriptcase form OpenSeadragon An open-source, web-based viewer for high-resolution zoomable images, implemented in pure JavaScript, for desktop and mobile. Steps to integrate into a Scriptcase project Download the ZIP file. Create…<\/span><\/p>\n
Read more ›<\/a><\/div>\n
<\/p>\n","protected":false},"author":2,"featured_media":583,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[55],"tags":[190,189,50],"_links":{"self":[{"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/posts\/580"}],"collection":[{"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/comments?post=580"}],"version-history":[{"count":1,"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/posts\/580\/revisions"}],"predecessor-version":[{"id":585,"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/posts\/580\/revisions\/585"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/media\/583"}],"wp:attachment":[{"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/media?parent=580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/categories?post=580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/asdw.de\/en\/wp-json\/wp\/v2\/tags?post=580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}