Suche Extension: Text erweitern

Hallo,

ich suche eine Extension - und zwar weiß ich nicht wie sich so etwas nennt. Ist aber denke ich recht einfach und dürfte es schon geben:

Ich möchte nur die ersten z.B. 150 Zeichen eines langen Textes anzeigen. Wenn der Text länger ist, dann soll dahinter/darunter das Wörtchen "mehr..." erscheinen. Beim klick darauf, soll sich der restliche Inhalt des Textes ausklappen.

Zuerst habe ich an das Inhaltselement Akkordeon gedacht, aber da gibt es ja nur die Überschrift die sich dann aufklappt. Bei mir soll ja ein Teil des Textes angezeigt werden, dass sich dann via javascript aufklappt (also nicht auf einer neuen Seite)....


Wie heißt sowas?

LG,
axlf

Hallo AxlF,

Du kannst doch ein Inhaltselement Text anlegen, in dem die ersten 150 Zeichen stehen. Darunter packst Du dann das Akkordeon mit dem restlichen Text.

Im Modul Nachrichten wird das über den Teaser gemanaged.

Auch im Artikel wird das über Teaser gemanaged :)

Ich meine halt sowas in der Richtung:

http://shakenandstirredweb.com/playg...ore-less-text/

mit einem Teaser hab ichs nicht hinbekommen, dass das ganze via JavaScript funktioniert und nicht als Link aus dem Teaser zum Artikel...

für sowas sollte ein Accordion genau das richtige Instrument sein...

Zitat:

---

Zitat von magicsepp

für sowas sollte ein Accordion genau das richtige Instrument sein...

---

so wie ich das Akkordeon verstehe, gibt es nur die Überschrift, die dann bei anklicken aufklappt. Ich benötige aber einen Text.
Ich würde jetzt ungern den text aufsplitten müssen. Also das Preview als Textelement und dann extra nochmal ein Akkordeon anlegen... Da ich rel. viele Texte so Einstellen soll, wäre eine passende Extension schon sehr hilfreich.

Ich hätte gerne aber z.B. ein Inhaltselement, bei dem man vielleicht sogar einstellen kann wieviele Zeichen angezeigt werden, und der "mehr..." link dann automatisch erzeugt wird.

Gibt es sowas?

Hallo AxlF

Wie hast Du das gelöst?
Ich suche dasselbe...

hier gibt es ein mootools Lösung: https://github.com/magicweb/ExpandableText

Danke für den Link.
Wie füge ich das jetzt in Contao ein? Sorry, hab sowas noch nie gemacht...

- PHP-Datei anlegen und den Script-Code reinschreiben
- Die Datei z. B. expandable_js.php nennen und per FTP in den /templates-Ordner laden
- im Modul "Eigener HTML-Code" das Insert Tag {{file::expandable_js.php}} schreiben und dieses Modul im Seitenlayout einbinden

Hallo.

Ich suche genau die Funktionalität, die letztgenanntes Script bietet.
Das funktioniert auch soweit. Problem: Es läßt sich nur auf IDs anwenden und somit ja quasi nur einmal auf einer Seite.
Ich möchte das aber für mehrere Textblöcke auf einer Seite nutzen - somit käme nach meinem Verständnis das Nutzen von Klassen in Frage.

Weiß jemand ob sich das Script entsprechend umschreiben ließe? Ich hab schon rumprobiert... aber aufgrund meiner begrenzten JS Fähigkeiten, hat das zu nichts geführt. Klassen werden doch mit $$ anstatt $ für IDs angesprochen, richtig? Ich hab schon probiert das entsprechend auszutauschen... ohne Erfolg.

Der Code des Scripts lautet:

Code:

---

