Galerie mit Text :
Der Text kann auch verlinkt werden. Kurze Titel verwenden.
Flaniermeile Hafen
Blick auf Westufer
Mein Lieblingsbild
Blick auf Westufer
unser Rathaus
Ideal ist Bildergröße 800 x 600 (verkürzt Ladezeiten auf der Homepage).
Original-Bilder von einer Digi-Cam also vor dem Hochladen verkleinern<.
Schritt 1: Thickbox-Script einfügen
auf "Eigene Seiten editieren "
Seite wählen, wo die Bilder hinein sollen
oben links im Editor auf "Quellcode " klicken
nun dieses Script zu Beginn der Seite einfügen:
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.min.js "></script>https://wtheme.webme.com/js/thickbox.js "></script>http://theme.webme.com/designs/globals/thickbox.css " type="text/css" media="screen">
Schritt 2: Der CSS Code
Mit dem CSS Code bekommen die DIV's und die Bilder ihr Aussehen.
Einfügen im Feld
"Text ÜBER Design"
<style type="text/css">
<!--
/* Feld um Bild */
.bildbox {
width: 120px;
float: left;
text-align: center;
padding: 10px;
margin: 10px;
background-color: #dddddd;
border: 1px solid #565656;
border-radius: 5px;}
/* Text unter Bild */
.bildbox p {
font-size:10px!important;
font-family:arial;
color: #000000;
margin-top: 10px; }
/* Linkgroesse unter Bild */
.bildbox p a {
font-size:10px!important;
text-decoration: underline;}
/* verkleinerte Bild */
.bild {
width: 120px;
height: 90px;
border: 1px solid #FFFFFF;}
-->
</style>
Schritt 3 : Bilder einfügen
Jedes Bild sitzt in einem DIV. Das Bild verlinkt Ihr mit sich selbst.6 Bilder :
<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; ">
Beachte:
Du siehst als letztes diese Zeile : <br style="
clear: left; ">
Die Zeile kommt
nach dem letzten Bild . Damit wird das "float:left;" der Bilder aufgehoben.
Damit sich weiterer Inhalt
nicht rechts neben den Bildern platziert, sondern wieder darunter beginnt.
Bei
URL die Grafikadresse des Bildes einfügen.
