Hilfestellung zu ImageScrOOler

Grüß Euch,

habe es endlich geschafft meine erste mit - jetzt heißt es ja - Contao umgesetzte Seite online zu stellen. Zwar fehlt noch der Feinschliff und auch noch Content, aber das wird bald kommen.

Zu meinem Problem: Ich suche für Sponsoren-Logos einen Effekt wie hier vorgestellt http://fragged.org/dev/scroller.php
An anderer Stelle hier im Forum wird auch darüber diskutiert wie man diesen Effekt in Zusammenhang mit einem anderen Script kombinieren kann. Brauche ich denke ich nicht.

Die Logos sind aktuell einfach per HTML als Modul eingebunden. Es kommen noch ein paar hinzu.

Bin noch sehr frisch mit Contao. Wie binde ich denn ein solches Script ein?

Würde mich sehr freuen wenn mir jemand hiermit helfen könnte.

Im Prinzip ist es nicht schwer, da es ein MooTools Skript sogar recht einfach.

Erstell dir unter Templates ein neues moo_*.tpl bennene es zB als
moo_imageScrOOler.tpl

Dort schreibst du deinen ganzen JS Aufruf ein, eben wie auf der Seite beschrieben.
Anschließend musst du dieses nur noch beim Seitenlayout hinzufügen (dort gibt es dann eine Checkbox wo du dein tpl anhaken kannst.)
Schon hast du das Skript im Frontend.

Leider haut das so nicht ganz hin. Das Template wird nicht geladen. :eek: Wähle ich das Template aus, erscheint im Quelltext rein garnichts.

Entferne ich allerdings zum Test beispielsweise die Slimbox, ist die auch im Quelltext weg.

Ich sollte mich in JavaScript einarbeiten. Schiebe das schon so lange vor mir her. Genügt es wenn ich einfach nur diesen Teil in das Template kopiere und die nötigen Angaben ändere?

PHP-Code:

---

var mc, sdata =  []; // this should contain the JSON, look at Data control example
window.addEvents({
domready: function() {
// setup the class instance, mc is in global scope due to beforeunload...
mc = new ImageScrOOler(sdata, {
imagePath: "http://www.webtogs.co.uk/brands75/",
imageHeight: 85,
targetElement: $("scr"),
clickEvent: function(obj) {
window.location.href = "http://www.webtogs.co.uk" + escape(obj.url);
},
showProgress: false
});
}
}); 


---

Erkennt Contao Fehler (nutze aktuell noch TL 2.8.3) und bindet auf Grund dessen das Template nicht ein?

Hallo Nick,

Du musst 1. in sdata[] die anzuzeigenden Grafiken als Array eintragen.
Dann muss ein <div id="scr"></div> an der Stelle im Layout ingebaut werden, wo die Anzeige erfolgen soll.

Am Besten orientierst Du Dich am Quellcode der ImageScrOOler-Seite mit dem Beispiel. Dort findest Du alles, was Du brauchst um den ScrOOler in Betrieb zu bekommen.
Das JavaScript lagert man sinnvollerweise in eine JS-Datei aus, die dann im Header geladen werden muss.

Ich hake mich mal hier ein, weil es spontan der einzige Scroller ist der mit mooTools arbeitet und keine Lücken zwischen den Bildern macht...

Mein Code:

PHP-Code:

---

<script type="text/javascript">

var mc, sdata = [{image: '01.jpg', url: 'bremsklotzsohlen.html', title: 'Bremsklotzsohlen'},
{image: '02.jpg', url: 'a.html', title: 'a'},
{image: '03.jpg', url: 'a.html', title: 'a'},
{image: '04.jpg', url: 'a.html', title: 'a'},
{image: '05.jpg', url: 'a.html', title: 'a'},
{image: '06.jpg', url: 'a.html', title: 'a'},
{image: '07.jpg', url: 'a.html', title: 'a'},
{image: '08.jpg', url: 'a.html', title: 'a'},
{image: '09.jpg', url: 'a.html', title: 'a'},
{image: '10.jpg', url: 'a.html', title: 'a'},
{image: '11.jpg', url: 'a.html', title: 'a'},
{image: '12.jpg', url: 'a', title: 'a'},
{image: '13.jpg', url: 'a.html', title: 'a'},
{image: '14.jpg', url: 'a.html', title: 'a'},
{image: '15.jpg', url: 'a.html', title: 'a'},
{image: '16.jpg', url: 'a.html', title: 'a'}
};

C.quietDismiss = true;

window.addEvents({
    domready: function() 
    {
        // setup the class instance, mc is in global scope due to beforeunload...
        mc = new ImageScrOOler(sdata, {
        imagePath: "http://www.domain.de/tl_files/slider/",
        imageHeight: 75,
        targetElement: $("scr"),
        clickEvent: function(obj) {
            window.location.href = "http://www.domain.de/" + escape(obj.url);
        },
        showProgress: false
        });
    } // end domready
    });

</script> 


---

Ein div mit ID "scr" ist natürlich auch vorhanden, aber leider tut sich gar nix, nichtmal ein JS Error oder ähnliches...
Die JS Datei des Scrollers ist ebenfalls als zusätzliche Headangabe im Seitenlayout angegeben.

Hätte jemand spontan eine Idee?

/edit:
Man sollte natürlich auch intelligent sein und den JSON Array wieder schließen... Nervig dass Firebug bei sowas keinen Error wirft ;)