Fancybox bei Aufruf einer Seite / Layer für Aktionen

Aktionen oder wichtige Ereignisse nach dem Seitenaufruf einer Seite vorschalten.

Aktionen oder wichtige Ereignisse lassen sich z.B. über einen Layer anzeigen, welche nach dem Seitenaufruf (z.B. der Startseite) der eigentlichen Seite "vorgeschaltet" wird.

Allgemein / BASE Classic

Eine Möglichkeit, eine Fancybox beim Aufruf einer Seite anzuzeigen, ist der Einsatz eines ausgeblendeten Links (über display:none), welcher über JavaScript nach dem Laden der Seite (DOM fertig aufgebaut) aufgerufen wird:

Fügen Sie dazu ein Link-Element (oder Bild-Element bzw. HTML Quelltext-Element) in die Seite ein und vergeben für das A-Tag bzw. IMG-Tag einen Namen (z.B. callFancy). Über eine style- bzw. class-Angabe setzen Sie das Element auf nicht sichtbar / unsichtbar. Bedenken Sie beim Einsatz eines Link-Elementes, daß Sie für den Editor die Anzeige aktivieren (z.B.: .weditor .elementLink_var10000     {display:block;} ).

Nachfolgend der Einfachheit halber beispielhaft über ein HTML Quelltext-Element umgesetzt:

<a style="display: none;" target="fancy" name="callFancy" href="https://www.weblication.de/?viewmode=blank" class="box">Weblication</a>

Nach diesem Element fügen Sie ein "Javascript einbinden" Element ein und setzen z.B. folgenden JavaScript-Code:

$(document).ready(function () {
  var callFancy = jQuery('a[name="callFancy"]');
  callFancy.hide();
  callFancy.trigger('click');
});

Dieses Beispiel wurde auf Grundlage eines BASE Classic Projektes getestet und nutzt zum Link target- und class-Angaben, welche in der design.js bereits für die Fancybox vorgesehen sind.
Das Beispiel kann individuell für das gewünschte Vorhaben abgeändert werden.

Störer / Hinweis-Seite in Mobile First

Einbindung über eine Inhaltsbox

Mit der Inhaltsbox-Variante 540 ("Hinweis als Infolayer mittig einblenden") erreichen Sie das Ziel mit Standard-Mitteln.

Einbindung über JavaScript

In einem aktuellen BASE (Mobile First) Projekt können Sie einfach das "JavaScript einbinden" Element/Weblic® verwenden und darüber folgende JS-Syntax eintragen:

Beispiel: Auszug aus einem JavaScript einbinden Element

jQuery(document).ready(function () {
  var optionsLightbox = {'variant':'box', 'href' :  '/de/hinweis.php'};
  return wLightbox('undefined', typeof(optionsLightbox) != 'undefined' ? optionsLightbox : {});
});

Wichtig:
Im JavaScript-Element sollten Sie über die Auswahlbox "Hier einbinden" wählen.
Zudem sollten Sie das zentrale jquery.js Skript referenzieren, was Sie über das Feld "Pfade der JavaScript Dateien" vornehmen können.

/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/scripts/jquery.js

Pfade sind entsprechend Ihren Projektpfaden anzupassen.

Gekoppelt an einen Bedingten Container können Sie diesen Eintrag auch an eine Zeit koppeln.

Diese Webseite verwendet Cookies. Durch die Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Datenschutzinformationen