var ExpandableText = new Class({
initialize: function(options) {
options = $merge({
'more': "[more...]",
'less': "[less]",
height: 45,
width: 300
}, options);
this.divId = options.divId;
this.more = options.more;
this.less = options.less;
this.baseHeight = options.height;
this.baseWidth = options.width;
},

start: function(){       
        $(this.divId).setStyle('height', "");
        $(this.divId).setStyle('width', this.baseWidth);
var coordinates = null;
        coordinates = $(this.divId).getCoordinates();
        if(coordinates.height <= this.baseHeight){       
                return;
        }
        this.longText = $(this.divId).innerHTML;
var splitText = this.longText.split(' ');
$(this.divId).innerHTML = '';
var limit = true;
var i = 0;
var text = "";
this.shortText = "";
for (i=0; i<splitText.length&&limit; i++) {
text += (splitText[i]+" ");
$(this.divId).innerHTML = (text+this.more);
coordinates = $(this.divId).getCoordinates();
if(coordinates.height > this.baseHeight){       
limit = false;
}
else {
this.shortText = text;       
}
}
$(this.divId).innerHTML = this.shortText;
if (i < splitText.length)
this.addMoreLink();
},

addMoreLink: function(){
var a = new Element('a', {
events: {click: this.moreClick.bind(this)},
href: 'javascript:;'
});
a.appendText(this.more);       
a.injectInside($(this.divId));
},

addLessLink: function(){
var a = new Element('a', {
events: {click: this.lessClick.bind(this)},
href: 'javascript:;'
});
a.appendText(this.less);
a.injectInside($(this.divId));
},       

lessClick: function(){
$(this.divId).innerHTML = this.shortText;
this.addMoreLink();
},

moreClick: function(){
$(this.divId).innerHTML = this.longText;
this.addLessLink();
}

});

---

Aufgrufen wird so:

Code:

---

window.addEvent('domready', function(){
    new ExpandableText({
        divId: "textBlock",
        height: 45,
        width: 600
    }).start();
});

---

Danke!

Gruß
Thomas

Hallo Thomas,

bei Klassen würden dann ja alle Blöcke auf einmal reagieren.

Mehrere Blöcke auf einer Seite gehen unabhängig mit jeweils eigener divId, dazu einfach die function ein weiteres Mal mit neuer divID und ggf. neuer Größe aufrufen.

Grüße

Hi.

Ok, das verstehe selbst ich. ;)
Danke für den Tipp... ist zwar bei vielen Textblöcken nicht ganz zu einfach, dafür aber flexibler.

Gibts eigentlich irgendwelche Nachteile wenn ich den Aufruf direkt am Textelement via HTML - Element mache? Außer das ich das script Tag freigeben muss?

Gruß
Thomas

Hallo.

Ich hab das jetzt wie vorgeschlagen mal umgesetzt.

Nun habe ich aber die klappbaren Blöcke in sections gepackt (via semantic_html5 - damit ich innerhalb des Blocks mehrere Inhaltselelmente nutzen kann). Jeweils dahinter (via HTML Element) erfolgt der Scriptaufruf. Das funktioniert.
Innerhalb befindet sich auch ein Galerieelement mit Fotos. Leider funktioniert die Öffnung in der Lightbox nicht mehr nach aufklappen des Blocks...

Hat da jemand Ahnung und kann das mal beäugen? Bin für Tipps sehr dankbar, da ich nicht so fit in JS bin.

Link zum Problem

Gruß
Thomas

Pardon... aber ich muss ausnahmsweise mal pushen, weil meine eigenen Bemühungen einfach nicht wirken... :(

@magicsepp
Hast du vielleicht eine Idee?

Dankeschön.

Hallo Thomas,

ich frage mich gerade wo sind die mootools-more und das mediabox.js Scripte für die Lightbox?
Bei wir kommt nur die slimbox als Script.
Kannst du mal inm Seitenlayout checken ob das mit Fallback übrhaupt geladen wird.

Grüße

Hi.

Danke für deine Rückmeldung.

Also Mootools selbst wird/wurde geladen. Die Slimbox hatte ich nur mal eingestellt, weil ich testen wollte anstatt der Mediabox.

mootools-more? Da steh ich jetzt auf dem Schlauch... für die Lightbox muss ich doch nicht mehr als die beiden Sachen im Seitenlayout aktivieren, oder?

Im übrigen gehen die Lightboxen ja, wenn die Thumbs nicht im versteckten Teil liegen. Ich hab oben mal zwei Bilder außerhalb des Expand Scripts eingebaut zur Veranschaulichung.

Hmm.

Gruß

mootools-more hängt an den mootools mit dran und ist nicht das Problem.
Ich bekomm vom Script noch Fehler...
TypeError: $(...) is null
$('gototop').set('opacity','0').setStyle('display' ,'block');

Ok. Das heißt?

Das scheint mir eher vom SmoothScroll Script zu kommen (gototop). Wenn ich das entferne, ändert das an der fehlenden Lightbox-Funktion leider auch nichts.

das heisst die Scripte lassen sich in der Form nicht verschachteln.

Ok, dann muss ich mir was einfallen lassen... so ist das natürlich Mist.

Danke für deine Hilfsbereitschaft.

Gruß
Thomas