Witam serdecznie,
Zna ktoś może taki darmowy slideshow jak jest na stronie: http://turystyka.org.pl (chodzi mi o efekt automatycznego wyświetlania różnych obrazków)? Najlepiej coś łatwego w instalacji ;)
Z góry dziękuje za pomoc,
Northwest
Witam serdecznie,
Zna ktoś może taki darmowy slideshow jak jest na stronie: http://turystyka.org.pl (chodzi mi o efekt automatycznego wyświetlania różnych obrazków)? Najlepiej coś łatwego w instalacji ;)
Z góry dziękuje za pomoc,
Northwest
jQuery ma coś takiego, ale ja szukam też, ale dla Prototype + Scripto.aculo.us
Flash, Silverlight,15 minut roboty
Ja znalazłem lepsze (osobiście stronię od Flash'a i Silverlighta, gdyż są zbyt zasobożerne a dodatkowo to drugie jest słabo (na szczęście coraz lepiej, bo od flash'a IMHO lepsze) przenośne). Jest w JS i wymaga Prototype + Scripto.aculo.us lub jQuery i zwie się Horinaja. Użycie jest debilnie proste i ładnie opisane, jednak skrypt (u mnie [FF 3.6.8 LMDE] wymagał zakomentowania jednej linii).
Flash? Silverlight? Toz to porywanie sie z motyka na slonce. Cos takiego mozna samemu napisac, korzystajac z jQuery. Nie ma sensu uzywac do tego jakies kobyly, ktora ma 50kB ;) Podpowiem Ci: w jQuery metody fadeIn()
oraz fadeOut()
. Obrazy trzymasz w tablicy JavaScript. Do tego funkcja setInterval()
ktora bedzie wykonywala Twoj kod co X sekund. Twoj kod musi po prostu wyswietlac co - np. 5 sekund - kolejny obraz z tablicy obrazow. Po przejsciu do ostatniego, zeruje indeks i tak w kolko.
@Adam - jednak to rozwiązanie ma pewną wadę (dla mnie bardzo ważną). Używa jQuery :P. Tak jestem fanem Prototype i Scripto.aculo.us
Ok, w Prototype tez mozna takie cos napisac, chodzi mi o to, aby nie uzywac do tego Flasha, ani Silverlighta, tylko dobrego, starego JavaScriptu :] Ideea jest taka sama, tylko funkcja slide()
pewnie jest inna w prototype.
Dlatego dałem linka do Horinaja, które to robi w jeszcze prostszy sposób.
<div id="slideshow" class="horinaja">
<ul>
<li><img href="img1.jpg"></li>
<li><img href="img2.jpg"></li>
<!-- etc. -->
</ul>
</div>
<script>
// wersja Prototype
document.observe("dom:loaded", function() {
new Horinaja('demo',0.3,4,true);
});
// Wersja jQuery
/* $('#demo').Horinaja({
* capture:'demo',delai:0.3,
* duree:4,pagination:true});
* });
*/
</script>