Pomoc s webem

[pussylala]

Určitě se mezi námi najde člověk, který umí psát webky. Potřebuji jednu radu kvůli které nevím jak dál.
Jsem začátečník a dělám vlastní galerii fotek, protože všechny komerční (mojefotky, rajce.idnes, atd.) se mi nelíbí a chci to trošku jinak.
Obrázky nahrávám na web v původní velikosti. Je to proto, aby každý měl přístup k originálům. K obrázkům dávám parametr velikosti v % (neznám zatím jiné řešení, doufám, že poradíte), aby se obrázek přizpůsobil danému oknu. S obrázky vysokého rozlišení není problém, pěkně se zmenší. Problém je s malými obrázky (např. 640x480), které se při prohlížení na monitoru s vysokým rozlišením (full HD) roztáhnou a jsou rozmazané. Malé obrázky chci nechat v původní velikosti a neroztahovat je na velikost většího okna.
Jestli někdo má nápad jak to jednoduše udělat, tak mu můžu poslat bližší informace, třeba i zdrojový kód. Určitě to jde udělat i jinak, ale nevím jak . PHP zase neumím .
Tady je náhled galerie jak to bude vypadat, jeden obrázek schválně s nízkým rozlišením a jeden s vysokým.

http://www.vetrovky.eu

díky

[Radgost]

Co takhle nasadit free fotogalerii?

http://coppermine-gallery.net

[frantisek939]

jak je psano vyse - nasadit nejakou zadarmo aplikaci.
Pokud bys s tim potreboval pomoci, muzu se angazovat, nebo treba jen poradit, nasmerovat ...

[pussylala]

Právě tu co jste viděli je vlastně galerie dělaná pomocí programu Jalbum, upravená dle mých představ (až na tu věc, kterou jsem popisoval výše). Upravoval jsem si to sám, vlastně ze dvou nějakých předdefinovaných galerií jsem udělal jednu (+ změna tlačítek, barvy a písma). Jestli existuje nějaká už naprogramovaná galerie, dle mých představ, tak by to bylo úžasné a dál bych nic neřešil. Zatím jsem ale žádnou nenašel.

Co takhle nasadit free fotogalerii?

http://coppermine-gallery.net

Není to PHP? To neumím

[Oňarb]

Riesenie v Jalbum je jedine take, ze si nastavis aby sa vsetky fotky zobrazovali iba vo velkosti 640x480. Ak pre takuto malu fotku mas nastaveny vacsi rozmer, samozrejme ti ju roztiahne a je rozmazana. Dalsie riesenie je vytvorit zvlast album s malymi fotkami a dalsi album s vacsimi fotkami ...
Tretie tiez dobre riesenie je pouzit napr. verejnu galeriu na www.zonerama.cz - sem nahrat vsetky fotky a na svoju stranku dat uz iba odkaz.

[pussylala]

To není řešení udělat dva albumy pro různé fotky. To je extra práce navíc rozdělovat fotky do různých skupin. Pravě proto se mi líbí rozměr, dle velikosti monitoru - okna. Prostě na každém monitoru fotka "akorát". Veřejnou galerii nechci, zaprvé se mi nelíbí (www.zonerama.cz neznám, možná je v pohodě) a zadruhé můžou v budoucnu přijít jako posrané mojefotky.cz, že neprohlížené galerie začnou mazat. Kdybych vyřešil tenhle "malý" detail, který mi braní dokončení galerie, budu plně spokojený

[Warthog]

Mělo by to jít pomocí JavaScriptu, pokusím se to dohledat a poslat ukázku kódu.

[cover72]

Tvůj problém je v tom, že pomocí procent neměníš fyzickou velikost obrázku, ale toliko to, jak se jeví být velkým na stránce. Když dáš velikost 50%, prohlížeč použije více či méně primitivní algoritmus, každé 2 sousední pixely zprůměruje a zmenší to. Když ti ale velikost vyjde na více, jak 100% originálu, co má prohlížeč dělat? Chceš obrázek n-krát větší, než je originál, ale ta informace pro zvětšení tam proste není. Takže jediné, co může udělat, je si ty scházející pixely nějak domyslet. Čímž se ti to rozmaže.
Prostě - když obrázky zvětšuješ, budou rozmazané, protože si počítač domýšlí chybějící informaci. To nijak neobejdeš, můžeš jen použít chytřejší algoritmus, který si lépe odhadne, co a jak doplnit.

