Cześć();
Po drugim odcinku kursu JavaScript przerobiłem trochę slidera z odcinka, tak żeby z tablicy plików wybierał losowo 3 unikalne obrazki i wstawiał je na stronę. Do tego jest fadeIn i fadeOut. I teraz mam chęć dalszego podrasowania na moje widzimisię w ten sposób żeby każdy obrazek wczytywał się osobno: pierwszy od razu z fadein, drugi dopiero po załadowaniu pierwszego - nie chodzi o to czy został już pobrany do przeglądarki (to będzie pewnie następna faza), tylko o małe opóźnienie w ładowaniu kolejnego - i trzeci po załadowaniu drugiego. Każdy z nich po załadowaniu ma zacząć odliczać powiedzmy 5 sekund i się przeładowywać na kolejny losowy. Ogólnie żeby to wyglądało na falę in i falę out. I tu prośba o podpowiedź jak się za to zabrać, bo póki co to nie mam pomysłu od czego zacząć.
Dodam, że stary ze mnie gość, a pracę z JS dopiero zaczynam. Kiedyś, dawno temu liznąłem trochę TP, potem C++ i PHP na własne skromne potrzeby, więc nie jestem typowym laikiem typu ctrlC-ctrlV, ale też proszę nie pisać do mnie jak do programisty. I nie chodzi mi o podanie gotowego kodu, bo ten sam chcę napisać, tylko o jakiś schemat ideowy jak to ugryźć.
Docelowo lista plików będzie pobierana z serwera - pewnie z użyciem PHP - i przekazywana do tablicy w JS, ale na razie pracuję lokalnie - chyba że jest jakiś lepszy sposób.
Działanie można zobaczyć na stronie: http://mytrucksphoto.panio.pl - to tylko szablon-wprawka, bo zaczynałem od podstaw CSSa, a potem obejrzałem dwa odcinki z JS.
Kod do mojego slidera:
var tab = ['daf-01','daf-02','daf-03','daf-04','daf-05','daf-06',
'man-01','man-02','man-03','man-04','man-05',
'mercedes-01','mercedes-02','mercedes-03',
'scania-01','scania-02',
'renault-01','renault-02',
'volvo-01',
'naczepa-01',
'zbiorowe-01','zbiorowe-02'];
var tab1 = [];
function schowaj()
{
$('#slider').fadeOut(500);
}
function losuj()
{
var plik;
var nr;
var pokaz = '';
if(tab.length<3)
{
tab = tab.concat(tab1);
tab1 = [];
}
for(i=0; i<3; i++)
{
nr = Math.floor(Math.random()*tab.length);
plik = tab.splice(nr,1);
tab1.push(plik);
pokaz = pokaz+'<a class="example-image-link" href="foto/'+plik+'-1200.png" data-lightbox="example-set" data-title=""><img src="foto/'+plik+'-300.png" alt="'+plik+'" class="example-image" />';
}
$('#slider').fadeIn(500);
document.getElementById('slider').innerHTML = pokaz;
setTimeout('losuj()',5000);
setTimeout('schowaj()',4500);
}