[TYPO3-german] tt_news

[Peter Linzenkirchner]

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-bounces at lists.typo3.org [mailto:typo3-german-bounces at 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 at 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 at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german at 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