Seiten im Lightbox-Overlay öffnen

[RobertB]

Ich hab da mal ne Frage. Vielleicht total simpel, aber bekomm es momentan nicht hin.

Wie kann ich in einem Artikel einen Link mit lightbox4ward erstellen? Also ich habe

TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT
TEXT LINK mit Lightbox
TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT

Das alles in einem Artikel.

link_im_text.PNG

Wenn ich es als einzelnes Element erstelle geht alles ohne Problem. Aber wie bekomm
ich solch ein Link mitten im Text hin?

Schonmal vielen Dank

[xchs]

Wenn Du "XHTML" im "Ausgabeformat" eingestellt hast, muss im Anker-Element das Attribut rel="lightbox" vorhanden sein, wenn dagegen als Ausgabeformat "HTML" verwendet wird, dann data-lightbox="xxx".

Im RTE TinyMCE wird das Ausgabeformat beim Verlinken noch nicht richtig berücksichtigt, wird aber voraussichtlich in der nächsten Bugfix-Version behoben sein.

[RobertB]

Sorry für die späte Reaktion.

Also ich nutze Contao 2.11.2 mit HTML 5, also html.

Ich habe einen Artikel und dort als Elementtyp "Text" gewählt. So richtig habe ich jetzt nicht verstanden wie ich dort ein Lightbox-Link hin bekomme.

<p>Die Gesellschaften haben hier einen erheblichen Spielraum,deshalb sollte bei neuen aber auch bei bestehenden Verträgen
die Auskunft eines Fachmanns, eines unabhängigen Mehrfachagenten oder Maklers hinzugezogen werden. 
<a title="Dienstunfähigkeit - weitere Details" href="{{link_url::20}}">Erfahren Sie hier mehr über Ausschlüsse und gängige Klauseln.</a></p>

Das ist mein Ausgangscode, wobei der Link als Lightbox dargestellt werden soll.

[xchs]

Du brauchst nur im Anker-Element das data-lightbox Attribut ergänzen:

<a title="Dienstunfähigkeit - weitere Details" href="{{link_url::20}} data-lightbox="foo">Erfahren Sie hier mehr über Ausschlüsse und gängige Klauseln.</a>

[RobertB]

Ich habe den Link so eingebaut. Jetzt löscht er automatisch immer alles nach data-lightbox=" ... er schneidet das foo"> einfach weg. Woran liegt das?!
Also der Code sieht dann so aus:

<a title="Dienstunfähigkeit - weitere Details" href="{{link_url::20}} data-lightbox=">Erfahren Sie hier mehr über Ausschlüsse und gängige Klauseln.</a>

[xchs]

Ah, sorry, ich hatte wohl versehentlich ein Anführungszeichen rausgelöscht. Der Wert im href-Attribut muss natürlich in Anführungszeichen stehen:

<a title="Dienstunfähigkeit - weitere Details" href="{{link_url::20}}" data-lightbox="bar">Erfahren Sie hier mehr über Ausschlüsse und gängige Klauseln.</a>

[RobertB]

Oh man ... das hätte mir auch selbst auffallen können *schäm*

Der Link funktioniert nun schon mal. Jedoch öffnet er nun die komplette Seite in der Lightbox, also mit Menü Header usw. Er soll aber nur die Artikel der gewünschten Seite in der Lightbox anzeigen. Bekomm ich das irgendwie hin? Ebenso würde ich gern eine eigene Größenangabe machen? Geht das?!

Gruß und schon mal vielen Dank für die Geduld!

[xchs]

Jedoch öffnet er nun die komplette Seite in der Lightbox, also mit Menü Header usw. Er soll aber nur die Artikel der gewünschten Seite in der Lightbox anzeigen. Bekomm ich das irgendwie hin?

Dafür müsste man für diese Seite ein eigenes Seitenlayout erstellen ohne Header, Navigationsmodul usw. usf.

Ebenso würde ich gern eine eigene Größenangabe machen? Geht das?!

