find-templates

Eigene Galerie

Eigene Galerie mit Text :

zurück zur Übersicht




Schritt 1: Javascript der Baukasten-Galerie einfügen

- auf "Eigene Seiten editieren"
- Seite auswählen, wo Galerie-Bilder hinein sollen
- im Editor (Werkzeugleiste) oben links auf "Quellcode" klicken
- folgenden Code zu Beginn der Seite einfügen:

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://wtheme.webme.com/js/thickbox.js"></script>
<link rel="stylesheet" href="http://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;
  background-color: #eee;
  border: 1px solid #c9c9c9;
  border-radius: 5px;}

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

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

.bildbox:hover {
  background-color: #ffffb2; }
-->
</style>

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

Diesen fügst Du ebenfalls mit in den Seiteninhalt ein:

<div class="bildbox">
<a href="URL 1" class="thickbox" title="TITEL"><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"><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"><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"><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"><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"><img class="bild" src="URL 6" alt="bild" /></a>
<p>Text unter Bild</p>
</div>

<br style="clear: left;">

Bei URL 1 bis URL 5 werden die Grafikadressen eingefügt
Deine Bilder dazu vorher im Baukasten hochladen (bei "Bilder verwalten").

- nach dem Hochladen klicke den Bildernamen an
- die Grafik wird Dir angezeigt
- mit Rechtsklick auf das Bild
- wähle aus "Grafikadresse kopieren"
- diese Grafikadresse wird im Code eingefügt