Spezielles zu Fancybox
Fancybox für Phpwcms auf Github Installation funktioniert wie beschrieben.
Dokumentation zu Fancybox
In Fancybox sind viele Spielereien enthalten. Eine nette Sache ist, das man auch andere Webseiten in der Fancybox anzeigen kann. Voraussetzung ist jedoch, das die anzuzeigende Seite nicht unterbindet, das diese in einem IFrame angezeigt wird.
Bei den Links hier ist es so, das bewußt ein Beispiel dabei ist, das nicht geht.
(Format-Klasse zum Link - fancybox fancybox.iframe bis Fancybox 2.1.5) Seit Version 3.x hat sich der Link für Fancybox völlig geändert und mit rel="lightbox" passiert nichts mehr.
Um nun innerhalb eines Textes einen Iframe-Link anzuzeigen hab ich mich eines kleinen Jquery Scripts bedient, was mir, wenn ich dem Link fancybox_iframe anfüge die nötigen Attribute hinzufügt und ändert.
Script
$('.image-td .image-lightbox').attr({
"data-fancybox": "",
});
$('.images .image-lightbox').attr({
"data-fancybox": "images",
});
$('.isotope-images .image-lightbox').attr({
"data-fancybox": "images",
});
// macht aus Lightbox Anweisung in PHPWCMS Fancybox
$('.filtr-image .image-lightbox').attr({
"data-fancybox": "images",
});
// Fancybox-Iframe
$('.fancybox_iframe').attr({
"data-fancybox": "",
"data-type": "iframe",
});
// Video als Fancybox-Video
$('.fancybox_media').attr({
"data-fancybox": "video-gallery",
});
Beispiel-Link Webseite in einer Fancybox Google Maps Beispiel-Link mit Webseite mit der das nicht funktioniert hier Google.com dsgvo
Beispiel hier als Button (Format-Klasse zum Link - btn btn-default btn-sm fancybox fancybox.iframe)
Immer vor einer Integration fremden Inhalts in einem IFrame testen ob es möglich ist einen Inhalt in einem Iframe anzuzeigen.
Beim Verlinken im Artikel den Link Eintrage, Zielseite (_blank), und unter Erweitert trägt man bei Formatvorlagenklasse die entsprechende Klasse ein.
Um auch Iframes mit Fancybox innerhalb von Artikeln einfügen zu können, habe ich mich eines Scripts bedient, welchen, wenn ich im Link als Klasse "fancybox_iframe" angebe, dem Link "data-type": "iframe" hinzufügt, was für ein Fancybox-Iframe nötig ist.
Fancybox Media
wenn man in der /template/lib/inc_script/frontend_render/fancyBox.php noch das entsprechende Helper Script lädt und in der jquery.fancybox.js die Anweisung einträgt können in der Fancybox auch z.B. Videos angezeigt werden.
Beispiel-Link zu Vimeo (fremdes Videobeispiel) Beispiel-Link zu Youtube (Irland & Schottland mit dem Motorrad)