Neuere Themen:
jQuery animiertes Menü
Ein animiertes Menü mit jQuery. Kurzanleitung zum jQuery Code und der Umsetzung mit WebsiteBaker
Frische Template Dateien, statt aus dem Browsercache geladen
Mit diesem kleinen Trick wird es möglich, immer die aktuellste Datei auszugeben. Egal ob es sich um CSS Dateien, JS, Bilder handelt, der Besucher bekommt immer die aktuellste Version zu Gesicht, ohne den Browser aktualisieren zu müssen.
Slider im Template
Eine Anleitung zum Einbau eines Slider-Scripts in ein ||Template||
Dropdown Menüs
In diesem Tutorial möchte ich euch zeigen, wie ihr mit einfachen Mitteln ein gutes Menü hinbekommt, welches durch Hover-Effekte und Dropdowns glänzt. Das ganze natürlich in jedem Template mit show_menu2 realisierbar.
Zwischenüberschriften im Menü
Mehrere Methoden, das Menü durch Überschriften zu gliedern.
Einbinden der Fancybox |
|
Das FancyBox Snippet
Die Fancybox ist ein Script das es ermöglicht, Bilder und Texte aber auch Videos mit dem sogenannten Lightbox-Effekt darzustellen.
Einen ersten Eindruck von der Funktionsweise der FancyBox kann man sich hier verschaffen.
Einbindung
Zuerst bitte die FancyBox für die WebsiteBaker Version 2.8.x von AMASP herunterladen und das Snippet (zip-File) wie üblich über das Backend unter
Erweiterungen --> Module
installieren.
Die Einbindung selbst kann auf verschiedene Arten erfolgen:
1. global über den Aufruf in der index.php des Templates
2. mit Hilfe einer Code-Section als 1. Section auf der Seite, wo die FancyBox wirken soll
3. mit Hilfe eines Droplets z.B. im Kopf einer Wysiwyg-Section, in der die FancyBox wirken soll
1. Global über den Aufruf in der index.php des Templates
Folgender Aufruf wird direkt nach dem <body> Tag in die index.php des Templates geschrieben:
<?php use_fancy_box(); ?>
Somit steht das script auf der ganzen Installation zur Verfügung.
2. Mit Hilfe einer Code-Section
Folgender Aufruf wird in eine Code- oder Code2-Section kopiert
use_fancy_box();
Es ist unbedingt darauf zu achten, dass diese Section als 1. Section auf der Seite steht, auf der die FancyBox wirken soll, damit der Aufruf als erstes geladen wird.
3. Mit Hilfe eines Droplets
Man kann den Effekt auch mit Hilfe eines Droplets aufrufen. Hierzu bitte im Backend unter
Administration --> Droplets folgendes Droplet erfassen:
ob_start(); use_fancy_box(); $fancy_content = ob_get_contents(); ob_end_clean(); return $fancy_content;
Nun kan das Droplet direkt mittels des Button im FCK-Editor aufgerufen werden mit
fancybox
Eine Hilfe für Droplets steht hier zur Verfügung.
Konfiguration der FancyBox
Nach Installation und Einbindung stehen 5 Klassen standardmässig zur Verfügung:
- fb - verwendet die FancyBox mit den Defaultwerten, die in der include.php definiert sind
pic_fb - für Bild-Links ohne abdunkeln des Hintergrundes, schließt bei Klick ins Bild
pic1_fb - wie oben, jedoch mit abgedunkeltem Hintergrund
page_fb - für urls, schließt bei Klick auf Kreuz
video_fb - Link auf Anker in aktueller Seite, z.B. für ein YouTube-video.
Diese Klassen können einfach folgendermaßen aktiviert werden:
Text oder Bild verlinken wie gewohnt
Im FCK-Editor bei Eigenschaften des Links auf Erweitert gehen, Klasse eintragen, speichern, fertig
Zusätzlich kann ein Text oder Textabschnitt in ein <div> eingefasst werden:
<div id="use_fb">Hier der Textabschnitt</div>
Dadurch werden automatisch alle Links innerhalb dieses div´s von der Fancy-Box mit den Default-Werten (Grösse, Effekt) übernommen, egal ob eine spezielle Klasse gesetzt ist oder nicht.
Beispiel Einbinden eines Youtube Videos mit FancyBox
(Achtung, der HTML-Code erzeugt dann Fehler in der W3C Validierung)
Nachdem die Fancybox nach einer der 3 o.a. Möglichkeiten einegbunden wurde, kann in einer Wysiwyg-Section ein Link mit der entsprechenden Klasse augfgerufen werden, z.B.
<a class="video_fb" href="#mein_video">Schau dir mein Video an</a>
Zusätzlich muss nun eine Code- oder Code2-Section mit folgendem Inhalt erstellt werden:
<div style="display: none;" id="mein_video" /> <object height="355" width="425" /> <param name="movie" value="http://www.youtube.com/v/nnpv3FhIVXk" /> <param name="wmode" value="transparent" /> <embed height="355" width="425" src="http://www.youtube.com/v/nnpv3FhIVXk" type="application/x-shockwave-flash" wmode="transparent" /> </embed></object> </div>
alles speichern und fertig.
Alles in allem bietet die FancyBox eine Menge an Möglichkeiten auch für den Anfänger und in Sachen Coden unbedarften Usern von WebsiteBaker.
Viel Spass und "gutes Backen"
An dieser Stelle möchte ich noch Viny für die Basis zu diesem Tutorial im Forum danken.
Viny rest in peace.