eigene Galerie

Eine Bildgalerie einfügen

Ohne das Extra "Galerie". Hier mit einigen Fotos von mir : Bei Mausklick Vergrößerung im Thickbox-Fenster

Schritt 1: Javascript der Baukasten-Galerie einfügen

- auf "Seiten"
- gewünschte Seite auswählen
- im Editor oben links auf "Quellcode"
- und folgenden Code im Seiteninhalt einfügen:

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

Schritt 2: Der CSS-Code

den CSS-Code gleich unter den obigen Code einfügen

<style type="text/css">
<!--
#TB_window{border-radius: 15px;}
#TB_Image{border: none !important;}

.bildbox {
  width:150px;
  float: left;
  text-align: center;
  padding: 10px;
  margin: 10px;
  box-shadow: 10px 10px 10px #555;
  border: 1px solid #c9c9c9;
  border-radius: 5px;}

.bildbox p {
  font-size:11px!important;
  font-family:arial;
  color: #000000;
  margin: 5px 10px 0px 10px; }

.bild {
  width: 150px;
  border: 1px solid #FFFFFF;}

.bildbox:hover {
  background-color: #ffffb2; }

/* Textgröße bei Blätterfunktion */
#TB_secondLine {
font-size: 15px!important;
color: #000000;
}

/* Linkfarbe Blätterfunktion */
#TB_secondLine a { color: navy!important;
} 
-->
</style>

Schritt 3: Der HTML-Code für den Seiteninhalt

<div class="bildbox">
<a href="URL 1" class="thickbox" title="TITEL" rel="gallery-plants">
<img class="bild" src="URL 1" alt="bild"></a>
<p>Text unter Bild</p>
</div>

<div class="bildbox">
<a href="URL 2" class="thickbox" title="TITEL" rel="gallery-plants">
<img class="bild" src="URL 2" alt="bild"></a>
<p>Text unter Bild</p>
</div>

<div class="bildbox">
<a href="URL 3" class="thickbox" title="TITEL" rel="gallery-plants">
<img class="bild" src="URL 3" alt="bild"></a>
<p>Text unter Bild</p>
</div>

<div class="bildbox">
<a href="URL 4" class="thickbox" title="TITEL" rel="gallery-plants">
<img class="bild" src="URL 4" alt="bild"></a>
<p>Text unter Bild</p>
</div>

<div class="bildbox">
<a href="URL 5" class="thickbox" title="TITEL" rel="gallery-plants">
<img class="bild" src="URL 5" alt="bild"></a>
<p>Text unter Bild</p>
</div>

<div class="bildbox">
<a href="URL 6" class="thickbox" title="TITEL" rel="gallery-plants">
<img class="bild" src="URL 6" alt="bild"></a>
<p>Text unter Bild</p>
</div>

<br style="clear: left;">

URL = die Grafikadresse
- Bild im Baukasten hochladen (bei "Bilder verwalten")
- Haken entfernen bei "Bild verkleinern"
- nach Hochladen klicke Bildvorschau an
- Bild wird dir Groß angezeigt
- mit Maus auf Bild / Rechtsklick "Grafikadresse kopieren"
- mit Tasten-Kombination STRG + V im Code einfügen

Titel = Füge hier einen Titel ein, er wird angezeigt, wenn das Bild vergrößert wird
Text unter Bild = Dieser Text wird unter dem kleinen Bild angezeigt

Tipp für diese Galerie:

Vermeidet einen Mix aus Hochkant-Bildern und Bildern im Querformat.
Wenn Ihr Hochkant-Bilder verwendet, müssen alle 3 in eine Reihe.