Autor Zpráva
Vision
Profil *
Ahoj mozci,

mám tu velký problém. Nedokážu pochopit jednu věc níže, ale zatím teda kód.

<script language="JavaScript" type="text/javascript">
obr = -1;
cas = 1000;
function animation(){
obrazky = ["url(images/slide_1.png)", "url(images/slide_2.png)"];
if (obr+1==obrazky.length) obr=0;
else obr++;
obrazek.style.backgroundImage = obrazky[obr];
window.setTimeout('animation()',cas);
}
</script>

tenhle script bych chtel napasovat do divu sem

<div name="obrazek" id="slider" style="background-image: url(images/slide_1.png)">Text</div>

Onload na vyvolání funkce mám v body. Je zajímavě, že když ty samé hodnoty dám do IMG místo DIV, tak fungují na stopro, ale v divu se nic neděje. Nevíte někdo co s tím? Znám hodně alternativ, ale ve věci ve které to potřebuji, potřebuji aby se měnil po uplynutí jedné vteřiny obrázek na pozadí daného divu a furt dokola, dle nahraných obrázků. Prosím tedy o pomoc. Děkuji
Chamurappi
Profil
Reaguji na Visiona:
Element <div> nemá atribut name, nejde ho přes něj vyhledat. Použij místo obrazek.style raději document.getElementById("slider").style.
A také bych na tvém místě používal var.
Vision
Profil *
Zkousel jsem, ale problem se nevyresil. To byla prvni z veci, kterou jsem na googlu objevil, ale na div mi to proste nefunguje. Jeste jsem nasel, ze pred scriptem musi byt nacteny includy jquery, ze to nebude fungovat jinak, ale to mam take v poradku. Nejake dalsi napady?
_es
Profil
Vision:
Napíš, ako presne si aplikoval radu v [#2]. Hodila by sa aj „živá“ ukážka.
quatzael
Profil
Vision:
Já nevím co tam řešíš s jQuery, to tady v tý ukázce ani nemáš..

Podle mě by to mělo být takto:

<script type="text/javascript">
obr = -1;
cas = 1000;
function animation(){
obrazky = ["url('images/slide_1.png')", "url('images/slide_2.png')"];
if (obr+1==obrazky.length) obr=0;
else obr++;
document.getElementById("slider").style.backgroundImage = obrazky[obr];
}
window.setTimeout(animation,cas);
</script>

<div id="slider" style="background-image: url('images/slide_1.png')">Text</div>

Chyběly Ti tam ty uvozovky. A taky to volání tý funkce se podle mě nedělá zevnitř funkce, ale zvenčí.. (Ale to si nejsem jistej, když Ti to Chamurappi nijak nezkritizoval..
juriad
Profil
quatzael:
Nechyběly. Nejsou povinné. CSS zbytečnosti » Uvozovky kolem URL/písem
Ne, funkce musí naplánovat sama sebe. Vision zmiňuje, že ji volá poprvé v body onload.
Správně jsi opravil ten 8. řádek.

Vision:
Dej si alert na začátek té funkce animation. Tím zjistíš, zda se vůbec zavolá.
Vision
Profil *
Dobrej napad s tim alertem, hned vyzkousim doma, ten osmej radek jsem opravil ,ale nic se nedelo. Pak dam echo, ale dekuji vsem za pomoc a snahu. Snad to vse vyresime.
Vision
Profil *
Tak problém vyřešen vyměnil jsem muj element "<script language="JavaScript" type="text/javascript">" za element od quatzaela "<script type="text/javascript">" a už to běží jak má. Děkuji všem za pomoc.
Chamurappi
Profil
Reaguji na Visiona:
To nemohla být příčina chyby, language="JavaScript" je zcela neškodný. Nehledě na to, že oba atributy jsou zbytečné.

Jeste jsem nasel, ze pred scriptem musi byt nacteny includy jquery“ (z [#3])
Nemusí, nepoužíváš jQuery, přilinkování knihovny by ti jen zpomalilo stránku.
Vision
Profil *
Chamurappi:
mám tam jquery na effekty fadein a fadeout
Vision
Profil *
function slider(element, url, count, suffix) {
    var current = 1;
    var div = $('<div>');
    document.getElementById("slider").style.background = 'url(' + url + current + suffix + ')';
    
    function changeImage() {
        $( "#slider" ).fadeOut(500, function() {
            current = current % count + 1;
            document.getElementById("slider").style.background = 'url(' + url + current + suffix + ')';
            $( "#slider" ).fadeIn(1000);
        });
    }
    
    setInterval(changeImage, 5000);
}

slider($('#slider'), 'http://www.diamond-cabaret.com/images/slide_', 2, '.png');

<div id="slider" style="background: url(images/slide_1.png);"></div>

Všechno funguje jak má, ale nenačte se do backgroundu URL, píše to url("undefinedNaNundefined")

Nevíte včem je problém?
juriad
Profil
Mně to funguje, viz Odkaz. Proč tobě ne? Dodej živou ukázku, zřejmě děláš něco blbě.
Vision
Profil *
http://www.diamond-cabaret.com/

živá ukázka
juriad
Profil
Problém víceméně není se samotným kódem, ale tím, jak jej používáš. A to bez odkazu na stránku nelze vyřešit.

Odstraň onload="slider()" z body. To tam nemá vůbec co dělat. To jen způsobuje ty problémy s undefinedNaNundefined.

Do slider.js dej přesně:
function slider(element, url, count, suffix) {
    var timeToFadeOut = 500;
    var timeToFadeIn = 1000;
    var timeToChange = 5000;
    
    var current = 1;
    function changeImage() {
        element.fadeOut(timeToFadeOut, function() {
            current = current % count + 1;
            element.css('background', 'url(' + url + current + suffix + ')');
            element.fadeIn(timeToFadeIn);
        });
    }
    
    setInterval(changeImage, timeToChange);
}

$(document).ready(function() {
    var numberOfImages = 2;
    slider($('#slider'), '/images/slide_', numberOfImages, '.png');
});

A div#slider bys měl napevno pomocí style="background: url(/images/slide_1.png)" nastavit první obrázek, který uvidí všichni bez JavaScriptu.
Vision
Profil *
Funguje to skvěle a moc děkuji, ale jestli můžu poprosit o popis, zkusím si to popsat sám, abych měl pochopení v kódu.

function slider(element, url, count, suffix) {  //funkce s názvem slider(promena1,promena2,promena3,promena4)
    var timeToFadeOut = 500; //promena s casek cca 0,5s
    var timeToFadeIn = 1000; //promena s casem cca 1s
    var timeToChange = 5000; //promena s casem cca 5s
    
    var current = 1; //pocatecni hodnota promeny je 1
    function changeImage() { //ve funkci slider je funkce na zmenu obrazku
        element.fadeOut(timeToFadeOut, function() { //dle promene element ve funkci slider, se v danem elementu udela fadeout effect
            current = current % count + 1; //tuhle rovnici moc nechapu, ale myslim si ze dokad se promena curent nebude rovnat poctu promene count, bude pri opakovani pricitat promene current hodnotu jedna
            element.css('background', 'url(' + url + current + suffix + ')'); //zmena stylu v css dle hodnot v teto promene, zmena se provede v udane promene elementu
            element.fadeIn(timeToFadeIn); //dle promene element ve funkci slider, se v danem elementu udela fadein effect dle nastaveneho casu
        });
    }
    
    setInterval(changeImage, timeToChange); // nastavime cas (smycku), po ktere se bude funkce changeimage opakovat
}
 
$(document).ready(function() { //timhle vasi vyvolam funkci misto toho onload v body
    var numberOfImages = 2; // pocet obrazku celkem
    slider($('#slider'), '/images/slide_', numberOfImages, '.png'); // funkce slider(promena element, promena url, promena count, promena pripony)
});



Potřeboval bych ještě funkce prew a next. U nextu asi stačí vyvolat funkci changeImage() na obrázku elementem <a> pomocí onclick. Ale nevím jak u prev. Můžu vyměnit hodnotu +1 za -1, ale jakmile se dostanu na 1, tak potřebuju udělat, aby se vrátil na posledni obrázek, tedy mi proměná nyní půjde do mínusu a dané obrázky budou nenalezeny.

Plus potřebuju, aby funkce slider vyrobila v divu s id "count" (dle promene numberOfImages) počet stejných obrázků "/images/icon_grey.png" s odkazy na přepnutí na obrázek s přesnou hodnotou proměné "current". Pokud current se bude rovnat s obrázkem č.2 bude mít změnu obrázku na "/images/icon_active.png".
juriad
Profil
Popsal jsi to dobře.

Plná ukázka všeho včetně tlačítek. Dost jsem ji upravil (hlavně, jak se pracuje s těmi obrázky a časem; obrázky jsou číslované od 0).
Živá ukázka

Ten operátor %, říká se mu modulo, bys měl znát z hodin matematiky, je to obyčejný zbytek po dělení. A jistě víš, že zbytky po dělení číslem 5 jsou čísla v rozdahu 0 až 4.
Není-li ti něco jasného, zeptej se.
Vision
Profil *
Děkuji, že se mi takhle moc věnujete. Je to pro mě dost užitkové. Hodiny javascriptu jentak někdo nedává. Děkuji.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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