Bildergalerie mit CSS (IV)

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

Bildergalerie mit CSS (IV)

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

Und jetzt kommen wir zur „Königsklasse“ :lol:
Hintergrund der Galerie ist der Gedanke viele Bilder / Fotos auf einer Seite darzustellen ohne den Besucher zu verwirren / überladen und eine räumliche Thementrennung herzustellen.

Hier siehst du die Vorschau.
ACHTUNG Modemsurfer!! Beim ersten mal Laden werden 60 Fotos und 60 Thumbnails übertragen. Also etwas Geduld und NICHT entnervt beenden. ;)

Zum Nachbau der Galerie solltest du neben dem KompoZer auch gut mit einem guten Text-Editor (vorzugsweise Notepad++) vertraut sein.

Auf geht’s. Und viel Spaß.

Für die Vollbilddarstellung benutze ich Bilder der Größe 480 x 360 px und für die Thumbnails die Größe von 80 x 55 px. Das sind alles Werte die du im Quelltext wieder findest und nur entsprechend deinen Bedürfnissen anzupassen brauchst. Die Bilder kannst du dir als ZIP-Files downloaden. In diesem Zusammenhang noch mal ein Dankeschön an Reinhard für seine schönen Bilder aus Polen.

Bilder zum downloaden.

Starte den Kompozer und erstelle eine neue Datei „galerie.html“.
Erstelle mit dem CSS-Editor folgende Regeln:

Code: Alles auswählen

body {
}
.bg {
  position: relative;
  height: 382px;
  width: 785px;
}
Auf Grund des komplexen Inhalts mit mehreren „Teil“-Galerien arbeite ich von Anfang an mit Klassen. Welche sich alle auf das eine div beziehen. bg steht übrigens als Kürzel für Bilder-Galerie.

Erstelle ein div und weise ihm die Klasse „bg“ zu.
Als nächstes baust du das Menü. Schreibe dazu „Beispiel1“ bis „Beispiel5“ untereinander. Markiere sie und formatiere sie als ungeordnete Liste.

Formatiere die Liste mit folgenden Regeln:

Code: Alles auswählen

.bg ul {
  border-width: 0;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 260px;
}
.bg ul li {
  width: 260px;
  float: left;
  background-color: #dddddd;
  background-image: url(images/button1.gif);
  background-repeat: no-repeat;
}
Dazu müssen sich die Foto-Ordner im gleichen Ordner wie die galerie.html befinden. Ansonsten passe den Pfad entsprechend an.
Markiere noch einmal die Liste und erstelle für alle den Link „#nogo“. Warum #nogo ? Diese Adresse verhindert ein springen an den Seitenanfang bei versehentlichem Anklicken der Thumbnails. Sie sollte natürlich im Dokument NICHT als Anker vorhanden sein.

Im CSS-Editor erstellst du die Regel:

Code: Alles auswählen

.bg ul li a.set {
  display: block;
  text-align: center;
  line-height: 30px;
  height: 30px;
  background-image: url(images/button2.gif);
  background-repeat: no-repeat;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 11px;
  text-decoration: none;
}
Als nächstes formatierst du alle Links mit der Klasse „set“ durch Zuweisung.

Dein Zwischenergebnis sollte so aussehen.
WAS?? Das sieht nicht besonders schön aus. Es soll auch nicht schön aussehen sondern funktionieren. Für Schön bist du verantwortlich!!!!! :lol: :lol:

Weiter geht’s.
Für die Thumbnails benutzen wir Tabelle mit nur einer Zelle. Diese setzt du wie folgt ein. Setze den Cursor hinter das Wort Beispiel1 und drücke shift+Enter. Eine neue Zeile wird (temporär) eingefügt. Füge eine neue Tabelle, mit nur einer Zelle, ein. Im KompoZer sieht es so aus.
Bild
Um die Größe und das Aussehen der Tabelle brauchst du dir zum jetzigen Zeitpunkt keine Gedanken machen. Die Formatierung erfolgt, nachdem du den Inhalt eingefügt hast. Trotzdem werden wir für die Tabelle eine einfache Regel aufstellen um sie bei Bedarf anpassen zu können.

Code: Alles auswählen

.bg ul li table {
  padding: 0;
}

Nun vervollständigst du das Grundgerüst mit den Thumbnails aus dem Ordner images_a. Füge die Dateien „bild1_t.png“ bis „bild12_t.png“ in die Zelle ein. Achtung !! Beim einfügen der Bilder KEINEN Alternativtext vergeben. Im KompoZer sieht es so aus (Bildausschnitt).
Bild

Die nun folgenden Arbeiten könntest du auch mit dem KompoZer machen, aber du bist wesentlich schneller und präziser wenn du die folgenden Änderungen und Erweiterungen im Quelltext machst. Denn wie du schon bemerkt hast habe ich nur im Beispiel1 gearbeitet und da die Beispiele2 bis 5 im eigentlichen Sinn nur Kopien des Beispiel1 werden kannst du viel Arbeit und Zeit sparen durch konsequente Anwendung von copy/paste und finden/ersetzen. Doch gehen wir Schritt für Schritt vor und schaffen uns eine Grundlage die du auch für Erweiterungen über Beispiel5 hinaus nutzen kannst.
Schließe den KompoZer und starte das Notepad++. Öffne die Datei galerie.html und suche den Abschnitt <div class="bg"> und füge danach folgenden Code ein. Er ist für das Standbild.

Code: Alles auswählen

<img class="default" style="width: 480px; height: 360px;" alt="default" src="images_a/bild1.jpg">
Hier siehst du die Seite nach dem Einfügen des Standbildes. Denke dran formatiert wird später.

Weiter geht’s im folgenden Abschnitt <li> bis </li>. Markiere den gesamten Abschnitt und schneide ihn mit „Bearbeiten=>Ausschneiden“ aus. Öffne im Notepad++ eine neue Datei und füge den soeben ausgeschnittenen Abschnitt ein. Jetzt gehst du Schritt für Schritt vor.
1.Lösche den folgenden Code ersatzlos : style="text-align: left; width: 100px;" border="0" cellpadding="2" cellspacing="2"
Danach ist der Tag <table> für die Tabelle leer.
2.Nach den öffnenden Tags <table><tbody><tr><td> fügst du ein <ul> Tag ein.
3.Vor den schließenden Tags </td></tr></tbody></table> fügst du ein </ul> Tag ein.
4.Gehe jetzt zu „Suchen=>Ersetzen“. Füge in Zeile „Suchen nach“ den folgenden Code ein: <img style="width: 80px; height: 55px;" alt="" src="images_a/bild1_t.jpg"> und in die Zeile „Ersetzen durch“ diesen Code: <li><a href="#nogo"><img class="thumb" src="images_a/bild1_t.jpg" alt="" title=""><img class="full" src="images_a/bild1.jpg" alt="" title=""></a></li> . Wenn du dann auf ersetzen klickst findet er genau einen Treffer und ersetzt ihn. Nun wiederholst die Prozedur änderst aber vorher alle „1“ in beiden Zeilen in „2“ um. Und wieder ein Treffer und Ersetzung. Das machst du bis Bild12.
5.Zuletzt fügst du noch hinter >Beispiel1</a> ein <b></b> . Erklärung weiter unten.
6.Speichere die Datei als „ablage.txt“ ab.
7.Markiere den ganzen Inhalt der ablage.txt und füge ihn an die Stelle (der galerie.html) ein an der du vorher den Abschnitt ausgeschnitten hast.
8.Speichere alle Dateien ab und schließe das Notepad.

So sieht der Zwischenstand aus. Überprüfe ob die Thumbnails zu den Bilder passen und korrigiere es notfalls.

Beginnen wir mit der Formatierung der Listen. Erweitere den Eintrag .bg ul auf .bg ul, .bg ul ul . Somit erhalten beide Listen die gleiche Grundformatierung. Erstelle eine neue Regel:

Code: Alles auswählen

.bg ul ul {
  margin-left: -2000px;
  height: 0;
  overflow: hidden;
}
Setze bei :hover den Hintergrund auf transparent mit:

Code: Alles auswählen

.bg ul li a.set:hover {
  background: transparent;
}
.bg ul li:hover a.set {
  background: transparent;
}
Diese Werte musst du per Hand einfügen und beim nächsten Abspeichern macht der Kompozer folgende Einträge daraus:

Code: Alles auswählen

.bg ul li a.set:hover {
  background: transparent none repeat scroll 0%;
}
.bg ul li:hover a.set {
  background: transparent none repeat scroll 0%;
}
Also nicht wundern es funktioniert trotzdem.

Die nächste Regel steuert die Vollbilddarstellung:

Code: Alles auswählen

.bg ul *:hover b {
  border: 1px solid #888888;
  background-color: #f8f8f8;
  display: block;
  width: 480px;
  height: 360px;
  position: absolute;
  left: 300px;
  top: 0;
}
Beachte hier das der Link nicht gemäß dem Standard mit a sondern mit b bezeichnet wird.

Die restlichen Regeln weisen kein Besonderheiten auf und du kannst sie übernehmen.

Code: Alles auswählen

.bg ul *:hover table {
  border-style: solid;
  border-color: #888888;
  border-width: 0 1px 1px;
  margin-top: -2px;
  display: block;
}
.bg ul *:hover ul {
  margin: 1px 1px 1px 3px;
  background: transparent none repeat scroll 0%;
  overflow: visible;
  width: 250px;
  height: 230px;
}
.bg ul *:hover ul li {
  margin: 1px;
  background: transparent none repeat scroll 0%;
  float: left;
  display: inline;
  width: 80px;
  height: 55px;
}
.bg ul *:hover ul li a {
  background: transparent none repeat scroll 0%;
}
.bg ul *:hover ul li a img.thumb {
  border:  none;
  margin: 0px;
  display: block;
}
.bg ul *:hover ul li a img.full {
  border:  none;
  position: absolute;
  left: -2000px;
  top: 0;
}
.bg ul *:hover ul li a:hover {
  background: transparent none repeat scroll 0%;
}
.bg ul *:hover ul li a:hover img.full {
  border: 1px solid #dddddd;
  left: 300px;
  z-index: 0;
}
Der Zwischenstand sieht so aus.

An der Stelle stehen nun wieder alle IE-Surfer im Regen, denn nix geht so wie es soll. Ändere deshalb deinen Code wie angegeben:
VORHER(Teilausschnitt)

Code: Alles auswählen

Beispiel1</a>
NACHHER

Code: Alles auswählen

Beispiel1<!--[if gte IE 7]><!--></a><!--<![endif]-->
VORHER

Code: Alles auswählen

</tbody></table></li>
NACHHER

Code: Alles auswählen

</tbody></table><!--[if lte IE 6]></a><![endif]--></li>
Zur Anpassung deiner Vorlage führe diese Änderungen ebenfalls in der „ablage.txt“ durch.
Zwischenstand mit IE-Code.

Die Funktionalität ist gewährleistet aber das Standbild ist noch am verkehrten Platz und dem zur Folge auch das Menü. Ändere es durch erstellen der Regel:

Code: Alles auswählen

.bg .default {
  border: 1px solid #dddddd;
  width: 480px;
  height: 360px;
  position: absolute;
  left: 300px;
  top: 0;
}
Die Seite sieht jetzt so aus. Aber da schaut ja noch ein Stück der Tabelle unter dem Button hervor.
Blende es aus in dem du diese Regel erweiterst:
VORHER

Code: Alles auswählen

.bg ul li table {
padding: 0;
}
NACHHER

Code: Alles auswählen

.bg ul li table {
padding: 0;
display: none;
}
Fertige HP mit funktionierendem Beispiel1.

Fertigstellen der Beispiel2 bis Beispiel5.

Die Fertigstellung wird auf Grund der Vorlage „ablage.txt“ zu einem Klacks. Öffne die Datei „ablage.txt“ und führe folgende Änderung mittels „Suchen/Ersetzen“ durch.
VORHER

Code: Alles auswählen

<img class="thumb" src="images_a/bild1_t.jpg" alt="" title=""><img class="full" src="images_a/bild1.jpg" alt="" title="">
NACHHER

Code: Alles auswählen

<img class="thumb" src="images_b/bild1_t.jpg" alt="" title=""><img class="full" src="images_b/bild1.jpg" alt="" title="">
Das war es schon. Markiere und kopiere den gesamten Text.

Suche jetzt im Quelltext diesen Abschitt: <li><a class="set" href="#nogo">Beispiel2</a></li> und entferne ihn komplett. Füge dafür den Text aus der „ablage.txt“ ein.

Das Zwischenergebnis sieht so aus.

Ist doch schön wie schnell die zweite Galerie fertig ist. Die anderen machst du nach dem gleichen Muster. Und störe dich nicht daran, dass jetzt jeder Button mit „Beispiel1“ Beschriftet ist du änderst es nachher sowieso.

Wenn du alle Galerien eingefügt hast sieht es so aus und es fehlt nur noch ein wenig Feinschliff.


Ändere jetzt die Buttonbeschriftung von Beispiel1 in:
1.Chocholow
2.Kirchen der Boiken und Lemken
3.Jüterbog
4.Dampfmaschinen
5.Sukkulenten
Abschließend solltest du noch die Alternativtexte ( alt=“ “) für die Bilder eintragen.

Das Endergebnis.

Viel Spaß beim Nachbau.
dieses Tutorial wurde am 21.01.2008 von gimp-michel für kompozer-web erstellt.

Antworten