Responsive Bilder im Text mit Hover-Zoom-Effekt und progressiver Zoom-Funktion beim Klicken. Der AJAX-ZOOM-Viewer wird in der responsiven Fancybox oder im Vollbildmodus geöffnet.

Sie können die Erweiterung auch so konfigurieren, dass das einfache Bild beim Klicken mit dem AJAX-ZOOM-Viewer ersetzt wird. Der Zoom-Viewer wird anstelle des Bildes geladen. Der Benutzer kann den Zoom-Viewer schließen und das einfache Bild im Text wiederherstellen.

Im Beispiel können Sie zwischen diesen verschiedenen Öffnungsmodi wechseln.

Es eignet sich hervorragend für redaktionelle Inhalte, da der HTML-Code im Wesentlichen aus einem "img" -Tag besteht. Content Administratoren können diesen Tag problemlos über den WYSIWYG-Editor eines beliebigen CMS in Text einfügen.

Eine Demonstration der AJAX-ZOOM $.fn.axZm.zoomTo API-Methode. Wie der Name vermuten lässt, können Sie mit der Methode in einen bestimmten Bereich des Bildes zoomen. Dies, bei Angabe der Koordinaten x1, y1, x2 und y2.

Mit Hilfe einer anderen Methode, die in diesem Beispiel erläutert wird, können Sie umgekehrt die Koordinaten des vergrößerten Bild-Ansichtsfensters (sichtbarer Bereich) ermitteln.

Das Beispiel zeigt auch, wie Sie Miniaturansichten aus dem Ansichtsfenster des Viewers oder aus anderen Schnittkoordinaten eines Bildes erstellen können.

Dieses Beispiel ist hauptsächlich für Entwickler gedacht, die mit AJAX-ZOOM benutzerdefinierte Funktionen erstellen möchten.

Dies ist eine Demonstration der AJAX-ZOOM API-Methoden, die sich mit Hotspots befassen. Daher ist es nur für Entwickler sinnvoll!

Sie können Stellen in Bildern mit interaktiven Markern (Hotspots) mittels der API-Methode $.fn.axZm.createNewHotspot versehen, indem Sie auf einen Punkt im AJAX-ZOOM-Viewer klicken. Dies sowohl im gezoomten, als auch nicht gezoomten Zustand. Zusätzlich können Sie einen Titel und eine Beschreibung für diese Markierungen definieren. Alle Daten wie die Koordinaten der Hotspots und der Text sind in einem externen JavaScript-Objekt vorhanden, das alle Änderungen aufzeichnet.

In diesem Beispiel wird das Datenobjekt in der "virtuellen Konsole" als JSON gedruckt. Die Ausgabe wird aktualisiert, wenn sich die Daten ändern. Sie können diese Daten in Ihrer Anwendung speichern oder etwas anderes damit tun. Beispielsweise können Sie es per PostMessage an einen anderen Client senden.

Alle Codes haben Inline-Kommentare. Als Entwickler werden Sie daher diese schnell anpassen können. In der Dokumentation finden Sie zusätzliche Informationen zu allen in diesem Beispielcode vorhandenen API-Methoden.

Integration des AJAX-ZOOM Viewers über das Iframe HTML Element. Dies ist der einfachste Weg, AJAX-ZOOM überall einzubinden.

Sie können beliebig viele Instanzen auf einer Seite platzieren. Vollbild-Ansichten funktionieren auf Desktop- und mobilen Geräten. Die Verwendung von "lazyload" zum Verzögern des Ladens der Inhalte innerhalb des Iframes ist möglich. Das Beispiel zeigt, wie dies gemacht werden kann.

Der Inhalt des Viewers im Iframe kann eine Bildergalerie, eine 3D / 360-Produktrotation oder ein hochauflösendes Bild mit progressivem Zoom sein. Da der AJAX-ZOOM-Viewer adaptiv ist, wird er sich automatisch an die Größe des responsiven Iframes anpassen.

Wie in Beispiel16 befindet sich die "Imagemap" außerhalb des Viewers, hat jedoch dieselbe Größe wie der Bild-Viewer.

Dieses Design ist interessant, wenn der Benutzer das gesamte Bild in voller Größe sehen und die hochauflösenden Bilder mit tiefem Zoom detailliert untersuchen muss. Einige unserer Kunden verwenden es für den Vorher / Nachher-Vergleich.

Mit der $.fn.axZm.zoomSwitchQuick - API können Sie schnell zwischen zwei oder mehr Bildern wechseln, ohne den Zoom-Status zu verlieren. Diese Art der Umschaltung funktioniert nur, wenn die Bilder exakt die gleiche Größe haben. Mit einigen Optimierungen können Sie zwischen den Bildern nicht nur über ein Element der Benutzeroberfläche umschalten, sondern auch z.B. über Tastaturtasten (siehe Quellcode). Darüber hinaus besteht die Möglichkeit, ein anderes Paar oder ein anderes Array von Bildern zu laden ohne dabei den Viewer neu zu laden. Dies kann man mithilfe der API-Methode $.fn.axZm.loadAjaxSet erledigen.

Andere mögliche Anwendungsbereiche sind Zeitrafferaufnahmen um die Änderungen Frame bei Frame zu untersuchen. Sicherheits- und Fotodokumentationsanwendungen, Vergleich von Fotos, die mit verschiedenen Kameraeinstellungen gemacht wurden sind weitere Anwendungsbereiche.

Dies ist eine kurze Einführung bzw. Übersicht über die verschiedenen Arten der Integration des AJAX-ZOOM Viewers für hochauflösenden Bilder in Ihr Template oder HTML.

