JavaScript image zoom und pan (verschieben)

Irgendwelche Empfehlungen, Zoomen von großen Bildern schwenken um? idealerweise inline auf der Seite.

Habe ich mit PanoJS (aka GSV2), aber jetzt mehr Menschen sind mit dem iPhone/iPad/Android-Geräte, diese Bibliothek ist entweder zu langsam, oder die älteren Versionen unterstützen nicht ziehen (die, die ich benutze im moment).

http://code.google.com/p/panojs/

http://www.dimin.net/software/panojs/

Mein Aktueller Gedanke ist, dass über die Fliesen-Bilder-Ansatz ist zu viel für diese kleinen Prozessoren (bei maximalem zoom versucht zu ziehen, 144 einzelne Bilder, aus einer 3000 x 3000px original Bild, wo jede Kachel ist 250x250px).

Also wahrscheinlich suchen mehr bei dem laden des original Bildes in einer mit einem set Breite/Höhe... und entweder schreiben meiner eigenen JS vergrößern und ziehen, oder mit einer anderen Bibliothek (die ich kann nicht scheinen, um zu finden im moment)... dann ist da noch die Frage der Verwendung von jQuery (jQuery UI draggable-Unterstützung), oder schreiben nur den raw-JS, mich zu halten die Menge an code unten.

Dies ist eine sehr umfassende Frage, die eigentlich auch mehrere Fragen. Was genau möchtest du wissen? Was bedeutet inline-auf der Seite?
Dank für das schauen und kommentieren und sorry für die Verspätung (habe nicht bekommen, eine E-Mail Benachrichtigung)... jedenfalls war ich mit diesen zwei Bibliotheken und weder funktionierte einwandfrei auf einem mobilen Gerät, so wurde gefragt, ob jemand irgendwelche bessere alternativen. Letztendlich hatte ich zu schreiben mein eigenes, obwohl die gar nicht enthalten Bibliotheken (versucht jQuery UI-draggable-Funktionalität gearbeitet, aber es war immer noch eine merkliche Verzögerung auf einige der größeren Bilder).

InformationsquelleAutor Craig Francis | 2012-07-04

9

Mehr so die Beantwortung meiner eigenen Frage, wie die standard-Bibliotheken scheinen nicht so gut funktionieren, wie ich brauchte, ich landete meine eigene Lösung:

https://github.com/craigfrancis/zoomify

Die Absicht ist, dass Sie können kopieren Sie diesen code und dann passen Sie es an Ihre eigenen Anforderungen... also im Idealfall sollten Sie in der Lage zu Lesen/verstehen Sie den code, anstatt nur Drop in Ihr Projekt und das beste zu hoffen.

InformationsquelleAutor Craig Francis
0

Ich würde empfehlen, einen viewport für mobile Geräte des Bildschirm-Breite.

alle Bilder außerhalb des Viewports für mehr als eine Kachel auf display:none.
Dann, wenn der Benutzer Pfannen nur aktualisieren Sie die Anzeige-Eigenschaft.

Diese Weise wird der browser vor allem berechnen Sie ein großes element zu bewegen mit ein paar Bildern, und dann berechnen Sie die on-und off-Zustand einiger Bilder.

viel weniger grafikintensiv als der Neuberechnung eine Grafik-heavy-div-element.

Danke @Michael, ich habe versucht, hacken Sie einige der code für die Bibliotheken (mehr so die älteren GSV2, die bereits in Verwendung war auf der website)... und ich konnte nicht die Last verringern, wenn Sie versuchen zu schwenken, die einzelnen Bilder, auch mit hacks wie mit einem display:none... ich landete meine eigene sehr einfache JS, die verkleinert das Bild 1 (Einstellung der Breite/Höhe, damit der browser hat das down-scaling), dann hinzufügen einige einfache mouseup/down, touch, und wichtige Ereignisse ermöglichen das verschieben und das ändern der zoom-Stufe... hinzufügen zu GitHub später.

InformationsquelleAutor Tschallacka
0

Nach der Suche rund um für diese zu, ich habe mich entschieden, OpenSeadragon (Neue BSD - Lizenz), ein open-source, web-basierte viewer für hohe Auflösung zoombaren Bildern (desktop und mobile). Ich brauchte es für die Image-Pyramide Quellen mit Multi-Bild Unterstützung und filtern Fähigkeiten (durch eine Vielzahl von plugins)

Weiterer starker Anwärter war OpenLayers (2-Klausel-BSD). Hier ein einfaches Beispiel mit ein statisches Bild, und hier ist der die komplette Liste der Beispiele.

InformationsquelleAutor DJDaveMark

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.