Autor Zpráva
jirik0201
Profil
zdravím, potřeboval bych poradit jak zobrazit různě vysoké obrázky pod sebe. šířka je stejná.


pokračuje to pořád dál a dál, jeden vedle druhého.


díky za rady.
anonymníí
Profil *
jirik0201:
Nelze, jediná možnost je řadit ne po řádcích, ale po sloupcích (tzn. nejprve dát obrázky 1. sloupce, pak druhého, třetího).

Při řazení vedle sebe (inline alebo float) není možnost jak zaplnit "zub" vzniklý tím, že vyšší (2. v první řadě) obrázek následuje nižší (první v první řadě).
jirik0201
Profil
OK, v html a v css to nejde. Jde to třeba v javascriptu či php či v jiném? Otázku bych pak přesunul do příslušné kategorie.
anonymníí
Profil *
jirik0201:
V PHP určitě ne. V JS teoreticky ano, dopočítávat souřadnice a jednotlivé obrázky absolutně pozicovat.

Ale je to pro více obrázků těžko udržitelné, zbytečně pomalé a oblbující. Co se ti nelíbí na tom udělat to pořádně - naplnit první sloupec, pak druhý, třetí?
jirik0201
Profil
Obrázky tam budou vkládat uživatelé, ne já. A když tam vloží obrázek další uživatel, ten na prvním místě by se měl posunout na druhé místo, ne pod první obrázek na 5. nebo jiné místo (podle počtu sloupců, což určuje velikost rozlišení daného monitoru). Pak se ty obrázky musí nějak třídit, třeba podle abecedy apod. Navíc těch obrázků na jedné stránce bude časem tisíce. Jako nezobrazí se všechny naráz, když se dojede na konec, tak se pokračuje dál (něco jak tlačítko zobrazit více u googlu či jiných).

Ale kdybych se nad tím zamyslel a nějak to promyslel, možná by to šlo nějak vymyslet. S tím tříděním obrázků je problém.


Díky za rady.
peta
Profil
anonymníí: :)))
V js i php to jde. V js muzes pouzit moznost zvetseni, zmenseni a orezani crop. Totez v php.
http://codegeekz.com/jquery-image-gallery-plugins/
http://codegeekz.com/jquery-grids/
google = javascript image galery photo grid
google = javascript image galery mosaic grid
Joker
Profil
jirik0201:
Jednodušší by asi bylo ty obrázky zarovnat na stejnou výšku, tím by se problém vyřešil sám.
jirik0201
Profil
Joker:
Ano, stejná výška by bylo řešení, ale ztratilo by to ten design. Zkusím pohledat, na doporučení peti, řešení v php.
Plaváček
Profil
jirik0201:

Hodně narychlo spíchnuté zde: http://klient.plavacek.net/galerie.html. Funkční od IE 10 a v novějších verzích ostatních prohlížečů, které podporují použitý fígl z CSS 3. Pro IE 9 a nižší by to šlo ještě poladit, ale na to už jsem byl líný. :)
Joker
Profil
peta:
V js muzes pouzit moznost zvetseni, zmenseni a orezani crop. Totez v php.
Ani jedno z toho neřeší problém.
Resp. pomocí toho by maximálně mohl dosáhnout, aby ty obrázky byly stejně velké. Ale neumístí různě velké obrázky pod sebe.

jirik0201:
Ano, stejná výška by bylo řešení, ale ztratilo by to ten design.
Změna by byla v tom, že by „rovné čáry“ byly mezi řádky a ne sloupci a místo „co s konci sloupců“ by se řešilo „co s konci řádků“.

Jinak při známém počtu sloupců by existovalo řešení, které vyprodukuje jen HTML+CSS: Na serveru udělat kontejner pro každý sloupec. Obrázky by se pak rozhazovaly do jednotlivých kontejnerů podobným způsobem jako když se generují buňky tabulky. Kromě toho by se pro každý obrázek načetla jeho výška a sčítala se výška kontejnerů (sloupců). Dál to záleží na tom, jakým přesně způsobem by ty obrázky měly jít za sebou. Šlo by každý další obrázek vždycky vložit do nejnižšího sloupce. Nebo přeskočit sloupec, který je „na řadě“ v případě, že převyšuje následující sloupec o víc než půlku výšky obrázku (nebo jinou část výšky nebo nějakou konstantu).

Plaváček:
To je dobré… Jen mi to v Opeře scrolluje dost trhaně.
Bubák
Profil
Joker:
Jen mi to v Opeře scrolluje dost trhaně.
Mám počítač starou šunku a u mne v Opeře naprosto bez problémů.
Joker
Profil
Bubák:
Mám počítač starou šunku a u mne v Opeře naprosto bez problémů.
Tak to bude něco v mém prohlížeči.
Ještě jsem to zkoušel a děje se to i na jiných stránkách, jen na téhle to asi bylo víc vidět.
peta
Profil
Joker: ??? Spousta tech screenu vypada presne jako jeho obrazek. Nerozumim, co se ti presne nezda.
Plaváček
Profil
Joker:

peta má výjimečně pravdu. :) Je tam třeba tento jQuery plugin http://mcpants.github.io/jquery.shapeshift/, který asi dělá přesně to, co tazatel požaduje.
Joker
Profil
Plaváček:
peta má výjimečně pravdu. :)
Já nereagoval na ty odkazy, ale na zvětšení, zmenšení, ořezání a crop.
peta
Profil
Joker: A jak to delaji teda ty pluginy, kdyz nezvetsuji, nezmensuji (cili prepocitavaji rozmery obrazku podle toho, aby jim to pekne vyslo), neorezavaji? :)
Joker
Profil
peta:
Nějak nevidím souvislost mezi umístěním obrázků pod sebou a změnou rozměrů obrázku.

Když připustíme změnu rozměrů a ořezání, šlo by rovnou všechny obrázky změnit na stejné rozměry a pak to bude triviální.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: