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.

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 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

In einem aktuellen Mobile First BASE 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.

/IhrGlobalesProjekt/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.

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG