iceblue-test
  video mit thickbox
 

Youtube-Video im "Thickbox-Fenster" öffnen :



2 Beispiele mit verlinktem Text: Video 1 und hier Video 2

oder mit verlinkten Bildern : Bilder anklicken



Schritt 1 : Thickbox-Script einfügen


Thickbox-Script einfügen, welches auch die Baukasten-Galerie (für Bilder) verwendet.

- Auf "Eigene Seiten editieren"
- wähle Seite aus, wo verlinkung hinein soll
- nun ist die Seite zum Bearbeiten offen
- im Editor oben links auf "Quellcode" klicken
- nun zu Beginn der Seite folgendes 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" />


Beachtet bitte:

Wenn Ihr die Seite mehrfach editiert (also bearbeiten, speichern, bearbeiten, speichern) ...
wird der Editor (die Werkzeugleiste) eine Code-Zeile "umwerfen", also unbrauchbar machen.

  • geht im Menü auf "Einstellungen"
  • scrollt herunter zum Punkt "Profi-Einstellungen"
  • Haken in das Feld : HTML-Editor NICHT anzeigen
  • speichern
  • nun auf "Eigene Seiten editieren"
  • wählt die Seite aus, die das Script bekommen soll
  • nun könnt Ihr den Code einfügen
  • Ihr aktiviert den Editor erst wieder, wenn die Seite komplett fertig ist



Schritt 2 : Text verlinken


Nun können wir Text (oder Bild) mit dem youtube-Video verlinken.
Das class="thickbox" erzeugt dann den "thickbox" Effekt

HTML-Code in gewünschter Seite einfügen : 

<a class="thickbox" href="Video-URL?keepThis=true&TB_iframe=true&height=325&width=400"> HIER TEXT</a>


ODER: BILD verlinken

<a class="thickbox" href="Video-URL?keepThis=true&TB_iframe=true&height=325&width=400"> <img src="BILD-URL" alt="" border="0"></a>


Das BILD-URL ersetzt Ihr durch die Grafikadresse, also die http://....../.......jpg   des Bildes.
Das Video-URL ersetzt ihr durch den Link aus dem Youtube-Iframe-Code (siehe unten)
Bei width (Breite) und height könnt Ihr Größe des Thickboxfensters anpassen.



Schritt 3 : Die Video-URL


Die bekommen wir bei youtube so :

  • auf die Seite www.youtube.com
  • Suche dir ein Video
  • klicke UNTER dem Video auf "Einbetten"
  • Dir wird ein Code angezeigt, der mit <iframe title="... beginnt
  • wir benötigen nicht den ganzen Code
  • sondern nur die Video-URL aus diesem Code
  • die steht neben dem src="


Youtube Video-URL finden :






Tipp für Video in rechter Box :



  • Das "Thickbox-Script" (der 1. Code) einfügen im Feld "Text ÜBER Design"
  • dort nach dem letzten --> </style>
  • in rechter Box ein Bild (160 Pixel breit) mit Video verlinken (siehe Schritt 2)
  • diese Muster könnt ihr mit Bildprogramm bearbeiten / verwenden :


Video   Video   Video


Video  Video   Video



Beachtet bitte :
Wenn Ihr das "Thickbox-Script" im Feld "Text über Design" einfügt, wirkt dieses Script auf allen Seiten. Verwendet Ihr das Script bereits (als Inhalt) in anderen Seiten ? Dann bitte das "Thickbox-Script" (der 1.Code dieser Seite) aus allen Seiten entfernen. Es kommt sonst zu fehlerhaften Darstellung der Bilder, die sich im Thickbox-Fenster öffnen. Weil das "Thickbox-Script" doppelt im Quellcode vorkommt: Einmal als Seiteninhalt, und im Feld "Text über Design".






 
  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