Responsive Webseiten-Vorlage

Menü≡

Startseite > Bildergalerien

Bildergalerien erstellen, Bildlinks setzen

Hier zeige ich Ihnen zwei mobilgerätetaugliche Bildergalerien: Auf Smartphones werden die Bilder (auch ohne Medienabfrage) untereinander dargestellt. Auf breiteren Bildschirmen werden die Bilder nebeneinander angeordnet, brechen aber bei ausgeschöpftem Platz in die nächste Zeile um: es sind also tabellenartige Bildergalerien in variablem Elementfluß (aber ohne HTML-Tabelle). Jedes Bild ist mit einem Link unterlegt, der zu einer Seite mit dem gleichen Bild in größerer Auflösung führt (hier nur Demo-Links). Dies ist eine nutzerfreundliche Darstellungsform zur Anzeige von Miniaturbildern mit jeweiligen Links zur Bildversion in höherer Auflösung.

Und zugleich ist diese HTML-Technik wesentlich suchmaschinenfreundlicher als irgendwelche Javascript-Konstrukte (Lightbox und dergleichen) zur Bildanzeige. Der Indexierung Ihrer Bilder durch Google™ und andere Suchmaschinen steht also nichts im Wege. Voraussetzung ist aber, daß Sie sprechende Bilddateinamen verwenden, das alt-Attribut der img-Elemente versorgen und auf der Bildergalerie-Seite bilder-beschreibenden Text bereitstellen.

Außerdem erkläre ich hier, wie Sie ausgehende Bildlinks setzen, und was dabei zu beachten ist.

Bildergalerie ohne beschreibende Untertexte (auch für Mobilgeräte)

Für diese Bildergalerie (fertig verwendbare CSS-Klasse bigal) sind keine bild-beschreibenden Untertexte vorgesehen. Dadurch ist die Bildergalerie aber recht platzsparend. Bitte sehen Sie es mir nach, daß hier alle Bild-Links zur Seite mit ein und demselben Großformat-Bild zeigen; ich will hier ja nur die Funktionsweise erklären.

Akropolis von Rhodos: der Apollo-Tempel Akropolis von Rhodos: der Apollo-Tempel Akropolis von Rhodos: der Apollo-Tempel Akropolis von Rhodos: der Apollo-Tempel Akropolis von Rhodos: der Apollo-Tempel Akropolis von Rhodos: das Stadion Akropolis von Rhodos: das Theater Akropolis von Rhodos: das Theater

Bei mehreren Bildergalerien auf verschiedenen Seiten bietet man den Besuchern am Besten die Möglichkeit, bequem vor- und zurückzublättern (fertig verwendbare CSS-Klasse blaettern, hier nur Demo-Links), und zeigt auch einen kurzen Hinweis an:

Wählen Sie eines der Miniaturbilder zur Ansicht im Großformat aus ...
... oder wechseln Sie zur nächsten oder vorigen Bildergalerie.

« vorige Galerie
nächste Galerie »
 

HTML-Quelltext (für Bildergalerie ohne Untertexte):

<div class="bigal">
  <a href="./bild-grossformat.php#a1" title="...">
    <img src="./bilder/101-rhodos-akropolis-q-k.jpg" alt="...">
  </a>
  <a href="./bild-grossformat.php#a1" title="...">
    <img src="./bilder/102-rhodos-akropolis-q-k.jpg" alt="...">
  </a>
  ... usw. ...
</div>

Wer in der Bildergalerie keine Links braucht, sondern nur die Miniatur-Bilder anzeigen will, entfernt im HTML-Quelltext einfach das a-Element rings um das img-Element.

Bildergalerie mit beschreibenden Untertexten (auch für Mobilgeräte)

Die Merkmale der vorigen Bildergalerie (Anordnung und Umbruch, Eignung für breite Bildschirme und Mobilgeräte, Links) gelten auch für diese Bildergalerie (fertig verwendbare CSS-Klasse bigaltxt). Der Unterschied besteht darin, daß hier zusätzlich für jedes Bild beschreibende Untertexte möglich sind. Diese Texte können verschieden lang sein: Egal, wie lang der Untertext eines Bildes ist, mehrere nebeneinander liegende Bilder werden immer auf gleicher Höhe angezeigt.

Wählen Sie eines der Miniaturbilder zur Ansicht im Großformat aus ...
... oder wechseln Sie zur nächsten oder vorigen Bildergalerie.

« vorige Galerie
nächste Galerie »
 

Für diese Bildergalerie-Lösung (ausführlich beschrieben hier in meinem Blog) verwende ich eine normale HTML-Liste ul. Die Listenelemente li werden mit der CSS-Eigenschaft display: inline-block; (Version CSS 2.1) angeordnet. Es gibt also auch auf älteren Browsern keine Darstellungsprobleme.

HTML-Quelltext (für Bildergalerie mit Untertexten):

<ul class="bigaltxt">
  <li>
    <a href="./bild-grossformat.php#a2" title="...">
      <img src="./bilder/201-mostar-kriva-cuprija-q-k.jpg" alt="...">
    </a>
    <p>Bild mit Untertext</p>
  </li>
  <li>
    <a href="./bild-grossformat.php#a2" title="...">
      <img src="./bilder/202-mostar-stari-most-q-k.jpg" alt="...">
    </a>
    <p>Bild mit etwas längerem Untertext</p>
  </li>
  ... usw. ...
</ul>

Ausgehende Links setzen: Bildlinks

Bildlinks unterscheiden sich von Textlinks dadurch, daß anstelle des Linktextes ein linksensitives Bild angezeigt wird: Wenn der Besucher auf dieses Bild klickt, wird die verlinkte Zielseite geöffnet. Die Grundform für einen ausgehenden Bildlink ist <a href="https://example.com/"><img src="bilddatei.jpg"></a>. Einziges Pflichtattribut ist auch hier das Attribut href für die Adresse der Ziel-Webseite, denn ohne diese Angabe würde der Link nicht funktionieren. Zwischen Anfangs- und Ende-tag des Elements a wird im src-Attribut des img-Elements die Bildquelle eingetragen.

Wie alle HTML-Elemente können auch die Elemente a und img um zusätzliche Attribute erweitert werden. Im alt-Attribut des img-Elements können Sie eine alternative Bildbeschreibung in Worten hinterlegen. Ich selbst verwende ausgehende Links oft mit folgenden Attributen (deren Reihenfolge ist egal, und Sie können auch alles in eine Zeile schreiben):

<a title="Link zu example.com"
  target="_blank" href="https://example.com/"
  rel="noopener noreferrer">
  <img src="bilddatei.jpg" alt="Bildbeschreibung">
</a>

Erläuterung der Attribute

Es gelten die Erläuterungen (Punkte b. bis f.) wie für Textlinks auf der Seite Textgestaltung, Textlinks beschrieben. Die dort im Punkt a. erwähnte Angabe class="extern" empfiehlt sich aus Darstellungsgründen für Bildlinks nicht.

« vorige Seite
nächste Seite »
 
⇧