[TYPO3-german] tt_news

Fri Jun 15 14:18:58 CEST 2012

Wenn ich das Teil auf "limit 1" stelle, weil ich nur ein Element anzeigen will (und nicht 5 untereinander), geht leider gar nichts mehr... derweil hat bis dahin die Implementierung super geklappt... :(

--					
					5 = HTML
					5 {

						value (							
							<script type="text/javascript" charset="utf-8"> $(function () {
								$('ul.spy').simpleSpy();
							});

							(function ($) {

							$.fn.simpleSpy = function (limit, interval) {
								limit = limit || 1;
								interval = interval || 1000;

								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>
						)
					}
--

-----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: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-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

_______________________________________________
TYPO3-german mailing list
TYPO3-german at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german