Diskuze: Slider pomocí změny obrázku

Naučíme tě pracovat na home-office.

Zjistit více...

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

Aktivity

Verquido

Tvůrce

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

Libor Šimo (libcosenior)

Tvůrce

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.

Verquido

Tvůrce

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

    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

Libor Šimo (libcosenior)

Tvůrce

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.

xylofonista

Člen

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

Libor Šimo (libcosenior)

Tvůrce

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.

Verquido

Tvůrce

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

xylofonista

Člen

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

Verquido

Tvůrce

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

Aleš Lulák

Člen

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=null; 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.

Nejčastěji vyhledáváné

Diskuze: Slider pomocí změny obrázku