NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s podporou uplatnění od 0 Kč. Více informací.

Diskuze: Slider pomocí změny obrázku

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Verquido
Tvůrce
Avatar
Verquido:26.10.2016 0:05

Mám něco takového

<script type="text/javascript">
    var interval = setInterval(slideIT, 2000);

        var max = 3;
        var current = 1;

    function slideIT()
    {
        current++;
        if(current > max)
            current = 1;

        document.getElementById("sliderImg").src = "imgs/img_" + current +"";
    }
</script>

<div id="imgWall">
    <img id="sliderImg" src="imgs/img_1.jpg">
</div>

V prohlížeči všechno běhá, ale v konzoli mi to furt píše že obrázek nebyl nalezen i když ho ve složce mám. Nevíte co je na tom špatně?
Šli by přidat nějak efekty přechodu?
Popřípadě, mohlo by se to použít na slider?

 
Odpovědět
26.10.2016 0:05
Avatar
Odpovídá na Verquido
Libor Šimo (libcosenior):26.10.2016 7:37

Nechápen ako ti to môže fungovať.

document.getElementById("sliderImg").src = "imgs/img_" + current +"";

N akonci musí byť: +".jpg" a nie len "".

Nahoru Odpovědět
26.10.2016 7:37
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Verquido
Tvůrce
Avatar
Odpovídá na Libor Šimo (libcosenior)
Verquido:26.10.2016 15:11

Proboha, no jó.. Toho sem si vůbec nevšiml. Teď už to běhá. takže ještě pár věcí ;)

Co ty přechody?

Jo a když mám obrázky a vím názvy, ale nevím přesně jejich přípony souborů tak jak zjistit jestli soubor existuje nebo ne? Například něco jako toto, ale to nefunguje :D

    if(ImageExist("imgs/img_" + current +".jpg"))
        document.getElementById("sliderImg").src = "imgs/img_" + current +".jpg";
    else if(ImageExist("imgs/img_" + current +".png"))
        document.getElementById("sliderImg").src = "imgs/img_" + current +".png";
    else(ImageExist("imgs/img_" + current +".jpeg"))
        document.getElementById("sliderImg").src = "imgs/img_" + current +".jpeg";


function ImageExist(url)
{
   var img = new Image();
   img.src = url;
   return img.height != 0;
}
 
Nahoru Odpovědět
26.10.2016 15:11
Avatar
Odpovídá na Verquido
Libor Šimo (libcosenior):26.10.2016 16:05

Na slider pouzivam len jeden typ obrazkov.

Nahoru Odpovědět
26.10.2016 16:05
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
xylofonista
Člen
Avatar
xylofonista:1.12.2016 19:52

Používám podobný js, proto si dovolím otázku. Nešlo by nějak udělat, aby script automaticky začal prvním obrázkem po dosažení posledního? Tedy, aby nebylo třeba zadávat pomocí var max = x; faktický počet obrázků ve složce?

 
Nahoru Odpovědět
1.12.2016 19:52
Avatar
Odpovídá na xylofonista
Libor Šimo (libcosenior):1.12.2016 20:51

Napr. Obrazky nazves 1.jpg, 2.jpg......... n.jpg a pouzijes podmienku na vratenie k 1.jpg.

Nahoru Odpovědět
1.12.2016 20:51
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Verquido
Tvůrce
Avatar
Odpovídá na xylofonista
Verquido:2.12.2016 9:09

Například by šlo ty obrázky dát do pole a z něho to brát s tím že by sis spočítal velikost, ale nevím jak to dát do toho pole automaticky :)

 
Nahoru Odpovědět
2.12.2016 9:09
Avatar
xylofonista
Člen
Avatar
xylofonista:5.12.2016 14:56

Teď budu za vola. :-)
Zkoušel jsem si napřed obrázky sečíst, získat tím nějakou hodnotu a tu použít. Ale mám sotva základ javy a v javascriptu mi tohle nefunguje:

var current =1;
                File f = new File("images/img_" + current + ".jpg");
                var pocetObrazku=0;
                var a=0;

                function testovaniPoctu()
                {
                        while(a==0)
                                {
                                        if(f.exists==true)
                                                {
                                                        pocetObrazku++;
                                                        current++;
                                                }
                                        else
                                                {
                                                        a++;
                                                        current=1;
                                                }
                                }

                }

        function slideIT()
    {

        if(current > pocetObrazku)
            current = 1;

        document.getElementById("sliderImg").src = "images/img_" + current +".jpg";
    }

Cílem je, aby obrázky ve složce mohl vyměnit každý měsíc kdokoliv, i neznalý člověk, za jiné, v jiném počtu a nebylo přitom potřeba upravovat v .html souboru hodnotu var max =

 
Nahoru Odpovědět
5.12.2016 14:56
Avatar
Verquido
Tvůrce
Avatar
Odpovídá na xylofonista
Verquido:5.12.2016 21:49

Jo nějak tak by to bylo fajn akorát neznalý člověk by do složky nedával určitě jen** .jpg** soubory což by to naprosto robilo. Jinak je to celkem použitelný po pár úpravách jelikož si říkal že to nefunguje.

 
Nahoru Odpovědět
5.12.2016 21:49
Avatar
Aleš Lulák
Člen
Avatar
Aleš Lulák:16.12.2016 8:28

Problém je, že načítání obrázků je asynchronní, takže pokud budeš chtít měnit obrázky, tak jedině až po tom, co se načtou nebo nenačtou.

Takže řešení může být takhle:

function imageExist(url, callback) {
    var img = new Image();
    img.onerror = callback;
    img.src = url;
}

imageExist(document.querySelector("#nefunkcni").getAttribute("src"), function() {document.querySelector("#nefunkcni").setAttribute("src", "http://www.itnetwork.cz/images/4ebaba1cda831_image_0_thumb.png")});

Rád si vždycky trochu pogooglím, abych viděl řešení ostatních. Tak tady jsou ještě dvě možnosti.
Jedno takové hezké minimalistické:

<img src="imagenotfound.gif" alt="Image not found" onerror="this.onerror=null;this.src='imagefound.gif';" />

this.onerror=nu­ll; je tam jen kvůli tomu, kdyby i nový odkaz byl rozbitý, aby se to nezkoušelo načítat znovu a znovu.

Pak je skvělé toto, které prostě vrací true nebo false, ale jedná se o řešení, kde musejí být obrázky na stejné doméně.

function imageExists(image_url){

    var http = new XMLHttpRequest();

    http.open('HEAD', image_url, false);
    http.send();

    return http.status != 404;

}
Nahoru Odpovědět
16.12.2016 8:28
"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.