goit js hw 07

Lesen Sie in anderen Sprachen: Ukrainisch, Englisch.

Akzeptanzkriterien

• Das goit-js-hw-07 -Repository wurde erstellt.
• Hausaufgaben enthält zwei Links: auf Ausgabedateien und eine Arbeitsseite auf GitHub Pages .
• Der Konsole fehlen Fehler und Warnungen, wenn eine lebendige Seite der Aufgabe eröffnet wird.
• Die Namen von Variablen und Funktionen sind klar und beschreibend.
• Der Code wird unter Verwendung Prettier formuliert.

Startdateien

• Im SRC -Ordner finden Sie Startdateien mit Basis -Markup und Ready -Stilen. Kopieren Sie sie in das Projekt. Laden Sie dieses Repository dazu als Archiv herunter oder verwenden Sie den Downgit -Dienst, um einen separaten Ordner aus dem Repository herunterzuladen.
• gallery-items.js enthält ein Array galleryItems , die Objekte mit Bildinformationen enthält: klein (Vorschau), Original (groß) und Beschreibung. Wir haben es bereits mit jedem der JS -Projektdateien verbunden.

Aufgabe 1 - Bildgalerie

Erstellen Sie eine Galerie mit der Möglichkeit eines Klicks auf seine Elemente und sehen Sie sich ein volles Bild in einem Modalfenster an. Siehe das Demo -Video der Galerie.

Galerie-dmo.mp4

Vervollständigen Sie diese Aufgabe in 01-gallery.html und 01-gallery.js . Teilen Sie es in ein paar Sub -Calls auf:

1. Das Erstellen und Rendern von Markup basierend auf galleryItems -Datenarray und dem Galerieelement wird bereitgestellt.
2. Implementierung der Delegation auf div.gallery und Empfang einer großen Bild url .
3. Verbinden Sie das Skript und die Stile des Basiclightbox -Modalfensters. Verwenden Sie das JSDelivr CDN und fügen Sie dem Projekt eine Bibliotheksdatei ( .min ) hinzu.
4. Öffnen Sie ein modales Fenster in einem Klick auf ein Galerieelement. Lassen Sie sich dazu über die Dokumentation und Beispiele informieren.
5. Ersetzen des Wertes des Attributs des src -Elements <img> im Modalfenster vor dem Öffnen. Verwenden Sie eine bereitgestellte modale Fenstermarkierung mit Beispielen für die Basiclightbox -Bibliothek.

Markierung des Galerieelements

Die ursprüngliche Bildreferenz muss im source auf dem Element <img> gespeichert und im href -Link angegeben werden. Fügen Sie keine anderen HTML -Tags oder CSS -Klassen hinzu, außer denen, die in dieser Vorlage enthalten sind.

 < div class =" gallery__item " >
  < a class =" gallery__link " href =" large-image.jpg " >
    < img
      class =" gallery__image "
      src =" small-image.jpg "
      data-source =" large-image.jpg "
      alt =" Image description "
    />
  </ a >
</ div >

Bitte beachten Sie, dass das Bild in einen Link eingepackt ist, sodass der Benutzer standardmäßig auf eine andere Seite umgeleitet wird. Verbot dieses Standardverhaltens.

Schließen von der Tastatur

Euen Die folgende Funktionalität ist für die Aufgabe nicht erforderlich, ist aber eine gute zusätzliche Praxis.

Fügen Sie den Verschluss des Modalfensters nach dem Drücken der Escape -Taste hinzu. Lassen Sie die Tastatur nur so lange hören, wie das Modalfenster geöffnet ist. BasicLightBox -Bibliotheken enthalten eine Methode zum Softwareverschluss des Modal -Fensters.

Aufgabe 2 - SimpleLightbox -Bibliothek

Erstellen Sie die gleiche Galerie wie in der ersten Aufgabe, aber mit der SimplyLightbox -Bibliothek, die die Bilder auf die Bilder aufnimmt, das Modalfenster entdeckt und schließt sowie Bilder mit der Tastatur schüttelt.

SimpleLightbox-Demo.mp4

Es ist notwendig, die Galeriekartenmarkierung geringfügig zu ändern und diese Vorlage zu verwenden.

 < a class =" gallery__item " href =" large-image.jpg " >
  < img class =" gallery__image " src =" small-image.jpg " alt =" Image description " />
</ a >

Füllen Sie diese Aufgabe in 02-lightbox.html und 02-lightbox.js aus. Teilen Sie es in ein paar Sub -Calls auf:

1. Das Erstellen und Rendern von Markup basierend auf galleryItems -Datenarray und dem Galerieelement wird bereitgestellt. Verwenden Sie einen ready -hergestellten Code aus der ersten Aufgabe.
2. Verbinden Sie das Skript- und Bibliotheksstilen mit CDN CDNJS. Sie müssen Links zu zwei Dateien hinzufügen: simple-lightbox.min.js und simple-lightbox.min.css .
3. Initialisierung der Bibliothek nach Erstellen und Hinzufügen von Elementen der Galerie in div.gallery . Lassen Sie sich dazu mit der Dokumentation von SimplELInlightbox kennenlernen - zunächst die Nutzungs- und Markup -Abschnitte.
4. Schauen Sie sich den Abschnitt "Dokumentation" "Optionen" an und fügen Sie den Bildern aus dem Attribut alt eine Anzeige von Signaturen hinzu. Lassen Sie die Signatur von unten stammen und erscheint nach dem Öffnen des Bildes in 250 Millisekunden.