Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Diskuze: Slider pomocí změny obrázku

JavaScript JavaScript Slider pomocí změny obrázku

Aktivity (1)
Avatar
Paranormal
Redaktor
Avatar
Paranormal: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
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
Avatar
Odpovídá na Paranormal
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
Paranormal
Redaktor
Avatar
Odpovídá na Libor Šimo (libcosenior)
Paranormal: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
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
Avatar
Odpovídá na Paranormal
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
Paranormal
Redaktor
Avatar
Odpovídá na xylofonista
Paranormal: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
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
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
Paranormal
Redaktor
Avatar
Odpovídá na xylofonista
Paranormal: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
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
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.