Detaillierte Erläuterung der Verwendung des jQuery Magnify-Plug-Ins

Dieses Mal erkläre ich Ihnen ausführlich die Verwendung des jQuery Magnify-Plugins. Was sind die Vorsichtsmaßnahmen bei der Verwendung des jQuery Magnify-Plugins? .

Aufgrund einiger besonderer Geschäftsanforderungen habe ich nach mehr als einem Monat des Ruhens und Nachdenkens dieses jQuery-Bildbetrachter-Plug-in Magnify entwickelt, das Windows implementiert Alle Funktionen des Fotobetrachters, wie z. B. Ziehen, Ändern der Größe und Maximieren des modalen Fensters, Zoomen, Drehen, Schwenken und Tastatursteuerung des Bildes usw. Plug-in-Stile sind alle einfach css, es ist sehr einfach anzupassen und Sie können es ganz einfach an Ihren Lieblingsstil anpassen. React und Vue werden später veröffentlicht. Relevante Versionen von Plugins. In diesem Artikel werden hauptsächlich die Eigenschaften und die Verwendung von Plug-Ins vorgestellt. Einzelheiten zur Plug-In-Entwicklung werden in nachfolgenden spezifischen Artikeln erläutert.

Aufgrund meines vollen Arbeitsplans komme ich in letzter Zeit fast jeden Tag um zehn Uhr abends nach Hause und beginne dann mit dem Schreiben von Plug-Ins. Als ich ins Bett gehe, ist es bereits nach Mitternacht, und jetzt bin ich körperlich und geistig erschöpft . Da keine relevanten Plug-Ins gefunden wurden, habe ich mir den Kopf zerbrochen und über viele Themen unabhängig nachgedacht, wie z. B. das Skalieren von Bildern mit der Maus als Mittelpunkt, Einschränkungen bei der Bildbewegung beim Ändern der Größe des Popup-Fensters, Skalieren und Schwenken danach Bilddrehung usw. Bei der Entwicklung von Plug-Ins sind die Details am problematischsten, selbst die meiste Zeit wird für die Reparatur einer einzelnen Funktion aufgewendet. Insekt.

Darüber hinaus besteht die größte Schwierigkeit bei der Entwicklung von Plug-Ins nicht in der Funktionsimplementierung, sondern darin, wie das Plug-In gestaltet und wie die Verwendung des Plug-Ins einfacher und bequemer gestaltet werden kann. Das Entwerfen von Plug-Ins steht nicht im Mittelpunkt dieses Artikels. Ich werde später einen speziellen Artikel schreiben, in dem Ideen für das Plug-In-Design vorgestellt werden.

Fast der gesamte Code des Plug-Ins passt die Breite, Höhe, den linken und oberen Rand des Popup-Fensters oder Bildes an, sodass das Kompatibilitätsproblem nicht groß ist. Es handelt sich hauptsächlich um ein 2D-Rotationsproblem Verwenden Sie dazu Filter. Um die Anpassung von Stilen zu erleichtern, gibt es viele Berechnungen der relativen Position.

Magnify ist dateigetrennt geschrieben und mithilfe von NPM-Plug-Ins gepackt. Es verwendet keine neue Syntax oder gängige Paketierungstools. Die Verwendung des npm-Tools ist zu einem Trend in der Projektentwicklung und Verpackung für die Veröffentlichung geworden.

Demo

Wenn Sie nicht auf die URL klicken möchten, um das Beispiel anzuzeigen, können Sie den Plug-in-Effekt mit dem folgenden CodePen anzeigen. Es gibt keinen Unterschied zwischen den beiden Methoden, außer der Größe des Fensters:

Wenn Sie CodePen aufgrund der Netzwerkgeschwindigkeit oder aus anderen Gründen nicht öffnen können, können Sie sich die Bilddemonstration unten ansehen.

Hauptfunktionen

Die Funktionen von Magnify können mit dem Windows Photo Viewer verglichen werden, der grundsätzlich alle erreichbaren Funktionen abdeckt.

1. Modales Fensterziehen

Wenn die Bildgröße nicht größer als der Anzeigebereich ist, kann das Popup-Fenster auch durch den Bildanzeigebereich gezogen werden. Dies ist dasselbe wie der QQ-Bildbetrachter.

2. Modale Fenstergröße ändern

Bei der aktuellen Größenänderung gibt es einen kleinen Fehler, der sich jedoch nicht auf die Gesamtnutzung auswirkt.

3. Maximieren Sie das modale Fenster

Zusätzlich zur Maximierung des Popup-Fensters wurde in den frühen Entwicklungsstadien auch eine Minimierungsfunktion entworfen, die sich jedoch etwas geschmacklos anfühlte und daher noch nicht hinzugefügt wurde.

4. Bildzoom

Bedienbar per Mausrad, Tasten, Tastatur etc.

5. Bilddrehung

Die aktuelle Bildrotationsfunktion hat keinen Code hinzugefügt, um Versionen unter IE9 zu unterstützen.

6. Tastatursteuerung

Die Schaltflächen für Vergrößern und Windows Photo Viewer sind identisch

← Zurück → Weiter + Vergrößern - Verkleinern ctrl + alt + 0 Tatsächliche Größe ctrl + , Nach links drehen ctrl + . Nach rechts drehen 7. Vollbildanzeige

Die Vollbildanzeige von Magnify implementiert nur grundlegende Anzeigefunktionen und implementiert noch keine automatische Foliendrehung. Verwenden Sie die Tastatur, um Bilder im Vollbildmodus zu steuern.

So verwenden Sie

