iceblue-test
  externe Galerie
 

Bilder mit Galerie-Vorschau:


Hier habe ich mal 6 Fotos von Flensburg eingefügt : Anklicken zum Vergrößern
Eigene Info-Texte im Thickbox-Fenster möglich.
Siehe Erklärung zum Code weiter unten.





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>
<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 : HTML-Code / Bilder verlinken


Beispiel-Code für 6 Bilder, ebenfalls mit in den Seiteninhalt einfügen :


<a href="URL 1" class="thickbox" title="TEXT"><img class="bild" src="URL 1" alt="Bild"></a>
<a href="URL 2" class="thickbox" title="TEXT"><img class="bild" src="URL 2" alt="Bild"></a>
<a href="URL 3" class="thickbox" title="TEXT"><img class="bild" src="URL 3" alt="Bild"></a>
<a href="URL 4" class="thickbox" title="TEXT"><img class="bild" src="URL 4" alt="Bild"></a>
<a href="URL 5" class="thickbox" title="TEXT"><img class="bild" src="URL 5" alt="Bild"></a>
<a href="URL 6" class="thickbox" title="TEXT"><img class="bild" src="URL 6" alt="Bild"></a>
<br style="clear:left;" />

Erklärung zum Bilder-Code :


Mit title="TEXT" wird Beschreibung unter dem Bild platziert.
Bei URL fügt Ihr die Grafikadresse des Bildes ein.
Nach dem letzten Bild fügen wir ein <br style="clear:left;" /> ein,
damit sich weiterer Inhalt nicht neben dem letzten Bild, sondern wieder darunter platzieren kann.



Wo finde ich die URL / Grafikadresse ?


- Einloggen in Homepage
- gehe auf "Bilder"
- klicke den Namen des Bilds an
- nun wird dir das Bild angezeigt
- mit der Maus auf das Bild
- mit Rechtsklick auf "Eigenschaften" (Browser IE)
- dort steht die http://.....................jpg vom Bild
- oder mit Rechtsklick auf "Grafik-Adresse kopieren" (Browser Mozilla)
- die kopierte Bild-URL 2 mal im Code einfügen




Schritt 3 : Der CSS Code für das Aussehen


Oben haben die Bilder einen Rahmen und gleichmässigen Abstand.
Das erzeugt das class="bild" im Bild-Code.
Die Klasse .bild bekommt mit CSS gewünschtes Aussehen.
Einfügen im Feld "Text über Design" :


<style type="text/css">
<!--

.bild {
float: left;
width: 130px;
padding: 5px;
margin: 10px;
border: 1px solid #343434; }
-->
</style>


Erklärung zur CSS-Anweisung :


float:left;   = Bilder platzieren sich nebeneinander

width: 130px;   = Vorschau-Größe der Bilder

padding: 5px;   = 5 Pixel Abstand zwischen Bild und Rahmen

margin: 10px;   = 10 Pixel Außenabstand pro Bild

border: 1px solid #343434;   = Rahmen / Rahmenstärke / Rahmenfarbe





Weitere Möglichkeit : Bilder-Box


Eine Bilder-Box mit Menü (für 12-18 Bilder)
Die Farbe der Box lässt sich anpassen
Beschreibung hier : Bilder-Box mit Menü

Oder: Galerie-Bilder mit Text unter den Vorschaubildern:
http://iceblue-test.de.tl/Galerie-mit-Text.htm







 
  TESTTESTTEST  
 
• dies ist der Inhalt im < div id="popup1" >
• befindet sich im Feld "Text UNTER Design"
• das DIV ist nur auf einer Seite zu sehen
• und auf dieser Seite wurde das Design entfernt
• angezeigt wird also nur der Inhalt des einen DIV