Hallo zusammen,
aufgrund einiger Nachfragen versuche ich nachfolgend einmal aufzuführen, wie ich es geschaft habe Colorbox ( http://www.jacklmoore.com/colorbox/ ) in meine Seite ( www.smalandstuga.se ) einzubinden. Beispiele findet man u.a. unter Vermietung -> Reservierung/Kontakt beim Belegungsplan und den AGB.

Vorab, ich hab voll keine Ahnung von Java usw. Das ich es geschafft habe, liegt nur an meiner Zähigkeit und gefühlten 1 Mio. try'n'error -Versuchen...
Eigentlich hätte ich gerne einfach Didis Tutorial für Shadowbox benutzt. Ich hab dann aber festgestellt, dass Shadowbox bei Smartphones und Tablets mit Touchbedienung nicht für scrollen von längeren Texten und der Bedienung von Funktionen innerhalb iFrames taugt.

Okay, hier also die einzelnen Schritte:

1. Colorbox unter o.g. Link herunterladen

2. aus dem Download die Java Skripte jquery.colorbox-min.js, jquery.colorbox.js und jquery.colorbox-de.js (letzteres aus dem i18n Ordner; evtl. plus weitere Sprachen) auf euren Server hochladen

3. eins der Beispiele aus dem Download aussuchen und aus dem entsprechenden Example Ordner die Datei colorbox.css auf euren Server hochladen.

4. jquery-1.10.2.min.js bei Google suchen, finden, runterladen, und ebenfalls rauf auf euren Server

5. die Skripte und das CSS in eure Seite einbinden: unter dem Zahnrad bei "Eigenschaften dieser Seite" folgendes in den HEAD-Abschnitt

<link rel="stylesheet" type="text/css" href="colorbox.css">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.colorbox-min.js"></script>
<script type="text/javascript" src="jquery.colorbox.js"></script>

6. auf eurer Seite ein Html Snippet (Menu Eingabe -> Html-Code) einfügen und folgenden Code da reinschreiben

<script type="text/javascript">
function call_cbox_xyz()
{
jQuery.colorbox({width:"850px", height:"560px", iframe:true, href:"http://www.link zum gewünschten inhalt.de"});
}
</script>

!! dabei beachten: xyz steht als Name für die Colorbox und ist beliebig zu wählen, width und height legen die Größe fest, die für den Inhalts zur Verfügung steht (Größe der Box) und der link sollte dann zum Inhalt führen, den ihr haben wollt. !!

Ich habe immer nur iFrames benutzt. Wenn ihr was anderes in der Box haben wollt, müsst ihr den Code wahrscheinlich ändern. Da müsstet ihr dann mal googlen oder auf der Colorbox Seite nach Infos suchen...

7. den Link (Button oder Textlink), der die Colorbox aufrufen soll, ganz normal in WA erstellen, dabei aber keine Linkadresse angeben, sonder auf den JS Button klicken und dort folgendes eingeben:

call_cbox_xyz();

!! xyz ist wieder der vorher festgelegte Name !!

8. dreimal auf Holz klopfen

9. Seite veröffentlichen, ausprobieren, und hoffentlich feststellen, dass es funktioniert...

Wie gesagt, ich eigentlich überhaupt kein Ahnung von dem, was ich da gemacht habe. Ich hab halt einfach solange gegooglet und immer wieder probiert bis es funktionierte.
Wahrscheinlich hätte es jemand, der sich auskennt, ganz anders gemacht..

Viel Glück,
Peter

Hallo Webacappella-Gemeinde!

Ich wärme mal diesen doch schon etwas älteren Thread auf... Ich war längere Zeit nicht im Forum unterwegs und habe diese sehr nette Anleitung zur Colorbox gerade eben erst entdeckt. Gefällt mir gut. :-)
Ich nutze bisher die ShadowBox, bei deren Installation und Setup mir seinerzeit Didi sehr geholfen hat. Ich möchte nun aber aus verschiedenen Gründen auf die Colorbox umsteigen. Habe eben gerade etwas herumprobiert. Funktioniert alles wie gewünscht bis auf ein kleines Problem:

Ich möchte in der Colorbox (iFrame) interaktive Panoramen anzeigen. Diese basieren auf HTML5. Wenn man diese HTML5_Panoramen in der Colorbox (und jedem anderen Lightbox-Derivat) öffnet, funktioniert die Fullscreen-Ansicht nicht mehr. Soweit ich weiß, ist das normal, man muss ein allowfullscreen-Attribut setzen. Nur wie und wo mache ich das????? Meine Versuche sind bisher alle gescheitert.

Hat jemand eine Idee?