Design Clean
    >> Tipps zum anpassen

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;">

- 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 <<






Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :1 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben