Fenster soll content überlagern

  • Hallo,


    würde gerne im Text einen Hyperlink (auf Bild oder Datei) erstellen, das Erscheinungsbild sollte sein wie bei "Klick auf Bild vergrössern" - also abgedunkelte Seite, neues Fenster im Vordergrund über content gelagert mit X zum abklicken.


    Ist dies mit ZP 13 business möglich?

    Danke


    charly

  • Hallo,

    das ist in allen Versionen/Lizenzen möglich. Vorausgesetzt, man hat den entsprechenden Quelltext. Ein vorgefertigtes Widget gibt es hierzu noch nicht, ausser eben das Widget "Bild" mit der Funktion "bei Klick vergrößern".

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Hier nun der entsprechende Code, der von durch Zeta Producer bereits installierten JavaScripts gebrauch macht, so dass hier nichts zu installieren ist.

    Zunächst versorgen Sie Ihren text mit den entsprechenden Links. Im folgenden Beispiel sind zwei links, die in einer Lightbox geöffnet werden. Ein Bild und eine Website, die dann in einem iFrame dargestellt wird:

    Code
    <p> 
    <a class="lightbox" href="oid://image/2c610cd1-f606-4f69-ad7f-51047af399de">IMAGE</a>,  
    <a class="lightbox iframe" href="https://www.zeta-producer.com">iFRAME</a>
    </p>

    Wichtig hierbei ist, dass beiden links der CSS-Klassenname lightbox zugewiesen wird, da hiermit das folgende JavaScript sein Ziel findet. Ebenso wichtig ist, dass bei Sie bei Inhalten, die in der Lightbox nur in einem iFrame gezeigt werden können (z.B. alle HTML-Seiten), zusätzlich noch den Klassennamen iframe hinzufügen (siehe 2. Link). Das Ziel das jeweils im href-Attribut angegeben ist, wird dann jeweils bei Klick in der Lightbox gezeigt.

    Sollten Sie ein Bild aus der Zeta Producer Bildverwaltung nutzen wollen, so muss im href-Attribut die entsprechende oid eingefügt werden. Diese ermitteln Sie in Zeta Producer einfach so: Öffnen Sie die Bildverwaltung (Alt + 2) und klicken Sie dann das gewünschte Bild an. Nun klicken Sie auf den Button Werkzeuge und wählen im Menü die Option "Objekt-ID kopieren" um die oid in Ihre Zwischenablage einzufügen.

    Nun sind die Links fertig und JavaScript muss dafür sorgen, dass bei Klick auf diese Links die LightBox geöffnet wird. Dies erledigt folgender Code:

    Code
    <script>
    $z("a.lightbox").fancybox({
        'overlayColor'    : 'black',
        'overlayOpacity': 0.85,
        'width': 2400,
        'height': 2400
    });
    </script>

    Diesen Skriptcode fügen Sie am besten mittels "Quelltext"-Widget (einmalig) am Ende der jeweiligen Seite ein. Fertig. Dieses Skript wird nur ein mal pro Seite benötigt, auch wenn Sie mehrere Links mit Lightbox auf der Seite haben.

    Um Code ohne Überschrift und ohne Zeilennummern zu kopieren, nutzen Sie das Dokumente-Icon rechts oben im Quellcode-Kasten.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!