Wort in Textelement mit Lightbox verlinken

Hallo


Ich möchte in einem Text (Textelement eines Artikels) ein Wort mit einem anderen Text (z.B. Textelement eines anderen Artikels) verlinken. Beim Anklicken des verlinkten Wortes soll der verlinkte Text direkt in einer Lightbox dargestellt werden.

Wie lässt sich das umsetzen?

Umgebung: Contao 3.1.4, Lightbox4ward 2.0.0 stable 4.

Danke für alle Hilfe.

PS: Vielleicht erklärt der Hinweis Nicht erprobt für Contao 3.1.4 zu lightbox4ward alles. Wobei die Erweiterung bei den Bildgalerien und direkter Verlinkung mit Artikeln funktioniert.

Ich erlaube mir, meine Frage nochmals anzuschieben. Vielleicht ist sie, weil das Problem nicht zwingend mit lightbox4ward zu tun hat, am falschen Ort platziert.

Nochmals: Danke für alle Hilfe.

Ich kenne die lightbox4ward nicht, aber du kannst es ja mal mit der mediabox von Contao versuchen, da ist das recht einfach.

Grundsätzlich hast du 3 Möglichkeiten einfachen HTML-Inhalt in der Mediabox zu zeigen.

1. Du holst den Inhalt per Ajax.
2. Du holst eine komplette Seite.
3. Der Inhalt ist bereits (versteckt) auf der Seite. http://iaian7.com/webcode/mediaboxAdvanced#inline

Punkt 3 ist der einfachste.

1. Binde das CE über ein Include-Element auf der Seite ein wo auch der Link ist.
2. Gib ihm eine ID die mit mb_ beginnt - z.B. mb_ce23.
3. Gib ihm ne CSS-Klasse zum Verstecken - "hide" z.B.
4. Gib dem Link im RTE die Attribute href="#mb_ce23" rel="lightbox[inline 600 100]"

Hallo Andreas

Bis vor Kurzem habe ich Ajax ausschliesslich mit Fussball und Putzmittel assoziiert... Wobei ich immerhin die Erweiterung ajax installiert habe.

Herzlichen Dank für Deine Antwort.

Ich werde mich dahinter machen. Ziel ist, das Wort "Erweiterungen" auf meiner Übungsseite so zu verlinken.

Ich wollte ja auch "XMLHttpRequest" schreiben, aber ich dachte, mit Ajax kannst du mehr anfangen ;)
http://de.wikipedia.org/wiki/Ajax_%28Programmierung%29
http://de.wikipedia.org/wiki/XMLHttpRequest

Aber für das bisschen auf deiner Seite lohnt sich das doch nicht. Kannst ja auch ein CE-Include in nem Accordion präsentieren, oder so, wie ich vorgeschlagen hatte.

Punkt 3 umgesetzt - es hat funktioniert.

Vielen Dank!

PS: Warum muss die ID ausgerechnet mit "mb" beginnen, bzw, woher weiss "man" das? Antwort hier gefunden.

Ich muss diesen Faden nochmals aktivieren.

Vor Jahren habe ich die Verlinkung von Text, der in einer Lightbox angezeigt werden soll, eingerichtet, so wie es @Andreas in #3 beschrieben hat. Es hatte mal funktioniert, tut es aber nicht mehr.
Nun wollte ich die Verlinkung reparieren. Leider kriege ich das nicht mehr hin. Übrigens: Verlinkungen via Link-Inhaltselement funktionieren - der Text wird in der Lightbox angezeigt.

Konkret: Was muss ich im Linkfenster des TinyMCE ins Feld "URL" schreiben? Wie werden die Attribute mitgegeben?


Nachtrag 1: Ich verwende nicht mehr die in #1 erwähnte Erweiterung "lightbox4ward", sondern die im Seitenlayout aktivierte "moo_mediabox". So zumindest interpretiere ich meine Recherche im Quelltext.

Ich würde dir empfehlen, die mediabox nicht mehr zu verwenden, da sie schon lange outdated ist. Lade also in deiner Installation kein MooTools, sondern jQuery und benutze die Colorbox.

Um dir eine gute Lösung zu bieten müsste man den Kontext kennen. Warum möchtest du verstecktes Inline-HTML bei Bedarf anzeigen? Hört sich nach ner Tooltips-Lösung an. Footnotes oder Glossar wäre auch ein denkbarer Kontext.

Trotzdem hier mal ein Beispiel, wie man mit der Colorbox auf der Seite befindliches (ausgeblendetes) HTML anzeigen könnte.

\templates\j_colorbox-plus-inline.html5

HTML-Code:

---

<?php

// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'assets/colorbox/css/colorbox.min.css|static';

?>

<script src="<?= $this->asset('js/colorbox.min.js', 'contao-components/colorbox') ?>"></script>
<script>
  jQuery(function($) {
    $('a[data-lightbox]').map(function() {
      $(this).colorbox({
        // Put custom options here
        loop: false,
        rel: $(this).attr('data-lightbox'),
        maxWidth: '95%',
        maxHeight: '95%'
      });
    });

/* inline solution START */
    var
      inlineStyle = `
        <style>
          .cbInline {
            cursor: help;
            background-color: coral;
            color: white;
          }
          .cbInlineContent {
            display: none;
            color: darkslategray;
            background-color: white;
          }
          #colorbox .cbInlineContent {
            display: block;
          }
        </style>
      `;

    $('head').append(inlineStyle);

    // show inline content
    $('.cbInline').map(function() {
      $(this).colorbox({
        // Put custom options here
        inline: true,
        href: '.cbInlineContent'
      });
    });
/* inline solution END */

  });
</script>

---

Ist das original Template von 4.11.1 mit dem zusätzlichen Code zwischen den Kommentaren.

Das CSS sollte dann natürlich direkt in eine CSS-Datei, habe es nur hier rein gemacht um schnell mal zu testen.

Im CE-Text dann einfach das hier eintragen.

HTML-Code:

---

<p class="cbInline">show hidden inline content</p>
<p class="cbInlineContent">I am hidden inline content</p>

---

Alles was es im Template zusätzlich benötigt wäre also das hier:

PHP-Code:

---

$('.cbInline').map(function() {
  $(this).colorbox({
    inline: true,
    href: '.cbInlineContent'
  });
}); 


---

Hier noch die Doku zu den Einstellungen der Colorbox https://www.jacklmoore.com/colorbox/