Design Clean
    >> Tipps zum anpassen

eigene Galerie

Eine Bildgalerie einfügen

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

Flensburger Hafen

Unterwegs im Audi

Unterwegs im Audi

Spiegelblick

über den Sylter Dünen

Schwertransport



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.








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 :30 Aufrufe



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

nach Oben