Die Verwendung von Magnify unterscheidet sich nicht von der der meisten anderen Lightbox-Plug-Ins. Wenn Sie es gewohnt sind, andere Plug-Ins zu verwenden, steht der Verwendung von Magnify nichts im Wege.

1. Dateien, auf die durch

<link href="/path/to/magnify.css" rel="external nofollow" rel="stylesheet">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.magnify.js"></script>

verwiesen werden muss Magnify verwendet standardmäßig das Font-Awesome-Symbol, daher müssen Sie auf das Font-Awesome-CSS verweisen dokumentieren. Wenn Sie andere Symbole verwenden möchten, können Sie den Symbolparameter der Optionen ändern. In einer späteren Version füge ich möglicherweise eine benutzerdefinierte Schriftart-Symboldatei hinzu oder verwende SVG Symbol.

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet">

2.HTML-Struktur

Magnify verwendet standardmäßig die folgende Struktur. Diese Struktur kann aus Kompatibilitätsgründen verarbeitet werden und ist auch die Struktur, die von den meisten Leuchtkästen verwendet wird.

<a data-magnify="gallery" href="big-1.jpg" rel="external nofollow" >
 <img src="small-1.jpg">
</a>
<a data-magnify="gallery" href="big-2.jpg" rel="external nofollow" >
 <img src="small-2.jpg">
</a>
<a data-magnify="gallery" href="big-3.jpg" rel="external nofollow" >
 <img src="small-3.jpg">
</a>

Sie können auch die folgende prägnantere Struktur verwenden

<img data-magnify="gallery" src="big-1.jpg" src="small-1.jpg">
<img data-magnify="gallery" src="big-2.jpg" src="small-2.jpg">
<img data-magnify="gallery" src="big-3.jpg" src="small-3.jpg">

Die HTML-Struktur von Magnify enthält die folgenden Optionen

Fügen Sie das Attribut src hinzu, um eine Verknüpfung zum größeren Bild herzustellen. Wenn es innerhalb eines <a>-Tags verwendet wird, überschreibt es den Wert des href-Attributs. Fügen Sie das Attribut data-caption hinzu, um den Titel anzuzeigen. Wenn Sie dieses Attribut nicht verwenden, zeigt das Plugin den Bildnamen in der URL an. Fügen Sie das Attribut data-group hinzu, um Bilder zu gruppieren. 3.Plug-in initialisieren

Wenn Sie das Attribut data-magnify in HTML hinzufügen, wird das Plugin automatisch initialisiert.

Die Methode zur manuellen Initialisierung des Plug-Ins ist dieselbe wie für alle jQuery-Plug-Ins:

$('[data-magnify=gallery]').magnify(options);

Parameterkonfiguration

options = {
  draggable: true,
  resizable: true,
  movable: true,
  keyboard: true,
  title: true,
  modalWidth: 320,
  modalHeight: 320,
  fixedContent: true,
  fixedModalSize: false,
  initMaximized: false,
  gapThreshold: 0.02,
  ratioThreshold: 0.1,
  minRatio: 0.1,
  maxRatio: 16,
  headToolbar: [
   'maximize',
   'close'
  ],
  footToolbar: [
   'zoomIn',
   'zoomOut',
   'prev',
   'fullscreen',
   'next',
   'actualSize',
   'rotateRight'
  ],
  icons: {
   maximize: 'fa fa-window-maximize',
   close: 'fa fa-close',
   zoomIn: 'fa fa-search-plus',
   zoomOut: 'fa fa-search-minus',
   prev: 'fa fa-arrow-left',
   next: 'fa fa-arrow-right',
   fullscreen: 'fa fa-photo',
   actualSize: 'fa fa-arrows-alt',
   rotateLeft: 'fa fa-rotate-left',
   rotateRight: 'fa fa-rotate-right'
  }
}

Bezüglich der spezifischen Bedeutung der Plug-In-Parameter werde ich sie hier nicht kopieren und einfügen. Detaillierte Anweisungen finden Sie in der offiziellen Dokumentation. Wenn Sie Fragen haben, können Sie hier eine Nachricht hinterlassen.

Benutzerdefinierter Stil

Da der Plug-in-Stil relativ einfach ist, lässt er sich auch sehr leicht ändern. Neben dem Windows-Fotobetrachter ist auch der Bildbetrachter von QQ sehr fortschrittlich. Mit einfachen Änderungen können wir den Effekt des QQ-Bildbetrachters erzielen, einige Funktionen wie Miniaturansichten wurden jedoch noch nicht implementiert. Das Folgende ist eine Live-Demonstration:

Einem solchen Bildbetrachter gegenüberzutreten ist erfrischend~

Zusammenfassung

Derzeit ist das Plug-in insgesamt perfektioniert, es müssen jedoch noch viele Details geändert und hinzugefügt werden, insbesondere die Unterstützung für mobile Endgeräte Bleiben Sie dran für Updates zum Projekt. Ich werde nicht näher auf die Einführung des Plug-ins eingehen. Wenn Sie einen Fehler finden, Wenn Sie bessere Vorschläge haben, können Sie Fragen auf GitHub stellen oder hier eine Nachricht hinterlassen. Ihre Unterstützung ist meine größte Motivation, weiterzumachen! Wenn dieses Plug-in für Sie hilfreich ist oder Sie dieses Plug-in in Ihrem Projekt verwenden, hinterlassen Sie uns bitte eine Nachricht!

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Verwenden Sie JS, um die Bestätigungscodefunktion nach 60 Sekunden erneut zu senden

JS auf der mobilen Seite implementiert Unbegrenzte Lade-Paging-Funktion

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des jQuery Magnify-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!