Contao-Camp 2024
Ergebnis 1 bis 8 von 8

Thema: Wort in Textelement mit Lightbox verlinken

  1. #1
    Contao-Fan
    Registriert seit
    17.11.2012.
    Beiträge
    528

    Standard 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.
    Geändert von peter.fl (01.03.2021 um 11:14 Uhr) Grund: Titel und Text aktualisiert

  2. #2
    Contao-Fan
    Registriert seit
    17.11.2012.
    Beiträge
    528

    Standard

    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.

  3. #3
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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]"
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  4. #4
    Contao-Fan
    Registriert seit
    17.11.2012.
    Beiträge
    528

    Standard

    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.

  5. #5
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  6. #6
    Contao-Fan
    Registriert seit
    17.11.2012.
    Beiträge
    528

    Standard

    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.
    Geändert von peter.fl (23.10.2013 um 22:10 Uhr) Grund: Antwort gefunden

  7. #7
    Contao-Fan
    Registriert seit
    17.11.2012.
    Beiträge
    528

    Standard

    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.
    Geändert von peter.fl (01.03.2021 um 22:45 Uhr) Grund: Nachtrag 1

  8. #8
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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({
        
    inlinetrue,
        
    href'.cbInlineContent'
      
    });
    }); 
    Hier noch die Doku zu den Einstellungen der Colorbox https://www.jacklmoore.com/colorbox/
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •