Black Friday Black Friday
Black Friday výprodej! Až 80 % extra bodů zdarma! Více informací zde

Diskuze: Po obnovení stránky jiný obrázek

HTML a CSS HTML a CSS Po obnovení stránky jiný obrázek American English version English version

Aktivity (1)
Avatar
Nocik
Člen
Avatar
Nocik:14. dubna 22:55

Zdravím, chci se zeptat, jestli by šlo pouze díky html a css udělat to, že po novém načtení stránky se vymění pozadí celé stránky, buď náhodně nebo popořadě (budou tam fotky :D )
předem děkuji za radu, či jakékoliv nasměrování :)

Odpovědět 14. dubna 22:55
Vítězství je stav mysli.
Avatar
Odpovídá na Nocik
Matúš Olejník:14. dubna 23:12

Nemyslím si ale netvrdím to na 100% :) . Skôr by som ťa nasmeroval na kúsok JavaScriptu :D

Nahoru Odpovědět 14. dubna 23:12
/* I am not sure why this works but it fixes the problem */
Avatar
Nocik
Člen
Avatar
Odpovídá na Matúš Olejník
Nocik:14. dubna 23:13

jaj, to jsem čekal :D no co se dá dělat, naučit se to musím :)

Nahoru Odpovědět 14. dubna 23:13
Vítězství je stav mysli.
Avatar
Jurajs
Člen
Avatar
Odpovídá na Nocik
Jurajs:14. dubna 23:19

Ano javascript a nebo i za pomocí jquery, tam je na to metoda resize() :) ...pokud se nepletu...

 
Nahoru Odpovědět 14. dubna 23:19
Avatar
NouF
Člen
Avatar
NouF:15. dubna 7:19

Ahoj,

tohle bych řešil na straně PHP, jinak budeš posílat velká data klientovi. Nevím až jak moc to bude trápit tebe, ale znám takový web, kam když příjdeš stáhne to 100+ Mb, protože je tam hodně obrázku ve velké kvalitě. Takže někdo s FUP 300mb bude určitě rád :D

 
Nahoru Odpovědět  +1 15. dubna 7:19
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na Nocik
Daniel Vítek:15. dubna 11:38

Něco podobného jsem tu v jednom článku ukazoval.

https://www.itnetwork.cz/…zmena-pozadi

Sice to už má pár let a není to úplně nejlepší řešení, ale můžeš se inspirovat :D

Nahoru Odpovědět 15. dubna 11:38
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na Jurajs
Daniel Vítek:15. dubna 11:39

Na co resize? :-O

Nahoru Odpovědět  +1 15. dubna 11:39
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
Nocik
Člen
Avatar
Odpovídá na NouF
Nocik:15. dubna 13:43

13 obrazku ma dohromady cca 7Mb a je to pouze jednostrankovej web, kde bude zakladni info a par dalsich fotek, domnivam se, ze vsechny fotky na cele strance zaberou max 20Mb coz si myslim, ze nebude az tak strasne co se tyce nacitani nebo se pletu? Mile rad se dozvim dalsi informace :D

Nahoru Odpovědět 15. dubna 13:43
Vítězství je stav mysli.
Avatar
Nocik
Člen
Avatar
Nocik:15. dubna 13:47

Jinak sem to vyresil skrze cisty JS.. Do pole sem nasazel odkazy na fotky, random cislo a podle cisla se vybere index pole(tudiz fotka) a pak se to vypise jako background-image..
Dal bych zdrojak, ale su na mobilu :D

Nahoru Odpovědět  +1 15. dubna 13:47
Vítězství je stav mysli.
Avatar
NouF
Člen
Avatar
Odpovídá na Nocik
NouF:15. dubna 13:48

Nebude strašné? Já osobně si myslim že to je hrozně moc. Záleží pro jakou klientelu to je.

Např, ITNetwork má cca 2Mb se zapnutou cache 14 Kb

 
Nahoru Odpovědět 15. dubna 13:48
Avatar
Nocik
Člen
Avatar
Odpovídá na NouF
Nocik:15. dubna 13:50

Jaj :D tak nejspis to moc vadit nebude, ale pro priste rikas, ze bude urco lepsi to generovat nahodne serverem z databaze ze?

Nahoru Odpovědět 15. dubna 13:50
Vítězství je stav mysli.
Avatar
NouF
Člen
Avatar
Odpovídá na Nocik
NouF:15. dubna 15:27

Ono to můžeš řešit i javascriptem, ale musíš načíst jen ty obrázky které opravdu potřebuješ a nejlépe ve velikosti která bude únosná.

 
Nahoru Odpovědět 15. dubna 15:27
Avatar
Nocik
Člen
Avatar
Odpovídá na NouF
Nocik:15. dubna 15:29

Aha a jde to pouze díky nějaké funkci nebo to je nějaké složitější?

