Erstellung einer modalen Bildergalerie mit Bootstrap Komponenten

Haben Sie schon einmal auf ein Bild auf einer Webseite geklickt, das eine größere Version des Bildes mit Navigationsmöglichkeiten zum Anzeigen anderer Fotos öffnet?

Manche Leute nennen es Pop-up. Andere nennen es Lightbox. Bootstrap nennt es Modal. Ich erwähne Bootstrap, weil ich es verwenden möchte, um die gleiche Art von Ding zu machen. Nennen wir es also von nun an Modal.

Warum Bootstrap? könnten Sie fragen. Nun, aus mehreren Gründen

• Ich verwende Bootstrap bereits auf der Website, auf der ich diesen Effekt erzielen möchte, sodass keine zusätzlichen Ressourcen geladen werden müssen.
• Ich möchte etwas, bei dem ich die Ästhetik vollständig und einfach kontrollieren kann. Bootstrap ist im Vergleich zu den meisten Modal-Plugins, auf die ich gestoßen bin, eine saubere Weste.
• Die von mir benötigte Funktionalität ist ziemlich einfach. Es gibt nicht viel zu gewinnen, wenn man alles von Grund auf neu codiert. Ich betrachte die Zeit, die ich durch die Verwendung des Bootstrap-Frameworks spare, als vorteilhafter als mögliche Nachteile.

Hier landen wir

Gehen wir das Schritt für Schritt durch.

Schritt 1: Erstellen Sie das Raster der Bildergalerie

Beginnen wir mit dem Markup für ein Rasterlayout von Bildern. Dafür können wir das Grid-System von Bootstrap verwenden.

<div class="row" id="gallery">
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-1">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-2">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-3">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-4">
  </div>
</div>

Jetzt benötigen wir Datenattribute, um diese Bilder interaktiv zu machen. Bootstrap betrachtet Datenattribute, um herauszufinden, welche Elemente interaktiv sein sollen und was sie tun sollen. In diesem Fall erstellen wir Interaktionen, die die Modal-Komponente öffnen und das Durchscrollen der Bilder mit der Carousel-Komponente ermöglichen.

Über diese Datenattribute

