Bildergalerie mit CSS (I)

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

Bildergalerie mit CSS (I)

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

Tutorial – Bilder-Galerie nur mit CSS

Die Idee für dieses Tut findest du hier:
GalerieTut (engl.)
Das Ergebnis als Vorschau:
Galerie

In der beiliegenden ZIP-Datei sind alle Fotos die für dieses Tut benötigt werden.
Bildbilder.zip (365.12 KB)

Die Bilder haben das Format 372x240 bzw. 240x372 Pixel. Die Thumbnails entsprechend 93x60 bzw. 60x93 Pixel. Das Hintergrundbild hat 372x372 Pixel. Diese Größen sind bewusst so gewählt, das alles ein bisschen zu einander passt. Natürlich kann alles jeder Zeit entsprechend anderer Vorgaben angepasst 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.
Danach kopierst du alle Dateien der bilder.zip in einen Unterordner „bilder“.

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;
  width: 770px;
  height: 396px;
}
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 folgender Reihenfolge angeordnet:
brunnen1.jpg
kirche1.jpg
zin1.jpg
lok_bild.jpg
mauer.jpg
kirche3.jpg
lok_holz.jpg
zin2.jpg
kirche2.jpg
brunnen2.jpg
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 folgenden Bildtitel ein:
Neuer Brunnen (Detailansicht)
Nikolaikirche – Türme
Zinnaer Tor
ICE Bild im Bahnhofstunnel
Teil der Stadtmauer
Mönchenkirche
„Die Güterlok von Jüterbog“ (Kinderbuch)
Zinnaer Tor (Seitenansicht)
Nikolaikirche – Kirchenschiff
Neuer Brunnen (Detailansicht)

Deine Galerie sollte etwa so aussehen.
schritt1
Du fragst dich sicherlich warum die Bilder zu so einem frühen Zeitpunkt eingefügt werden. Das hat eigentlich nur den einen Grund: du zwingst den Browser zum Einlesen aller Bilder vor der Darstellung und erhälst damit eine ruckelfrei Bildanzeige, da keine Fotos vom Server nachgeladen werden müssen.

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: 5px;
  padding: 0;
  width: 198px;
  height: 386px;
  list-style-type: none;
  float: right;
}
#inhalt li {
  float: left;
}
Deine Galerie sollte etwa so aussehen.
schritt3

Schritt 4 – span setzen
Da ich es im Moment nicht anders weiss, wird span und /span per Hand in den Quelltext eingefügt. Dazu gehst du wie folgt vor:
Suche im Quelltext den Abschnitt mit den eigefügten Fotos (siehe untenstehendes Beispiel für Foto 1).
Bild
Und ändere ihn wie folgt:
Bild
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: 5px;
  left: 5px;
  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-image: url(bilder/brunnen1_t.jpg);
  background-repeat: no-repeat;
  width: 60px;
  height: 93px;
}
#inhalt a.fotob {
  background-image: url(bilder/kirche1_t.jpg);
  background-repeat: no-repeat;
  width: 60px;
  height: 93px;
}
#inhalt a.fotoc {
  background-image: url(bilder/zin1_t.jpg);
  background-repeat: no-repeat;
  width: 60px;
  height: 93px;
}
#inhalt a.fotod {
  background-image: url(bilder/lok_bild_t.jpg);
  background-repeat: no-repeat;
  width: 93px;
  height: 60px;
}
#inhalt a.fotoe {
  background-image: url(bilder/mauer_t.jpg);
  background-repeat: no-repeat;
  width: 93px;
  height: 60px;
}
#inhalt a.fotof {
  background-image: url(bilder/kirche3_t.jpg);
  background-repeat: no-repeat;
  width: 93px;
  height: 60px;
}
#inhalt a.fotog {
  background-image: url(bilder/lok_holz_t.jpg);
  background-repeat: no-repeat;
  width: 93px;
  height: 60px;
}
#inhalt a.fotoh {
  background-image: url(bilder/zin2_t.jpg);
  background-repeat: no-repeat;
  width: 60px;
  height: 93px;
}
#inhalt a.fotoi {
  background-image: url(bilder/kirche2_t.jpg);
  background-repeat: no-repeat;
  width: 60px;
  height: 93px;
}
#inhalt a.fotoj {
  background-image: url(bilder/brunnen2_t.jpg);
  background-repeat: no-repeat;
  width: 60px;
  height: 93px;
}
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 -- :hover Effekt für Thumbnails
Erstelle im CSS-Editor folgende Regel:

Code: Alles auswählen

#inhalt a.galerie:hover {
  border: 1px solid red;
}
Deine Galerie sollte etwa so aussehen.
schritt9

Schritt 10 -- :hover Effekt für span
Erstelle im CSS-Editor folgende Regel:

Code: Alles auswählen

#inhalt a.galerie:hover span {
  position: absolute;
  width: 372px;
  height: 372px;
  top: 10px;
  left: 10px;
  background-color: #ffffff;
  color: black;
}
Deine Galerie sollte etwa so aussehen.
schritt10

Schritt 11 – Schrift anzeigen
Nun ist im obigen Beispiel noch nicht bei allen Fotos der Bildertitel zu sehen. Das änderst du mit der nächsten Regel.
Erstelle im CSS-Editor folgende Regel:

Code: Alles auswählen

#inhalt a.galerie:hover img {
  border: 1px solid black;
  float: left;
  margin-right: 5px;
}
Deine Galerie sollte etwa so aussehen.
schritt11

Schritt 12 – Standard-Bild hinzufügen
Wenn kein Bild ausgewählt ist sieht es ein bißchen Kahl aus. Deshalb kannst du noch ein Hintergrundbild einfügen.
Editiere im CSS-Editor folgende Regel:

Code: Alles auswählen

#inhalt {
  position: relative;
  width: 770px;
  height: 396px;
  background-image: url(bilder/hint.png); /* neu
  background-repeat: no-repeat; /* neu
}
Und hier noch einmal das Ergebnis:
Galerie
Viel Spaß.
Dieses Tutorial wurde am 14.01.2008 von gimp-michel für KompoZer-Web erstellt.

Antworten