Auch das geht. Es gibt eine Erweiterung [lightbox], wo Du alle möglichen Einstellungen bequem im Backend vornehmen kannst. Damit könnte man dann auch nur einzelne Artikel im Lightbox-Overlay anzeigen lassen und für das Overlay-Fenster die gewünschte Größe angeben. Allerdings - so fürchte ich - funktioniert die Erweiterung aktuell nur für die "XHTML" Ausgabeformate. Man müsste also für HTML5-Markup - wie oben erwähnt - anstelle von rel="lightbox" überall das data-lightbox="..." ersetzen.

[RobertB]

Ich sehe gerade das du einen neuen Thread daraus gemacht hast. War gerade etwas verwundert

Gut, also funktioniert das mit der Erweiterung "lightbox4ward" nicht so einfach, sondern nur wenn ich
den Link seperat erstelle über "Elementtyp".

Würde es denn Sinn machen solch einen Link als Modul zu erstellen und dann im Artikel einfach per Inserttag
einzufügen?

[xchs]

Würde es denn Sinn machen solch einen Link als Modul zu erstellen und dann im Artikel einfach per Inserttag
einzufügen?

Würde wahrscheinlich nur dann Sinn machen, wenn Du diesen Link öfters (auf verschiedenen Seiten/Artikeln) brauchst. Wenn das hingegen nur für diese eine Seite zutrifft, dann geht es vermutlich schneller, dies direkt im TinyMCE zu machen. Wie gesagt, im nächsten Bugfix-Release sollte dann ja auch das data-lightbox Attribut korrekt im TinyMCE gesetzt werden, sodass man dann auch nicht mehr nachträglich ins Markup eingreifen müsste. Damit könnten dann wohl auch (unbedarfte) Redakteure die Verlinkung über die entsprechende Funktion im TinyMCE selbst vornehmen (sofern das überhaupt notwendig ist).

[RobertB]

Okay, danke für deine Unterstützung. Werde mal schauen was ich am besten mache.

Frohe Ostern

[Anke]

Hallo,

ich würde gerne Bestätigungsseiten in der Lightbox anzeigen lassen, z.B. nach der User-Registrierung, nach Absenden eines EFG-Formulars etc. Gibt es eine solche Möglichkeit?

Grüße,
Anke

[pyretta]

Hallo Anke,

ich würde gerne Bestätigungsseiten in der Lightbox anzeigen lassen, z.B. nach der User-Registrierung, nach Absenden eines EFG-Formulars etc. Gibt es eine solche Möglichkeit?

Ich habe das mit einem jQuery-Script gelöst. In meinem Fall betrifft es das Kommentarformular.

Diese Code-Zeile

<p class="confirm">?php echo $this->confirm; ?</p>

durch diesen Code ersetzen:

<div id="popupconfirm_box">
    <a id="popupBoxClose">X</a>  
    <p class="confirm"><?php echo $this->confirm; ?></p>
</div>
<script type="text/javascript">
    $(function() {
        loadPopupBox();
        
        $('#popupBoxClose').click( function() {           
            unloadPopupBox();
        });
        
         $('#wrapper').click( function() {
            unloadPopupBox();
        });
        
        function unloadPopupBox() { 
            $('#popupconfirm_box).fadeOut("slow");
        }   
        
        function loadPopupBox() {   
            $('#popupconfirm_box').fadeIn("slow");
        }              
    });
</script>

Beispiel-CSS:

.ce_comments .form #popupconfirm_box {
    max-width:600px;
    left:20%;
    right:20%;
    top:20%;
    position:fixed;
    display:none;
    padding:15px;
    background-color:#fff;
    -webkit-box-shadow:2px 1px 2px 2px rgba(0,0,0,0.3);
    box-shadow:2px 1px 2px 2px rgba(0,0,0,0.3);
    border:2px solid #e5e5e5;
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
    z-index:10000;
}

.ce_comments .form #popupconfirm_box #popupBoxClose {
    right:5px;
    top:5px;
    position:absolute;
    font-size:1.2em;
    color:#d10000;
    font-weight:800;
}

Verwendetes Template: mod_comment_form.html5
Contao-Version: 3.1

Vielleicht hilft Dir das ja auch etwas weiter

Liebe Grüße,
pyretta