Diskuze: Slider pomocí změny obrázku

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