it-swarm.com.de

Umgang mit Bildern, die größer als das Ansichtsfenster sind, in einer Galerie auf Karussellbasis

Ich versuche herauszufinden, wie ich eine in einen Leuchtkasten eingebettete Bildergalerie am besten gestalten kann. Die Galerie enthält Miniaturansichten jedes Bilds in einem Karussell. Wenn Sie auf ein Miniaturbild klicken, wird das Bild in einer mittelgroßen Ansicht über dem Karussell angezeigt. Die Abmessungen des mittelgroßen Bilds dürfen nicht kleiner sein als die des Ansichtsfensters. Durch Klicken auf dieses mittelgroße Bild wird das Bild zu einer großen Version erweitert.

Dieses große Bild ist oft größer als das Ansichtsfenster. Dies bringt zwei Probleme mit sich:

  1. Das Karussell wird unter das Ansichtsfenster geschoben. In diesem Fall könnte der Betrachter plausibel verwirrt sein, wie er im Karussell weiter hin und her iterieren soll, da er es nicht sehen kann.
  2. Der Benutzer muss sein Ansichtsfenster vertikal scrollen, um das vollständige Bild in voller Größe zu sehen, wodurch die Navigation im Karussell unterbrochen wird.

Ich kann mir zwei Möglichkeiten vorstellen, um diese Probleme teilweise zu lösen:

  1. Bewegen Sie das Karussell über das mittelgroße/große Bild anstatt über seine aktuelle Position unter das mittlere/große Bild. Dies vermeidet das obige Problem 1. Dies scheint jedoch unkonventionell und könnte Benutzer als klobig empfinden. Gibt es Beispiele für diese Art von Design, die an anderer Stelle verwendet werden?
  2. Wenn der Benutzer auf das mittelgroße Bild klickt, öffnen Sie das große Bild in einer neuen Registerkarte. Dies vermeidet Problem 1 und löst teilweise Problem 2. Auf der neuen Registerkarte wird jedoch nur das große Bild angezeigt (dies entspricht dem Klicken auf "Bild anzeigen" in einem Browser), was ebenfalls klobig erscheinen kann. Es zwingt den Benutzer auch dazu, zwischen Registerkarten zu wechseln - wahrscheinlich schlimmer als das Scrollen innerhalb derselben Registerkarte.

Da möglicherweise nicht klar ist, wovon ich spreche, habe ich unten ein Diagramm eingefügt, um die Situation zu veranschaulichen. In diesem Diagramm ist das Ansichtsfenster rot und der Leuchtkasten mit der karussellbasierten Galerie blau umrandet. Beachten Sie, wie die Höhe der Version des Leuchtkastens rechts die Höhe des Ansichtsfensters überschreitet.

Irgendwelche Ideen, wie dieses Problem am besten gelöst werden könnte? Können andere auf Beispiele verweisen, wie ein ähnliches Anzeigeproblem elegant behandelt wurde? Beachten Sie bei der Prüfung einer Lösung, dass das Miniaturkarussell und das mittelgroße Bild neben dem Karussell wichtige Elemente sind, die erhalten bleiben müssen.

A carousel where the lightbox height exceeds viewport height. Blue box is the lightbox in which the gallery is embedded; red box indicates browser viewport. Further enlarging image 'C' causes the lightbox height to exceed the viewport height.

5
jqp

Es gibt viele Lösungen. Am besten platzieren Sie Ihre Miniaturansichtenliste auf sehr elegante Weise ganz oben. Schauen Sie sich als erstes Beispiel diesen Bildschieber an:

http://www.tn3gallery.com/

Wenn Sie mit der Maus über das Bild fahren, wird ein weiteres Menü angezeigt, über das Sie zur Liste der Bilder gelangen. Auch in Ihrem Fall würde ich darüber nachdenken, die Miniaturansichten nach oben anstatt nach unten zu verschieben.

Ein weiterer netter Schieberegler ist:

http://codecanyon.net/item/estro-jquery-ken-burns-swipe-effect-slider/full_screen_preview/235111

Auch in diesem Fall würde ich vorschlagen, das untere Menü nach oben zu verschieben und es möglicherweise nach rechts auszurichten.

Als Überblick über dieses Problem denke ich wirklich, dass, wenn Ihre Hauptfunktionalität darin besteht, dem Benutzer hochauflösende Bilder zu liefern, die beste Option, ein Karussell zu zeigen, darin besteht, es oben zu platzieren.

Ich hoffe das hilft.

2
asuciu

Skalieren Sie die Bilder neu, damit sie in das Ansichtsfenster passen (die meisten Leuchtkastengalerien und Karussells unterstützen diese Option normalerweise standardmäßig), und geben Sie eine zusätzliche Option an, um das qualitativ hochwertige Bild in einem neuen Fenster/einer neuen Registerkarte anzuzeigen.

0
Naoise Golden

(enter image description here

Das Bild (oben) bietet vier Optionen für die Darstellung eines Bildes, das größer als das Ansichtsfenster der Anzeige ist. Dies ist normalerweise der Fall, wenn Sie ein Bild auf einem Tablet oder Smartphone anzeigen. Dies stellt zwar keine Lösung dar, soll jedoch ein klares Bild der verfügbaren Optionen liefern.

0
cbos