Ich mag die Dinge einfach. Hinsichtlich dessen, was erreicht werden soll, ist Einfachheit meist die beste Lösung – hier Bilder vergrößern auf Websites durch den Nutzer.
Der vereinzelte lateinische Fülltext ist ein Klassiker und dient hier der Darstellung.
Derzeit noch ein Mix aus Inline-Angaben und meiner garten.css – ändere ich beizeiten …
Resize für Bilder – aktiv ziehen, weitere Beispiele
Bitte öffnen:
Tabelle 1
Tabelle 2
Tabelle 3
Varianten denkbar: aufziehbare Höhe begrenzen … mehrere untereinander anordnen, welche alle geöffnet ein Bild ergeben …
Positionen von zwei Bildern übereinander mit Ausgangsposition maximal groß, durch kleiner ziehen des oberen Bildes bekommt man beispielsweise eine Vorher-, Nachher-Ansicht.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Button über gesamte Textbreite mit resize: block;:
Scrollbar kann angezeigt werden (overflow: auto; oder scroll;) … aufziehbare Höhe begrenzt werden … weitere Texte, weitere Bilder in den Button hinein … Rahmen drumherum …
Auch hier denkbar: mehrere Button untereinander mit großen Karten, Tabellen (…), die ohne den Platz zu verlassen angeschaut werden können … zwei Fotos / Tabellen (…) übereinander positionieren, das Oberste mit x-resize: für Vorher-, Nachher-Vergleiche (oder so).
Button – aktiv klicken
Diese Möglichkeit via „Klick“ halte ich mit für die beste Lösung, wenn derlei schon animiert sein will. (Unvermittelte) Hover-Effekte nerven in der Regel, funktionieren auch nicht auf Handys, sind dort überflüssig.
Beispiel 1)
Wurzelware versus Container
Vergrößern: Klicken Sie bitte aufs Foto. Verkleinern: Klicken Sie außerhalb des Fotos: 1) oberhalb oder seitlich, 2) unter dem Bild. Das Verschieben von Text und das Ruckeln müssen natürlich noch weg.
[*] Beim letzten Listenpunkt „Versandkosten“ ist ein kleiner Dreher passiert: Die Containerrose ist im Versand natürlich teurer, man spart bei der Wurzelware.
Bei allen bisherigen Varianten bewegt sich der folgende Text / der Inhalt unterhalb – dies ist unfein. Mit Hilfe von position:absolute; ruckelt es nicht mehr.
Beispiel mit scale und absoluter Positionierung (und etwas Schnick-Schnack):
Hier steht viel Latein
… für zwei Varianten von Bildern positioniert innerhalb von Texten.
Variante 1) mit Textvergrößerung:
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Eine Heuschrecke ohne Schrecken ist nur Heu … und eine ohne Heu … verhungert.
(hier mit display: block; Texte unter dem Bild … border: left; und padding-left: 1em;)
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Als Bildergalerie
Fotos direkt eingefügt (ohne url). Wer mag, stylt …
(Bitte „klicken“, Sie können bei einem vergrößertem Bild sogleich das Nächste anklicken, sofern auf Ihrem Monitor Platz ist):
(Erneut) „Mikroanimationen“
Beispiel Mikro-Animation zu Makro-Animation via (selbst bestimmten) „Klick“.
„Klick“ neben der Animation macht`s wieder klein.
Hier Variante position: absolute; overflow: inherit; (anstatt hidden) sowie opacity:
Weitere Beispiele sind natürlich denkbar; diese Beispiele hier sind auch nicht bis ins Detail ausgearbeitet – tut hier auch nicht Not.
Verwenden würde ich von all dem wohl „produktiv“ eher wenig bis nichts – wenigstens nicht auf meinen derzeitigen Rosen-Seiten.
Der Grund ist eigentlich einfach: Es macht schon Schreiberei – und Energieverbrauch. Und vermutlich ist es den Nutzern des Netzes sogar egal, ob Rosenbilder toll animiert sich groß machen – oder groß genug sofort zu sehen sind. Vergrößern können Sie jede Website gegebenenfalls via Tastatur, beim Handy ja salopp mit zwei Fingern … [*]
Und möglicherweise überschätzt das Webdesign sich selbst … und unterschätzt die Nutzer des Web – könnte ja so sein.
Eine gute, schlichte Lösung, ein informatives Bild zu zeigen:
Der Kopf einer Heuschrecke in Nahaufnahme.
[*] Tastenkombinationen für Zoom
Die Vergrößerung von Websites via Tastatur ist einfach und hilfreich:
Strg und + (Plus) macht die Website größer.
Strg und - (Minus) macht die Seiten kleiner.
Strg und 0 (Null) normalisiert.
Sonderlösungen auf Websites, via Button (und Scripten) als „Service“ das Vergrößern anzubieten, sollten eher vermieden werden.
Alle Browser bieten von Haus aus Zoom an; auch wahlweise nur für Text oder für Text und Bilder. Der Zoomfaktor oder die gewünschte Mindestgröße kann auch fest in den Einstellungen der Browsers abgespeichert werden.
Menschen mit einer Sehschwäche wissen zudem in der Regel, wie sie kleinen Text groß bekommen …
Den Maßgaben für eine arm an Barrieren erstellte Website entsprechen zu wollen, dies ist ein guter Weg – dazu gehört allerlei … nicht aber das Angebot hauseigener Zoom-Button …
