de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Wenden Sie den Zoom-Effekt auf Bilder mit Zoomer an

Es gibt ein Zitat, das besagt: "Ein Bild sagt mehr als tausend Worte." Im Webdesign wird es noch relevanter. Vor allem, wenn es darum geht, Produkte zu präsentieren, zum Beispiel auf einer E-Commerce-Website. Die Leute müssen einen klaren Griff bekommen und in der Lage sein, das Produkt visuell zu betrachten, bevor sie einen Kauf tätigen.

Das Bild so groß wie möglich zu machen, kann dieses Problem nicht lösen, da es auch viel Platz benötigt. Daher ist es am besten, das Bild zoombar zu machen. Mit Zoomer können Sie das ganz einfach machen.

Zoomer ist eine kostenlose Javascript-Bibliothek, mit der Sie Ihr Bild zoomen können . Wenn es aktiviert ist, fügt es einen eigenen Stil und eine Schaltfläche zum Vergrößern und Verkleinern hinzu. Es unterstützt auch mehrere Bilder, die automatisch in eine Bildergalerie umgewandelt werden.

Initialisierung

Bevor Sie es initialisieren, fügen Sie zunächst das Zoomer-Skript (das Sie von der GitHub-Seite erhalten) in Ihr Projekt ein:

Zoomer umgibt das Bild mit seinem Stil und fügt einen Zoom-In und Zoom-Button hinzu. Sie sollten das Zoomer-Stylesheet vor dem schließenden Tag von head einfügen.

 ..  .. 

Ein- und Auszoomen

Um einen neuen Zoomer zu erstellen, fügen Sie einfach ein Bild in einen Wrapper ein. Vergessen Sie nicht, dem Wrapper eine feste Höhe und Breite zu geben, da der gesamte verfügbare Platz durch das neue Markup ausgefüllt wird. Ich erstelle zum Beispiel einen Wrapper mit dem Namen .zoomable und definiere die Höhe auf 500px und die Breite auf 100% wie .zoomable :

 .zoomable {Höhe: 500px; Breite: 100%; } 

Dann wickle ich das Bild, das ich zoomen möchte, wie folgt um:

Wie man ein ehrfürchtiges Team anstellt und errichtet

Wie man ein ehrfürchtiges Team anstellt und errichtet

Irgendwann in deiner Design-Karriere wirst du wahrscheinlich für andere Leute verantwortlich sein. Dazu gehören Autoren, Vermarkter, Programmierer, Ingenieure und andere Mitarbeiter des Unternehmens. Dies kann eine unglaublich lohnende Erfahrung sein, die sowohl das Projekt, an dem Sie arbeiten, als auch Ihre Karriere als kreativer Profi verbessern kann.

(Tech- und Design-Tipps)

Holen Sie sich Ihre persönliche Cloud mit PClouds

Holen Sie sich Ihre persönliche Cloud mit PClouds

Cloud-Speicher ist unbestreitbar ein sehr wichtiger Teil unseres täglichen Lebens geworden . Jetzt, wo wir über mehrere Geräte verbunden sind, wird der Zugriff auf unsere Dateien überall und überall schnell zu einer Notwendigkeit statt zu einem Luxus.Die Cloud birgt jedoch ihre eigenen Risiken: Sie sind auf einen Server eines Drittanbieters angewiesen, und gerade jetzt besteht immer das Risiko, dass die Vertraulichkeit und Sicherheit Ihrer Daten gefährdet ist . Wenn

(Tech- und Design-Tipps)