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.
Zobrazeno 10 zpráv z 10.
K personalizaci obsahu a reklam, poskytování funkcí sociálních médií a analýze naší návštěvnosti využíváme soubory cookie. Informace o tom, jak náš web používáte, sdílíme se svými partnery pro sociální média, inzerci a analýzy. Partneři tyto údaje mohou zkombinovat s dalšími informacemi, které jste jim poskytli nebo které získali v důsledku toho, že používáte jejich služby.
Používáme nezbytné cookies pro fungování webu a s tvým souhlasem také analytické a marketingové cookies.
Zajišťují základní funkce, bezpečnost a služby, které sis vyžádal. Nelze je vypnout.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| ITnetwork | ITnetwork | Provoz webu, relace, přihlášení a uložení nastavení cookies. | PHPSESSID, auth_token, sid, itn_consent_impression, __Host-itn_consent | Relace až 1 rok |
| Google Tag Manager | Správa značek a načítání měřicích nástrojů webu. | Žádné | Neukládá se | |
| Google Fonts | Načítání typografie webu. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele | |
| Google Hosted Libraries | Načítání potřebných knihoven a stylů webu. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele | |
| Google reCAPTCHA | Ochrana formulářů a webu před zneužitím. | _GRECAPTCHA, rc::a, rc::b, rc::c, rc::f | Relace až 180 dní | |
| YouTube | Přehrávání vloženého video obsahu. | localStorage, IndexedDB; cookies after playback interaction | Relace až trvalé úložiště | |
| Vimeo | Vimeo | Přehrávání vloženého video obsahu. | __cf_bm, _cfuvid, vuid, localStorage, IndexedDB | Relace až 2 roky |
| Facebook Login | Meta | Přihlášení pomocí účtu třetí strany. | Úložiště řízené poskytovatelem | Relace až 1 rok |
| GoPay | GoPay | Zpracování uživatelem vyžádané platby. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele |
Pomáhají nám porozumět používání webu a zlepšovat ho.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| Google Analytics 4 | Měření návštěvnosti a používání webu. | _ga, _ga_* | Až 2 roky | |
| Microsoft Clarity | Microsoft | Měření návštěvnosti a používání webu. | _clck, _clsk, _cltk | Relace až 1 rok |
Slouží k měření kampaní, personalizaci reklamy a marketingové komunikaci.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| Google Ads | Měření kampaní, reklama a remarketing. | _gcl_au, _gcl_ls | Relace až 90 dní | |
| Meta Pixel | Meta | Měření kampaní, reklama a remarketing. | _fbp, _fbc, localStorage | Až 90 dní |
| Sklik | Seznam.cz | Měření kampaní, reklama a remarketing. | retargeting, sid, szn:* | Relace až trvalé úložiště |
| LinkedIn Insight | Měření kampaní, reklama a remarketing. | bcookie, li_gc, lidc, __cf_bm | Relace až 1 rok | |
| Ecomail | Ecomail.cz | Měření kampaní, reklama a remarketing. | ecmid, Úložiště řízené poskytovatelem | Dle podmínek poskytovatele |
| Atribuce kampaní ITnetwork | ITnetwork | Přiřazení návštěvy a objednávky ke kampani. | campaign_clid[*], user_session_context | Až 1 rok |
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Nechápen ako ti to môže fungovať.
document.getElementById("sliderImg").src = "imgs/img_" + current +"";
N akonci musí byť: +".jpg" a nie len "".
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;
}
Na slider pouzivam len jeden typ obrazkov.
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?
Napr. Obrazky nazves 1.jpg, 2.jpg......... n.jpg a pouzijes podmienku na vratenie k 1.jpg.
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 
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 =
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.
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;
}
Zobrazeno 10 zpráv z 10.
