Galerie mit Kategorien

Eigene Galerie mit Kategorie-Seite

• Grafik links zeigt ein Beispiel
• Galerie Startseite - mit Kategorien


• Bilder sind mit Seiten verlinkt
• die Seiten enthalten die Galeriebilder
• diese öffnen sich im Thickbock-Fenster


• siehe auch die >> Beispiel-Gallerie <<

Tipp für Galerie-Bilder:

- verwendet Bilder in gleicher Größe
- Bilder in Hochformat in die letzte Bildreihe platzieren

---

Schritt 1: Die Galerie-Startseite erstellen

• Einloggen in Hompage
• dann auf "Seiten" klicken
• auf "neue Seite erstellen"
• wir erstellen die Seite "Galerie"
• mit den Bildern für die Kategorien
• im Editor oben links auf "Quellcode"
• nun diesen Code einfügen

<link rel="stylesheet" href="//www.homepage-baukasten-dateien.de/clean-test/g.css" type="text/css" media="screen">

Gleich danach folgt der HTML-Code.
Im HTML-Code die Grafikadressen und die Kategorie-Titel einfügen.

Die Bilder werden mit Galerie-Seiten verlinkt. Verwenden wir 4 Kategoriebilder, müssen auch 4 neue Seiten erstellt werden. Und von diesen neuen Seiten kopieren wir die Seitenadressen und fügen diese im folgendem HTML-Code ein.

Hier ein Beispiel für 4 Kategorie-Bilder:

<h2>Hier Euer Galerie-Titel</h2>
<br>
<br>

<div class="bildbox">
<a href="Seitenadresse 1"><img class="bild" src="Grafikadresse 1" alt="bild"></a>
<p> Hier Kategorie-Titel 1 </p>
</div>

<div class="bildbox">
<a href="Seitenadresse 2"><img class="bild" src="Grafikadresse 2" alt="bild"></a>
<p> Hier Kategorie-Titel 2 </p>
</div>

<div class="bildbox">
<a href="Seitenadresse 3"><img class="bild" src="Grafikadresse 3" alt="bild"></a>
<p> Hier Kategorie-Tite 3 </p>
</div>

<div class="bildbox">
<a href="Seitenadresse 4"><img class="bild" src="Grafikadresse 4" alt="bild"></a>
<p> Hier Kategorie-Tite 4 </p>
</div>

<br style="clear:left;"/>

Damit hätten wir die Startseite unserer Galerie.

---

Schritt 2: Galerie-Seiten erstellen

• wir erstellen nun 4 neue Seiten
• Seitentitel z.B. Galerie 1 bis Galerie 4
• im Editor oben links auf "Quellcode" klicken
• diese 4 Seiten bekommen folgenden Code:

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="//wtheme.webme.com/js/thickbox.js"></script>
<link rel="stylesheet" href="//theme.webme.com/designs/globals/thickbox.css" type="text/css" media="screen">
<link rel="stylesheet" href="//www.homepage-baukasten-dateien.de/clean-test/g2.css" type="text/css" media="screen">

Es folgt der HTML-Code für alle Galerie-Seiten:

<h2 style="float:left;">Hier Galerie-Überschrift</h2>

<a href="Seitenadresse" class="zurueck">zurück zur Übersicht</a>

<br style="clear:both;">
<br>

<a href="Grafik 1" class="thickbox" title="Titel 1" rel="gallery-plants">
<img class="bild" src="Grafik 1" alt="Bild"></a>

<a href="Grafik 2" class="thickbox" title="Titel 2" rel="gallery-plants">
<img class="bild" src="Grafik 2" alt="Bild"></a>

<a href="Grafik 3" class="thickbox" title="Titel 3" rel="gallery-plants">
<img class="bild" src="Grafik 3" alt="Bild"></a>

<a href="Grafik 4" class="thickbox" title="Titel 4" rel="gallery-plants">
<img class="bild" src="Grafik 4" alt="Bild"></a>

<a href="Grafik 5" class="thickbox" title="Titel 5" rel="gallery-plants">
<img class="bild" src="Grafik 5" alt="Bild"></a>

<a href="Grafik 6" class="thickbox" title="Titel 6" rel="gallery-plants">
<img class="bild" src="Grafik 6" alt="Bild"></a>

<br style="clear: left;">

• die neuen Galerie-Seiten verstecken wir im Menü
• hier Beschreibung Seiten im Menü verstecken

- bei Seitenadresse den Link zur Galerie-Startseite einfügen
- dazu die Galerie-Startseite besuchen ...
- und im Adressfeld des Browsers die Seitenadresse kopieren

- bei Grafik die Grafikadresse einfügen

- bei Titel kurze Bildbeschreibung einfügen
- diese Bildbeschreibung wird im Thickbox-Fenster mit angezeigt

---

Schritt 3:

Als letzten Schritt öffnen wir nocheinmal die Seite mit der Galerie-Startseite.
Hier fügen wir nun im Code die fehlenden Seitenadressen ein. Wir haben 4 Kategorie-Bilder. Und wir haben 4 Seiten erstellt. Jedes Bild wird nun mit der gewünschten Galerie-Seite verlinkt.

Bei Fragen - einfach melden - über das Kontakt-Formular

Tipp:

Eure Galerie mit >>Kommentarfunktion << , dazu bei "Extras" zunächst "Kommentare" aktivieren. Anschliessend gewünschte Galerie-Seite zum Bearbeiten öffnen. Neben dem Feld "Seitentitel" seht ihr das Zanhrad-Symbol. Anklicken - und Kommentare für diese Seite zulassen.

Die Kommentare gestalten mit CSS

etwas netter aussehen lassen , ist auch möglich ....
Beschreibung habe ich hier : >> Kommentare anpassen <<