Slideshow2: Bildunterschriften/Captions mit Cufón formatieren

[sternenatem]

Hallo,

ich setzte bei meiner Website Cufón zur Schriftersetzung und Slideshow 2 ein. Leider will es mir nicht gelingen, auch die Bildunterschriften bzw. Captions von Cufón formatieren zu lassen. Wahrscheinlich hängt das damit zusammen, dass diese per Javascript eingeblendet werden und nicht im statischen Quelltext der Website zu finden sind.

Per CSS kann ich die Captions zwar formatieren, jedoch dieses Problem nicht lösen und in JavaScript kenne ich mich viel zu wenig gut aus, als dass ich wüsste, wo in der „slideshow.js“ ich was ändern müsste.
Ich habe auch versucht, die Captions per PHP („<?php echo $this->captions; ?>“) in den Quelltext schreiben zu lassen, jedoch ohne Wirkung.

Gibt es also eine Möglichkeit, die Bildunterschriften/Captions ohne JavaScript anzeigen zu lassen bzw. direkt in den Quelltext zu schreiben?

Ich hoffe, ihr könnt mir helfen.

Sternenatem

[sternenatem]

Wahrscheinlich wird das mit dem Quelltext-Schreiben gar nicht gehen, da die Slideshow ja dynamisch die Bilder wechselt und der statische Quelltext gar nicht geändert wird.

Auf der Website von Cufón wird bei auszuwechselndem AJAX-Inhalt „Cufon.refresh“ und folgender Code für MooTools vorgeschlagen:

$('id').set('load', { onSuccess: Cufon.refresh }).load('/feed');

Was ich zum Thema auch noch gefunden habe: Cufon and MooTools Slideshow.

Wie und vor allem wo soll ich das einfügen?

[Schlauchbeutelmaschine]

Hallo,

leider kann ich dir dazu auch nicht viel mehr Infos geben, aber das was du da gepostet hast ist wohl der richtige Ansatz.

Wenn du das einfach als Javascript Befehl bei Cufon dazu gibst klappt es dann?

Ansonsten würde ich auf @font-face umsteigen.

[sternenatem]

Wenn du das einfach als Javascript Befehl bei Cufon dazu gibst klappt es dann?

Ich weiss eben leider nicht, wo genau ich folgendes hinschreiben muss:

                function updateCaption() {
                        Cufon('div.slideshow-captions', {}, false);
                }

                identityPfolio.slideshow.retrieve('captions')
                        .addEvent('update', updateCaption);
                        .get('morph').addEvent('start', updateCaption);

oder

$('id').set('load', { onSuccess: Cufon.refresh }).load('/feed');

Ich habe es als Script am Ende (im eigenen JavaScript-Bereich) und im Header nach allen Cufon-Eintragen versucht. Auch in der „slideshow.js“ habe ich es am Schluss vor den letzten Klammern eingetragen, ohne Erfolg.

Wie geschrieben, ich habe nicht viel Ahnung von JavaScript. Also benötige ich Hilfe, wo ich das genau platzieren muss, damit es greift.

Ansonsten würde ich auf @font-face umsteigen.

Das wäre eine Möglichkeit, allerdings bin ich mir da noch etwas unsicher, wegen den vielen Formaten. Wenn ich aber sonst keine Lösung finde, werde ich das mal versuchen. Danke.

[Schlauchbeutelmaschine]

Also du müsstest wahrscheinlich noch den Namen der Slideshow austauschen:

NAME.slideshow.retrieve('captions') 

Dann sollte es klappen.

[sternenatem]

Danke für den Tipp.

Ich habe die Seite des Fragestellers im verlinkten Google-Groups-Thread von oben besucht und gesehen, dass er folgende Funktion für Cufon in seinem Quelltext verwendet hat:

function() { Cufon.replace('.slideshow-captions'); }

In der zur Slideshow2 gehörenden Datei „slideshow.js“ gibt es ja folgende Einträge:

	options: {/*
		onComplete: $empty,
		onEnd: $empty,
		onStart: $empty,*/
		captions: false,
                ...

Und dort habe ich einfach mal versuchweise diese Funktion eingesetzt und siehe da, die Bildunterschriften werden jetzt ersetzt.

	options: {
		onComplete: function() { Cufon.replace('.slideshow-captions'); },
/*		onEnd: $empty,*/
/*		onStart: $empty,*/
		captions: false,
                ...

Jetzt muss ich nur noch diese Einblend-Animation der Bildunterschriften abschalten und dann sollte die kurze Verzögerung der Schriftersetzung durch Cufon fast nicht mehr ins Gewicht fallen. Vielleicht gibt es da aber auch noch eine Lösung bzw. vielleicht müsste ich die obige Funktion direkt bei den „Captions“ einbauen.

Jede Hilfe ist willkommen.