Autor Zpráva
Jarda22
Profil
www.bloggertemplates4you.com/2010/07/provogue.html
Ahoj, tady je odkaz na šablonu (je i ke stažení) na které jsou pohybujici se obrazky (slide-show) a já prosím o radu jak udělat to samé ale samostatně v HTML aby mi to fungovalo kde koli na stránce.
....a ještě jak by šlo aby těch mněnicích se obrazku bylo víc , je jich tam jenom pět ...
dik
Marek88
Profil
Zrovna nedávno jsem si dělal podobnou slideshow a dám ti sem kod. Ještě sice není doladěná, ale měla by fungovat.
soubor slideshow.js
function gel(id){
    return document.getElementById(id);
}
function slideshow(nazev, pocet, casZobrazeni, casPrechodu, sirka, vyska){
    document.write("<div id='"+nazev+"2' "+
        "style='margin: 0; padding: 0; border: none; width: "+sirka+"px; height: "+vyska+"px; "+
        "background-image: url(\"slideshow/"+nazev+"/2.jpg\");'>"+
        "<img src='slideshow/"+nazev+"/1.jpg' id='"+nazev+"' alt='1/"+pocet+"' "+
        "style='margin: 0; padding: 0; border: none;'></div>");
    setTimeout("zmizet('"+nazev+"', "+casZobrazeni+", "+casPrechodu+", 0)", casZobrazeni);
}
function zmizet(id, casZobrazeni, casPrechodu, krok){
    var pocetKroku=casPrechodu/25;
    var pruhlednost=1-krok/pocetKroku;
    gel(id).style.opacity=pruhlednost;
    gel(id).style.filter="alpha(opacity="+Math.round(pruhlednost*100)+")";
    if(krok>=pocetKroku){
        premen(id, casZobrazeni, casPrechodu);
    } else {
        krok++;
        setTimeout("zmizet('"+id+"', "+casZobrazeni+", "+casPrechodu+", "+krok+")", 40);
    }
}
function premen(id, casZobrazeni, casPrechodu){
    var pocet=gel(id).alt.split("/");
    var aktualni=pocet[0];
    var aktualniDiv=parseInt(aktualni)+1;
    var celkem=pocet[1];
    if(aktualni==celkem){
        aktualni=1;
        aktualniDiv=2;
    } else {
        aktualni++;
        if(aktualniDiv==celkem){
            aktualniDiv=1;
        } else {
            aktualniDiv++;
        }
    }

    gel(id).src="slideshow/"+id+"/"+aktualni+".jpg";
    gel(id).alt=aktualni+"/"+celkem;
    gel(id).style.opacity=1;
    gel(id).style.filter="alpha(opacity=100)";
    for(var i=0; i<100; i++);    // za tohle se všem zkušenějším omlouvám, ale potřeboval jsem něco jako sleep na malinkou chvilku a nic jednoduššího mě v tu chvíli nenapadlo
    gel(id+"2").style.backgroundImage="url('slideshow/"+id+"/"+aktualniDiv+".jpg')";
    setTimeout("zmizet('"+id+"', "+casZobrazeni+", "+casPrechodu+", 0)", casZobrazeni);
}

V HTML souboru potom musíš tento soubor načíst pomocí
<script src="slideshow.js" type="text/javascript"></script>

A tam, kde chceš slideshow mít, tak dát tohle
<script type="text/javascript">
     slideshow("nazev_slozky_s_fotkami", 30, 1500, 800, 560, 420);
     //   30 je počet fotek
     //   1500 je čas v milisekundách zobrazení fotky
     //   800 je čas přechodu - jak rychle se fotky budu prolínat (pro skok bez plynulého prolnutí tam dej 1)
     //   560 a 420 jsou rozměry fotek (to je třeba nedokonalé a hodlám to zlepšit, ale zatím nebyl čas)
</script>


Fotky umísti do složky, kterou jsi zadal tady: slideshow("nazev_slozky_s_fotkami", ... a fotky pojmenuj 1.jpg, 2.jpg atd...
Těch složek tam můžeš mít kolik chceš a na každé stránce tu funkci můžeš volat s jinými parametry.

Doufám, že ti to pomůže.

EDIT: Testováno jen ve FF a IE6. Chybí preload obrázků, takže v první cyklu to s pomalým připojením trochu blbne a není to uplně hezké.
EDIT2: Našel jsem tam chybu. Opraveno.
Tori
Profil
Jarda22:
Jestli "samostatně v HTML" znamená bez JavaScriptu, tak to nepůjde. Jestli myslíte samostatný blok kódu, který byste mohl umístit kamkoli na stránku, nedíval jste se, jak je to udělané v té šabloně? Další obrázky by se tam prostě připsaly do kódu - kolik prvků bude mít odpovídající css třídy, tolik se jich bude zobrazovat.
Tori
Profil
Marek88:
Netroufnu si velmi komentovat ten JS, tak jen na okraj:
* nenastavovala bych divu inline styl, ale třídu
* proč je id divu totožné s cestou k adresáři s obrázky? Co když to bude podadresář, nebo bude název obsahovat mezery? (pak by také nebylo nutné ve skriptu x-krát dopisovat nadřazený adresář slideshow)
Marek88
Profil
[#4] Tori:
1) To je pravda, dělal jsem to pro co nejjednodušší aplikaci kdekoli, tak jsem to dal inline, aby se toho do stránek vepisovalo co nejméně. Navíc je to ještě nedoladěné a nikde jsem to u sebe zatím neaplikoval, takže jsem to pro testovací účely ani moc neřešil.
2) S cestou k adresáři jsem zatím nepočítal a id není pevné proto, aby mohly být dvě různé slideshow na jedné stránce.
Asi to id změním jen na poslední podadresář nebo někde udělám nastavení výchozího adresáře nebo i uplně jinak.

Díky za připomínky.
Jarda22
Profil
Všem moc dik za rady.
hadveo
Profil *
tak jsem to zkoušel, ale asi jsem lama...slide mi bezi, ale je to bez obrazku...nevim, jak mam doplnit obrazky do scriptu. musim nastavit vse co je ve scriptu znazorneno cervene nebo jen neco? poradite mi?
diky moc vsem Jarda22

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: