Eigenes Modul erfordert unterschiedliche JavaScripts im HTML-Header - wie umsetzen?

**Mischa** · 28.03.2010, 10:59

Hallo,

ich bin neu hier und arbeite erst seit kurzer Zeit mit TYPOlight.

Jetzt möchte ich eine Seite mit einer Slideshow (Mootools "Slideshow 2!") umsetzen.

Die Slideshow wird auf jeder Seite eingebunden, jedoch sollen die Inhalte variieren. Da ich den Inhalt der Show (also die Auswahl der Fotos) für diese Mootools-Klasse jedesmal im HTML-Header festlegen muss, weiß ich nicht wie ich das bei TYPOlight händeln soll. Muss ich für jede Seite mit eigener Bildershow dann ein eigenes Layout anlegen? Im Seiten-Layout habe ich ja die Möglichkeit, eigene <head>-Tags zu definieren. Gibt es noch andere Möglichkeiten?

Liebe Grüße, Mischa

**do_while** · 28.03.2010, 11:46

Hallo Mischa,

Du könntest in etwa so lösen, wie in diesem Tutorial angegeben:
http://https://contao.org/projects/t...micHeaderImage

Du musst diesen "Trick" nur in die Slideshow2 portieren.

**Andreas** · 28.03.2010, 17:37

Oder in der fe_page.tpl die entsprechenden Seiten-IDs mit PHP abfragen und die unterschiedlichen Codes entsprechen der IDs eintragen. Könnte übersichtlicher sein, als viele Seitenlayouts anzulegen und im BE zuzuweisen. Kommt auf die Situation an.

PHP-Code:


// Seiten-IDs mit code 1

$code1 = array(12, 15, 33);

// Seiten-IDs mit code 2

$code2 = array(1, 2, 5, 7);

if(in_array(...

So könnte man z.B. schnell mal neue Seiten hinzufügen, löschen, oder verschieben.

**Mischa** · 28.03.2010, 20:47

Hallo Hagen, hallo Andreas,

ich hab es jetzt mal mit den Insert Tags gelöst. Ich passe den Pfad zu den Grafiken mit dem Insert Tag {{env::page_alias}} als Folder-Name an.

Und so gehts:
Zuerst werden die Fotos jeweils in einen Ordner gepackt, der als Name den Alias der Seite bekommt, in der sie angezeigt werden sollen. Dann wird in den Pfad zum Foto-Verzeichnis als Platzhalter das Insert-Tag mit der Variablen "page_alias" eingesetzt. Fertig. :-)

Beispiel:
Die Fotos für die Startseite liegen im Pfad "images/slideshows/home/" der Seitenalias der Startseite heißt "home". Im Aufruf der Funktion steht als Pfad "images/slideshows/{{env::page_alias}}/"
Der Code im HTML-Header sieht folgendermaßen aus:

Code:

<link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript">		
//<![CDATA[
  window.addEvent('domready', function(){
    var data = {
      '1.jpg': { caption: 'Beschreibung Bild 1' }, 
      '2.jpg': { caption: 'Beschreibung Bild 2' }, 
      '3.jpg': { caption: 'Beschreibung Bild 3' }, 
      '4.jpg': { caption: 'Beschreibung Bild 4' }
    };
    var myShow = new Slideshow('show', data, {controller: false, height: 400, hu: 'images/slideshows/{{env::page_alias}}/', thumbnails: false, width: 780});
  });
//]]>
</script>

Also, vielen Dank für Eure schnelle Hilfe!

Liebe Grüße!

PS: Ich finde die Möglichkeiten, die sich durch diese Insert-Tags bieten, einfach großartig. Das hat man nicht bei vielen Open Source-WCMS.