Bildergalerie mit CSS (II)

Antworten
Admin
Administrator
Beiträge: 84
Registriert: Di 19. Aug 2014, 10:47

Bildergalerie mit CSS (II)

Beitrag von Admin » Di 19. Aug 2014, 16:06

Diese Tutorial basiert auf der Grundlage des Tutorial – Bilder-Galerie nur mit CSS.
Die Unterschiede sind die Anordnung der Thumbnails und der Wechsel der Vollbilder durch Mausklick auf das entsprechende Thumbnail.
Die Galerie - Vorschau
Die Bilder haben das Format 640x437 Pixel. Die Thumbnails entsprechend 80x50. Natürlich kann alles jeder Zeit entsprechend anderer Vorgaben angepaßt werden. Das ganze Tut ist sehr einfach gehalten um es leicht in vorhandene Seiten einzubauen. Viel Spaß.
Öffne im KompoZer eine neue Datei und speichere sie in einem Ordner deiner Wahl als „index.html“ ab. Beachte bitte beim Erstellen ein Häckchen bei XHTML zu setzen.

Grundeinstellungen
Im CSS-Editor erstellt du folgende Regeln:

Code: Alles auswählen

body {
  text-align: center;

  font-family: Arial,Helvetica,sans-serif;
  font-size: 76%;
}
#inhalt {
  position: relative;
  height: 700px;
  width: 850px;
}
Erstelle im KompoZer einen div und weise ihm die ID „inhalt“ zu. Mehr div's benötigst du nicht.

Schritt 1 – Einfügen der Bilder
Das Einfügen der Bilder über Grafik sollte kein Problem sein. Die Bilder werden untereinander in der Reihenfolge bild1.jpg bis bild14.jpg angeordnet.
Danach alle Bilder markieren und als unsortierte Liste formatieren. Jetzt können die Bildtitel vergeben werden. Dazu klickst du das dazugehörige Foto an und machst mit den Cursortasten einen Schritt nach Rechts (zu sehen ist nichts). Dann einmal Shift+Enter und der Cursor blinkt unter dem Bild. Nun trägst du die Bildtitel „Bild1“ bis „Bild14“ ein. Anstelle der Bildtitel kannst du deine ausführliche Bildbeschreibung setzen. Zu welchem Zeitpunkt du das machst bleibt dir überlassen.

Deine Galerie sollte etwa so aussehen.
Schritt1

Schritt 2 – Hinzufügen der Links
Markiere wieder alle Bilder und öffne durch rechtsklick das Kontextmenü. Klicke auf Link erstellen und im sich öffnenden Fenster trägst du unter Link-Adresse #nogo ein. Abspeichern.
Warum #nogo ? Diese Adresse verhindert ein springen an den Seitenanfang bei versehendlichem Anklicken der Thumbnails. Sie sollte natürlich im Dokument NICHT als Anker vorhanden sein.

Deine Galerie sollte etwa so aussehen.
Schritt2

Schritt 3 -- Erstellen und Einrichten von #inhalt ul und #inhalt li
Erstelle im CSS-Editor folgende Regeln:

Code: Alles auswählen

#inhalt ul {
 margin-left: 5px;
 padding-left: 0;
 list-style-type: none;
 float: left;
 margin-top: 450px;
}
#inhalt li {
  float: left;
}
Deine Galerie sollte etwa so aussehen.
Schritt3

Schritt 4 – span setzen
span und /span wird per Hand in den Quelltext eingefügt. Dazu gehst du wie folgt vor:
Suche im Quelltext den Abschnitt mit den eigefügten Fotos (untenstehendes Beispiel für Foto 1).

Code: Alles auswählen

<li><a href="#nogo"><img style="width: 640px; height: 437px;" alt="b1"
 src="images_a/bild1.jpg" /><br />Bild1</a></li>
Und ändere ihn wie folgt:

Code: Alles auswählen

<li><a href="#nogo"><span><img style="width: 640px; height: 437px;" alt="b1"
 src="images_a/bild1.jpg" /><br />Bild1</span></a></li>
Führe diese Änderungen für alle Fotos durch.

Schritt 5 – Klasse Galerie erstellen
Erstelle im CSS-Editor folgende Regel:

Code: Alles auswählen

#inhalt a.galerie span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  top: 0px;
  left: 0px;
  background-color: #ffffff;
}
Diese Klasse dient zum (späteren) Verbergen der großen Bilder. Noch NICHT zuweisen !!!

Schritt 6 – Vorbereiten der Thumbnail-“Galerie“
Erstelle im CSS-Editor folgende Regel:

Code: Alles auswählen

#inhalt a.galerie {
  border: 1px solid black;
  margin: 1px 2px;
  display: block;
  color: black;
  text-decoration: none;
}
Schritt 7 – Erstellen der Thumbnail-“Galerie“
Erstelle im CSS-Editor folgende Regeln:

Code: Alles auswählen

#inhalt a.fotoa {
  background-repeat: no-repeat;
  width: 80px;
  height: 55px;
  background-image: url(images_a/bild1_t.jpg);
}
#inhalt a.fotob {
  background-repeat: no-repeat;
  width: 80px;
  height: 55px;
  background-image: url(images_a/bild2_t.jpg);
}
#inhalt a.fotoc {
  background-repeat: no-repeat;
  width: 80px;
  height: 55px;
  background-image: url(images_a/bild3_t.jpg);
}
#inhalt a.fotod {
  background-repeat: no-repeat;
  width: 80px;
  height: 55px;
  background-image: url(images_a/bild4_t.jpg);
}
#inhalt a.fotoe {
  background-repeat: no-repeat;
  width: 80px;
  height: 55px;
  background-image: url(images_a/bild5_t.jpg);
}
#inhalt a.fotof {
  background-repeat: no-repeat;
  width: 80px;
  height: 55px;
  background-image: url(images_a/bild6_t.jpg);
}
#inhalt a.fotog {
  background-repeat: no-repeat;
  width: 80px;
  height: 55px;
  background-image: url(images_a/bild7_t.jpg);
}
#inhalt a.fotoh {
  background-repeat: no-repeat;
  width: 80px;
  height: 55px;
  background-image: url(images_a/bild8_t.jpg);
}
#inhalt a.fotoi {
  background-repeat: no-repeat;
  width: 80px;
  height: 55px;
  background-image: url(images_a/bild9_t.jpg);
}
#inhalt a.fotoj {
  background-repeat: no-repeat;
  width: 80px;
  height: 55px;
  background-image: url(images_a/bild10_t.jpg);
}
#inhalt a.fotok {
  background-repeat: no-repeat;
  width: 80px;
  height: 55px;
  background-image: url(images_a/bild11_t.jpg);
}
#inhalt a.fotol {
  background-repeat: no-repeat;
  width: 80px;
  height: 55px;
  background-image: url(images_a/bild12_t.jpg);
}
#inhalt a.fotom {
  background-repeat: no-repeat;
  width: 80px;
  height: 55px;
  background-image: url(images_a/bild13_t.jpg);
}
#inhalt a.foton {
  background-repeat: no-repeat;
  width: 80px;
  height: 55px;
  background-image: url(images_a/bild14_t.jpg);
}
Schritt 8 – Zuweisung der Klassen
Achtung Unbedingt Reihenfolge einhalten !!!!
Markiere das erste Foto. Weise dem Tag <a> zuerst die Klasse „fotoa“ zu und dann erst die Klasse „galerie“. Das große Foto wird „unsichtbar“ und es erscheint das dazugehörende Thumbnail. Wiederhole diese Vorgehensweise für alle anderen Fotos. Nur mit dem Unterschied, dass du für Foto2 die Klasse „fotob“ nimmst u.s.w.

Deine Galerie sollte etwa so aussehen.
Schritt8

Schritt 9 – Regeln für die Steuerung mittels anklicken
Erstelle im CSS-Editor folgende Regeln:

Code: Alles auswählen

#inhalt a.galerie:active img {
 border: 1px solid white;
 float: left;
 margin-right: 5px;
}
#inhalt a.galerie:active span {
 position: absolute;
 background-color: #ffffff;
 color: black;
 height: 437px;
 width: 840px;
}
#inhalt a.galerie:focus img {
  border: 1px solid white;
  float: left;
  margin-right: 5px;
}
#inhalt a.galerie:focus span {
  position: absolute;
  background-color: #ffffff;
  color: black;
  height: 437px;
  width: 840px;
}
Deine Galerie sollte etwa so aussehen.
Schritt9

Schritt 10 – Standard-Bild hinzufügen
Zum Schluß fügst du noch das Hintergrundbild ein.
Editiere im CSS-Editor folgende Regel:

Code: Alles auswählen

#inhalt {
  position: relative;
  height: 700px;
  width: 850px; 
  background-repeat: no-repeat;
  background-image: url(images_a/bild1.jpg);
}
Die Galerie
Dieses Tutorial wurde am 14.01.2008 von gimp-michel für KompoZer-Web erstellt.

Antworten