Sie erhalten einen schnellen Überblick über die vielfältigen Möglichkeiten, die in anderen Beispielen näher beschrieben werden.

In dieser Beispielkonfiguration sind die Vor- und Zurück Pfeile, sowie die Miniaturansichten Galerie deaktiviert. Auf Touch Geräten können die Nutzer jedoch durch horizontales Wischen und auf Desktops mit der Maus durch Drag & Drop zwischen den Bildern umschalten.

Erwägen Sie dieses Bespiel, wenn Sie eine Vorlage mit der minimalen Konfiguration benötigen. Die verbliebene Navigationsleiste unten am Player kann per Option deaktiviert werden oder Sie können die Schalttasten mit Standardfunktionalitäten hinzufügen und entfernen.

In diesem Beispiel wird AJAX-ZOOM in der responsiven Fancybox bei Klick geladen .

Dies ist ein leicht modifiziertes Fancybox-Skript der ersten Generation (MIT). Anstatt Quellbilder zu laden, lädt das Skript den AJAX-ZOOM-Viewer mit der tiefen Zoom Funktionalität und optionaler Galerie mit Miniaturansichten. Es kann auch AJAX-ZOOM 360 Viewer laden. Die Änderungen am Fancybox Core-JavaScript der ersten Generation wirken sich jedoch nicht auf die Standardfunktionalität aus! Sie können es also für beide Zwecke verwenden.

Um AJAX-ZOOM mit Fancybox auf diese Weise aufzurufen, haben wir eine Wrapper-Erweiterung erstellt. Dieses separate $.openAjaxZoomInFancyBox Plugin löst aus und verwaltet den AJAX-ZOOM-Viewer in der Fancybox. E s macht auch die Fancybox der ersten Generation responsive. Das $.openAjaxZoomInFancyBox Plugin funktioniert auch mit der unveränderten Fancybox 2 Version. Bei Facybox 1 waren noch Änderungen notwendig.

Dieses Beispiel kann auch als Tutorial zum Definieren des Inhalts dienen, den Sie in den AJAX-ZOOM-Viewer laden möchten! Es listet beispielhaft alle möglichen Abfragezeichenfolgeparameter auf (zoomData, zoomDir, 3dDir, zoomFile und zoomID). Dies sind die Parameter, die AJAX-ZOOM standardmäßig unterstützt, um einfache Bilder und Pfade für den 360-Viewer zu definieren. Das Beispiel erläutert auch, wie Sie die Werte der Parameter komprimieren können. Das Komprimieren hilft direkte Bildpfade vor dem öffentlichen Zugriff zu verbergen und die Länge der Abfragezeichenfolge zu verkürzen.

Responsive, volle Seitenbreite umfassende Implementierung der Ausgabe von Beispiel31.

Einige Optionen des Bildsliders unterscheiden sich von den Standardeinstellungen. Das Seitenverhältnis von dem übergeordneten Container des Viewers wird durch eine zusätzliche AJAX-ZOOM JavaScript Erweiterung gesteuert. Diese Art der Implementierung mit der Steuerung des Seitenverhältnisses ist optional, aber durchaus nützlich.

Diese Demo bezieht sich direkt auf die AJAX-ZOOM Hotspots Funktionalität. Die Aufgabe bestand darin, ein Beispiel mit der Möglichkeit zu erstellen, Teile eines Bildes aus Daten in externen Quellen hervorzuheben. Bei dieser speziellen Implementierung handelt es sich bei den Daten um ein OCR-Schema, das in XML-Dateien gespeichert wird. Einige OCR-Software bietet die Möglichkeit, Koordinaten (x1, y1, x2 und y2) der erkannten Wörter in ihrem Schema zu speichern. Diese Koordinaten sind für AJAX-ZOOM ausreichend, um mit Hilfe der AJAX-ZOOM Hotspot-API Überlagerungen zu erstellen bzw. zu entfernen und zwar unabhängig von dem Ansichtsverhältnis oder Zoomstufe.

In dem Beispiel können die Benutzer im "Autosuggest" Suchfeld nach Wörtern suchen. Die Ergebnisse werden unter dem Suchfeld angezeigt und nach der Seitennummer und Suchnummern gruppiert. Die Benutzeroberfläche im aktuellen Zustand ist ein Proof of Concept. Sie soll lediglich zeigen, dass die Funktionalität vorhanden ist und dass sie funktioniert. Alle Seiten ohne Ergebnisse werden vorübergehend ausgeblendet. Wenn der Benutzer auf eine Nummer klickt, schaltet der Viewer zur entsprechenden Seite und zoomt auf die ausgewählte Stelle. Das gefundene Wort wird hervorgehoben.

Die standardmäßig unterstützten OCR-Schemas sind "hOCR" und "ALTO". Es ist jedoch leicht möglich, die Software an jedes andere Schema anzupassen. Noch besser wäre es, die Daten aus XML-Dateien in einer Datenbank zu speichern und dort nach Übereinstimmungen zu suchen. Das würde die Suche in großen Archiven sehr erleichtern.

Das Wechseln zwischen Bildersets (Bücher, Zeitungen usw.) ist für AJAX-ZOOM API-Methoden kein Problem. Da dieses Beispiel jedoch ein Entwurf ist, endet die Herausarbeitung an diesem Punkt. Ohne weitere Anpassungen ist es für gescannte Schriften mit einer Länge von 100 - 200 Seiten effizient einsetzbar. Generell ist es ein perfektes Softwaretool für Museen, digitale Archive und andere digitale Verlage. Als Entwickler kannst Du diese Demo mit deinem Code erweitern.