Fügen Sie mit jfMagnify einen Vergrößerungseffekt auf Ihrer Webseite hinzu

Es gibt genügend von kostenlose Zoom-Plugins das funktioniert unglaublich gut. Die meisten davon sind jedoch für Bilder gebaut und sie geben Anweisungen für Nur-Bild-Inhalte.

Was wäre, wenn du könntest Einen Vergrößerungseffekt hinzufügen zu jedem Teil Ihrer Webseite? Dank an jfMagnify, Sie können.

Es ist ein kostenloses jQuery-Plugin das unterstützt nicht nur das Zoomen von Bildern, sondern auch Zoomen der gesamten Seite. Es ist eines der wenigen Plugins, das Sie auch erlaubt Wählen Sie die Vergrößerungsstufe und unterstützt Touch-Events für mobile Benutzer.

Beachten Sie, dass dieses Plugin sich etwas schwer anfühlen kann beruht auf zwei Abhängigkeiten: regelmäßige jQuery und jQuery UI. Beide sind notwendig, damit jfMagnify richtig funktioniert. Ganz zu schweigen von der aktuelles jfMagnify-Skript Sie müssen auf Ihrer Seite hinzufügen.

Das Setup ist etwas kompliziert, da Sie nur vergrößerte Elemente anvisieren können innerhalb eines Behälters. Wenn Sie die gesamte Seite als Ziel festlegen möchten, müssen Sie dies tun Fügen Sie Ihrer gesamten Website eine Klasse hinzu.

Hier ist wie das einzelne Zeile von jQuery würde aussehen wie:

 $ (". vergrößern"). jfMagnify (); 

Dies zielt darauf ab alle Elemente in der .vergrößern Container Das ist normalerweise ein div Element.

Diese inneren Elemente können Bilder sein, könnten aber auch Kleingedrucktes enthalten, Zum Beispiel auf Website-Bedingungen oder Datenschutzrichtlinien. Die gesamte Dokumentation ist verfügbar im GitHub-Repo, Wenn Sie es einmal eingerichtet haben, wird der gesamte Prozess viel einfacher.

Auch dieses Plugin ist sehr wankelmütig und kommt mit viele Containerregeln. Zum Beispiel das Containerelement kann keine statische CSS-Position haben, Daher muss es entweder relativ, absolut oder fest sein.

Sie können Finde alle Standardstilregeln Im GitHub-Repo kann es jedoch schwierig sein, das Layout anzupassen, wenn das Layout bereits erstellt wurde und ausgeführt wird. Die Vorteile von jfMagnify sind für mich die Mühe wert. Wirklich, es hängt von Ihren Bedürfnissen ab und ob Ihnen das Interface gefällt.

Werfen Sie einen Blick auf die Dokumente von GitHub, um zu sehen, was Sie denken. Und das kannst du auch Vorschau der Benutzeroberfläche auf CodePen, wenn Sie die Bibliothek vor der Installation in Aktion sehen möchten.