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