1. Wir fügen data-toggle="modal"  und data-target="#exampleModal" dem Elternelement (#gallery) hinzu. Dadurch wird das Modal geöffnet, wenn auf etwas in der Galerie geklickt wird. Wir sollten auch den Wert von data-target (#exampleModal) als ID des Modals selbst hinzufügen, aber das machen wir, sobald wir zum Modal-Markup kommen.
2. Fügen wir data-target="#carouselExample"  und ein data-slide-to-Attribut zu jedem Bild hinzu. Wir könnten diese auch zu den Bild-Wrappern hinzufügen, aber wir entscheiden uns in diesem Beitrag für die Bilder. Später werden wir den Wert von data-target (#carouselExample) als ID für den Carousel verwenden, also merken Sie sich das für später. Die Werte für data-slide-to basieren auf der Reihenfolge der Bilder.

Hier ist, was wir zusammen bekommen

<div class="row" id="gallery" data-toggle="modal" data-target="#exampleModal">
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-1.jpg" data-target="#carouselExample" data-slide-to="0">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-2.jpg" data-target="#carouselExample" data-slide-to="1">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-3.jpg" data-target="#carouselExample" data-slide-to="2">
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-4.jpg" data-target="#carouselExample" data-slide-to="3">
  </div>
</div>

Möchten Sie mehr über Datenattribute erfahren? Schauen Sie sich den CSS-Tricks Leitfaden dazu an.

Schritt 2: Lassen Sie das Modal funktionieren

Dies ist ein Carousel innerhalb eines Modals, beides sind Standard-Bootstrap-Komponenten. Wir verschachteln hier im Grunde nur eine in die andere. Ziemlich eine Kopie-und-Einfüge-Aufgabe aus der Bootstrap-Dokumentation.

Hier sind jedoch einige wichtige Punkte, auf die Sie achten sollten

1. Die Modal-ID sollte mit dem data-target des Galerieelements übereinstimmen.
2. Die Carousel-ID sollte mit dem data-target der Bilder in der Galerie übereinstimmen.
3. Die Carousel-Slides sollten mit den Galeriebildern übereinstimmen und in der richtigen Reihenfolge sein.

Hier ist das Markup für das Modal mit unseren Attributen

<!-- Modal markup: https://getbootstrap.com/docs/4.4/components/modal/ -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        
      <!-- Carousel markup goes here -->


      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Wir können das Carousel-Markup direkt hineinlegen, Voltron-Stil!

<!-- Modal markup: https://getbootstrap.com/docs/4.4/components/modal/ -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        
      <!-- Carousel markup: https://getbootstrap.com/docs/4.4/components/carousel/ -->
      <div id="carouselExample" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src="/image-1.jpg">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="/image-2.jpg">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="/image-3.jpg">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="/image-4.jpg">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Sieht nach viel Code aus, oder? Wieder ist es im Grunde direkt aus der Bootstrap-Dokumentation, nur mit unseren Attributen und Bildern.

Schritt 3: Umgang mit Bildgrößen

Dies ist nicht unbedingt erforderlich, aber wenn die Bilder im Carousel unterschiedliche Abmessungen haben, können wir sie mit CSS zuschneiden, um die Konsistenz zu wahren. Beachten Sie, dass wir hier Sass verwenden.

// Use Bootstrap breakpoints for consistency.
$bootstrap-sm: 576px;
$bootstrap-md: 768px;
$bootstrap-lg: 992px;
$bootstrap-xl: 1200px;


// Crop thumbnail images.
#gallery {
  img {
    height: 75vw;
    object-fit: cover;
    
    @media (min-width: $bootstrap-sm) {
      height: 35vw;
    }
    
    @media (min-width: $bootstrap-lg) {
      height: 18vw;
    }
  }
}


// Crop images in the coursel
.carousel-item {
  img {
    height: 60vw;
    object-fit: cover;
    
    @media (min-width: $bootstrap-sm) {
      height: 350px;
    }
  }
}

Schritt 4: Optimieren Sie die Bilder

Sie haben vielleicht bemerkt, dass das Markup die gleichen Bilddateien in der Galerie wie im Modal verwendet. Das muss nicht sein. Tatsächlich ist es besser, kleinere, performantere Versionen der Bilder für die Galerie zu verwenden. Wir werden die Bilder im Modal sowieso in ihrer vollen Größe anzeigen, daher gibt es keinen Grund, die beste Qualität im Voraus zu haben.

Das Gute an Bootstraps Ansatz hier ist, dass wir andere Bilder in der Galerie als im Modal verwenden können. Sie sind nicht gegenseitig ausschließend, dass sie auf dieselbe Datei verweisen müssen.

Daher würde ich vorschlagen, das Galerie-Markup mit Bildern geringerer Qualität zu aktualisieren

<div class="row" id="gallery" data-toggle="modal" data-target="#exampleModal">
  <div class="col-12 col-sm-6 col-lg-3">
    <img class="w-100" src="/image-1-small.jpg" data-target="#carouselExample" data-slide-to="0">
  
  <!-- and so on... -->
</div>

Das war's!

Die Website, auf der ich dies verwende, hat Bootstrap bereits thematisiert. Das bedeutet, dass alles bereits nach Vorgabe gestaltet ist. Dennoch können Sie, auch wenn Sie Bootstrap nicht thematisiert haben, problemlos benutzerdefinierte Stile hinzufügen! Mit diesem Ansatz (Bootstrap vs. Plugins) ist die Anpassung schmerzfrei, da Sie die volle Kontrolle über das Markup haben und das Bootstrap-Styling relativ spärlich ist.

Hier ist die endgültige Demo