Geile Erklärung, Peter! Damit habe ich es hinbekommen :)! -----Ursprüngliche Nachricht----- Von: typo3-german-boun...@lists.typo3.org [mailto:typo3-german-boun...@lists.typo3.org] Im Auftrag von Peter Linzenkirchner Gesendet: Donnerstag, 14. Juni 2012 15:58 An: German TYPO3 Userlist Betreff: Re: [TYPO3-german] tt_news
Hallo Björn, ich kenne auch nur die Erläuterung dort auf der Seite: http://jqueryfordesigners.com/simple-jquery-spy-effect/ Das Grundprinzip ist, jQuery in die TYPO3-Installation einzubinden (via Typoscript oder über eine Extension). Danach das Template von tt_news anpassen (z. B. LATEST): Das hier ganz oben rein: <script type="text/javascript" charset="utf-8"> $(function () { $('ul.spy').simpleSpy(); }); (function ($) { $.fn.simpleSpy = function (limit, interval) { limit = limit || 5; interval = interval || 6000; return this.each(function () { // 1. setup // capture a cache of all the list items // chomp the list down to limit li elements var $list = $(this), items = [], // uninitialised currentItem = limit, total = 0, // initialise later on height = $list.find('> li:first').height(); // capture the cache $list.find('> li').each(function () { items.push('<li>' + $(this).html() + '</li>'); }); total = items.length; $list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit }); $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove(); // 2. effect function spy() { // insert a new item with opacity and height of zero var $insert = $(items[currentItem]).css({ height : 0, opacity : 0 }).prependTo($list); // fade the LAST item out $list.find('> li:last').animate({ opacity : 0}, 1000, function () { // increase the height of the NEW first item $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000); // AND at the same time - decrease the height of the LAST item // $(this).animate({ height : 0 }, 1000, function () { // finally fade the first item in (and we can remove the last) $(this).remove(); // }); }); currentItem++; if (currentItem >= total) { currentItem = 0; } setTimeout(spy, interval) } spy(); }); }; })(jQuery); </script> Danach die Ausgabe von tt_news in ein <ul class="spy"> .... </ul> packen. Und jedes News-Item in <li>...</li>, das müsste es eigentlich schon gewesen sein. Im Prinzip ist das auf der Seite ganz gut beschrieben; es muss alles einfach in das Template von tt_news rein. --- Ansonsten kannst du dir das hier noch anschauen: http://typo3.org/extension-manuals/t3s_jslidernews/3.0.12/view/1/1/#id1485226 Ich kenne es nicht, aber es sieht gut aus ... http://www.t3solution.de/ext/t3s-jslidernews/news-slider-stil-5.html Gruß Peter Am 14.06.2012 um 15:40 schrieb Björn Hahnefeld: > Hallo Peter, > > ein sehr schöner und geschmeidiger Effekt, der mich sehr anspricht. > Allerdings habe ich keine so rechte Ahnung, wie man das in tt_news > integrieren bzw. damit kombinieren könnte. Gibt es dazu irgendwo ein How-To? > > Viele Grüße > > Björn > > -----Ursprüngliche Nachricht----- > Von: typo3-german-boun...@lists.typo3.org > [mailto:typo3-german-boun...@lists.typo3.org] Im Auftrag von Peter > Linzenkirchner > Gesendet: Donnerstag, 14. Juni 2012 15:13 > An: German TYPO3 Userlist > Betreff: Re: [TYPO3-german] tt_news > > Hallo Björn, > > das würde ich über JavaScript machen, z. B. > http://jqueryfordesigners.com/simple-jquery-spy-effect/ > > Gruß > Peter > > Am 14.06.2012 um 14:56 schrieb Björn Hahnefeld: > >> Hallo zusammen, >> >> >> >> gibt es eine Möglichkeit, eine bestehende tt_news-Konfiguration aufzuwerten? >> Und zwar dahingehend, dass die Meldungen sich automatisch ein- und >> ausblenden bzw. auf- oder abrollen? >> >> >> >> Viele Grüße >> >> >> >> Björn >> >> _______________________________________________ >> TYPO3-german mailing list >> TYPO3-german@lists.typo3.org >> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german > > -- > Xing: http://www.xing.com/profile/Peter_Linzenkirchner > Web: http://www.typo3-lisardo.de > Facebook: http://tinyurl.com/lisardo-multimedia > > _______________________________________________ > TYPO3-german mailing list > TYPO3-german@lists.typo3.org > http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german > _______________________________________________ > TYPO3-german mailing list > TYPO3-german@lists.typo3.org > http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german -- Xing: http://www.xing.com/profile/Peter_Linzenkirchner Web: http://www.typo3-lisardo.de Facebook: http://tinyurl.com/lisardo-multimedia _______________________________________________ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german _______________________________________________ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
