Zoomen mit openseadragon in Scriptcase form integrieren

Die openseadragon Bibliothek nutzen um Bilder zu zoomen, rotieren, etc.

OpenSeadragon
Ein open source Web-basierter Viewer für hochauflösende Bilder für Desktop oder Mobil. Vollständig in Javascript implementiert:

 

Schritte zur Integration in eine Scriptcase Form

ZIP-Datei herunterladen

Eine neue, extern Bibliothek erstellen (Beispiel: openseadragon a- auf Projekt-Level)

Die ZIP-Datei in die neue externe Bibliothek laden

Diese Bibliothek aktivieren und speichern

create external library

Ein neues Feld vom Typ Label in der Form hinzufügen (Beispiel: my_openseadragon_label)

In dann den div für das Anzeigefeld dort hineinladen:

onLoad – Event
{my_openseadragon_label} = '<div id="openseadragon1" style="width: 800px; height: 600px;"></div>';

Einfaches Beispiel:
Aktivieren und laden einer Bild-Datei zu anzeigen – onApplicationInit Ereignis:

Für dieses Beispiel haben wir eine Bild-Datei in die externe Bibliothek geladen und sie benannt als: grand-canyon-landscape-overlooking.png

Wenn man ein anderes Bild vom gleichen Server laden will, ändert man die Zeile:

url: "<?php echo sc_url_library('prj', 'openseadragon', 'openseadragon-bin-2.4.2/grand-canyon-landscape-overlooking.png'); ?>"

in

url: "your_picture_url"

Weitere Möglichkeiten

In dieser Bibliothek gibt es viele, zusätzliche Möglichkeiten wie: Zoomen, rotieren, ausschneiden, callbacks, ajax,…
Bitte nutzen Sie dazu die Dokumentation dort.

 

Veröffentlicht in Scriptcase Sniplets Getagged mit: , , ,