Nahoru Odpovědět 15. dubna 15:29
Vítězství je stav mysli.
Avatar
NouF
Člen
Avatar
Odpovídá na Nocik
NouF:15. dubna 15:31

ee, vytvoříš si nejaký buffer (třeba pole, jako seznam obrázků) a pak si vybereš ten co chceš. Myslim že si psal že už to máš hotové, takto je to celkem ok. Pak chce mrknout, jestli ty obrázky opravdu potřebuješ takto velké, jestli nejdou optimalizovat.

 
Nahoru Odpovědět 15. dubna 15:31
Avatar
Nocik
Člen
Avatar
Nocik:15. dubna 16:37
function randombg(){
  var random= Math.floor(Math.random() * 13) + 0;
  var bigSize = ["url('img/random/1.jpg')",
                 "url('img/random/2.jpg')",
                 "url('img/random/3.jpg')",
                 "url('img/random/4.jpg')",
                 "url('img/random/5.jpg')",
                 "url('img/random/6.jpg')",
                 "url('img/random/7.jpg')",
                 "url('img/random/8.jpg')",
                 "url('img/random/9.jpg')",
                 "url('img/random/10.jpg')",
                 "url('img/random/11.jpg')",
                 "url('img/random/12.jpg')",
                 "url('img/random/13.jpg"];
  document.getElementById("random").style.backgroundImage=bigSize[random];
}

JS, pak jen zavolám onload funkci randombg a ty obrázky jsem zmenšil na 1920x1080 - jsou to fotky vintage kol a kámoš si na tomhle dost zakládá, aby to šlo vidět, takže se je snažím zachovat s co nejvíce detaily

Nahoru Odpovědět 15. dubna 16:37
Vítězství je stav mysli.
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:23. dubna 15:54

'20Mb coz si myslim, ze nebude az tak strasne co se tyce nacitani nebo se pletu'
Bude. Pokud ma stranka se vsim, html, css, text, obrazky a jine vice nez 100 kb je v celku nepouzitelna a obvykle casto i neprehledna. Pojede jen fakt na dobre lince. Ale nemuzes uz pri tom delat nic dalsiho na webu.

Ty obrazky na pozadi by se dali prevest na ten novy obrazkovy format od googlu. Meli by to podporovat vsechny prohlizece. V pripade obrich obrazku plakatove velikosti, kde nejsou titerne detaily bych tipoval tak 70% mensi velikost.
https://developers.google.com/speed/webp/
http://webpjs.appspot.com/ - webp js decoder
https://css-tricks.com/…webp-images/

 
Nahoru Odpovědět 23. dubna 15:54
Avatar
Nocik
Člen
Avatar
Odpovídá na Peter Mlich
Nocik:23. dubna 18:25

A jak teda řešíš obrázky, které mají 500kb+ kromě toho co jsi poslal?

Nahoru Odpovědět 23. dubna 18:25
Vítězství je stav mysli.
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3. května 14:30

Zkus poslat link na jeden. Zkusim najit nejaky konvertor, co z toho vyplodi. Zatim jsem jenom videl ukazky googlu. Nezkousel jsem realne obrazky. Webp slibuje usporu 40% aa je na nej js dekoder. Heif snad kolem 15%.

https://developers.google.com/…ebp/gallery1
https://css-tricks.com/…webp-images/

jpeg / av1 (asi heif) pri stejne velikosti souboru. Pouziva tam ale png, tak stazeni souboru nepomuze.
https://people.xiph.org/…v1stilldemo/

Neresim, nepouzivam 500kb obrazky.

 
Nahoru Odpovědět 3. května 14:30
Avatar
Nocik
Člen
Avatar
Odpovídá na Peter Mlich
Nocik:3. května 21:46

Už na to asi kašli.. vše vyřešeno a projekt je takřka hotový :) každopádně všem děkuji za help ;)

Nahoru Odpovědět 3. května 21:46
Vítězství je stav mysli.
Avatar
gorri
Člen
Avatar
Odpovídá na Nocik
gorri:15. září 13:33

Proc hned musi kazdy pouzivat JS. Vzdyt to jde udelat uplne snadno v PHP a nemusim tim zbytecne zasirat stranku JSkem.

SELECT * FROM mistokdemasinformacisobrazky WHERE (pokud budes chtit pouzit neco specifickeho tak to rekni tady) ORDER BY RAND() LIMIT 1
Tot vse. Naprosto jednoduche.
Nahoru Odpovědět 15. září 13:33
Když vím, tak poradím. Nikdo neví všechno :-)
Avatar
gorri
Člen
Avatar
Odpovídá na Nocik
gorri:15. září 13:43

Samozrejme to musis pripsat k <body idealne formou style a napsat background. Tahat pak jen obrazek.

Nahoru Odpovědět 15. září 13:43
Když vím, tak poradím. Nikdo neví všechno :-)
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 21 zpráv z 21.