[pussylala]

Cover72:
Ale já ty malé obrázky nechci zvětšovat. Pomocí % se to tak ale děje. Malé obrázky klidně ať zůstanou malé. Prostě jestli by k tomu šlo dát nějaký příkaz, že pouze zmenšovat, nikoliv zvětšovat

Warthog:
Budu strašně rád jestli něco najdeš, díky

[Warthog]

Takže tady to je. Po natažení obrázku se ve funkci resize() zkontroluje, za je obrázek širší než jeho container. Pokud ano, zmenší ho na 90 % šířky containeru, pokud ne, nechá ho být. V ukázce je pro jednoduchost containerem celé okno, ale může to být i nějaký div, table cell apod. který si pojmenuješ a potom se na něj odkážeš pomocí getElementById jako to já dělám u vlastního obrázku. Ještě by to šlo vylepšit a v té logice uvažovat i výšku...

Jinak ale ten Tvůj přístp "dám tam fullres a klient ať si s tím nějak poradí" se mi moc nelíbí. Vhodnější by IMHO bylo dát tam 2 až 3 různé velikosti a podle vlastností klienta mu servírovat tu nejvhodnější (a zároveň ho nechat explicitně vybrat, pokud bude chtít). Ale to je Tvůj boj.

Kód: Vybrat vše

<body>
<script language="JavaScript">
	function resize(){
		var  image = document.getElementById('obrazek');
		var  imageWidth = image.width;
		var  containerWidth = window.innerWidth;
		
		if ( imageWidth > containerWidth){
			document.getElementById('obrazek').width = containerWidth * 0.9;
		}
	}
</script>

<img id = "obrazek" src = "xxxxxxx" onload = resize()>

</body>

[pussylala]

Díky, zkusím to nějak implementovat. Jinak slide nebude obsahovat fullres, ale obrázky max. kolem 1 024px × 768px. Tohle je zhruba rozměr, který je tak akurát na full hd monitor a na menší monitory se tenhle obrázek zmenší. Datový objem fotky 1 024px × 768px je vzhledem k dnešním rychlostem internetu zanedbatelný. Až pak po kliknutí na daný obrázek se spustí odkaz na fullres obrázek. Přesně jak to mám teď v té ukázkové galerii.

[pussylala]

Warthog:

Hele nějak mi to nefunguje. Když vytvořím obrázek obrazek.jpg ve stejném adresáři kde je Nová stránka 1.htm tak to nejde. Obrázek je furt v původní velikosti. Tady je zdroják

Kód: Vybrat vše

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Nová stránka 1</title>
</head>

<body>
<script language="JavaScript">
   function resize(){
      var  image = document.getElementById('obrazek');
      var  imageWidth = image.width;
      var  containerWidth = window.innerWidth;
      
      if ( imageWidth > containerWidth){
         document.getElementById('obrazek').width = containerWidth * 0.9;
      }
   }
</script>

<img id = "obrazek" src = "obrazek.jpg" onload = resize()>

</body>

</html>

[cover72]

Musíš ten obrázek strčit do nějakého kontejneru, kterému se dá nastavovat šířka - jako <div>. Takhle se ten javascript snaží nastavovat šířku 90% na celou stránku (element <BODY>), což přirozeně nejde, protože ta je fixní.

[Warthog]

Do DIVu zabalovat netřeba, nastavuje se šířka elementu IMG (v ukázce na 90 % šířky okna) a to je zcela v pořádku. Testováno v Safari, Chrome a FireFoxu, jestli to umí IE netuším a neřeším, pokud ne, tak by DIV mohl pomoci.

Jediné, co je potřeba udělat, je vyházet neviditelné znaky, které se tam dostanou pokud uděláš copy & paste z této stránky do editoru. To JavaScript nerozdejchá a opravdu to pak nefunguje.

[pussylala]

Fakt že jo, posrané neviditelné znaky. Bomba, zatím moc díky...teď to jdu implementovat