| Autor | Zpráva | ||
|---|---|---|---|
| moskva Profil * |
#1 · Zasláno: 21. 8. 2013, 21:46:34
Dobrý den,
živá ukázka je zde: http://www.pensionsilma.cz Mám představu, že obrázky promítající se na pravé straně vyplní všechen zbylý prostor viewportu - tedy, že se vykreslí v závislosti na rozlišení monitoru. Pokud si ukázku otevřete v rozlišení 1366x768, tak pod slideshow se vykreslí šedý pruh. Předpokládám, že problém toho volného místa je v tomto zápisu: #slideshow img {max-width: 100%; height: auto;} takže se obrázek přizpůsobí dostupné šířce okna a výška obrázku se dopočte tak, aby byl zachován jeho správný poměr, čímž vznikne ono prázdné místo. Zkoušel jsem ten zápis prohodit na max-height: 100%; width: auto, ale při tomto zápisu k vykreslení obázku vůbec nedojde.
Předpokládám, že je cesta, jak můj problém vyřešit pomocí CSS, ale vůbec nemám ponětí, jak to udělat. Vím, že poměr obrázku budu muset "rozbít", aby se nedeformoval do úzkých nudlí, napadlo mě použít na správném místě overflow: hidden? Taky mě napadlo využít javascript, kdy bych zjistil scriptem výšku okna a tuto výšku pak předal potřebným obrázkům? Předem děkuji za Vaše rady a podněty. :) |
||
| Kcko Profil |
#2 · Zasláno: 21. 8. 2013, 22:02:37
|
||
| moskva Profil * |
#3 · Zasláno: 22. 8. 2013, 20:49:15
kcko:
Děkuji za tip. Vypadá to obstojně, ale zkusil jsem to implementovat a obrázky se mi přestaly vykreslovat. Zkusím to ještě poladit. |
||
| yFang Profil |
#4 · Zasláno: 22. 8. 2013, 21:27:49
moskva:
Protože div#slideshow nemá žádnou výšku, zkus ji nastavit na 100%. |
||
| moskva Profil * |
#5 · Zasláno: 22. 8. 2013, 22:26:20
yFang: děkuji za doporučení, ale tady problém není. Výšku prvku nemusím předem definovat, aby došlo k jeho vykreslení. Pokud nezadám žádnou výšku, prvek si jí dopočítá podle svého obsahu obsahu.
Mě se teda zatím nepodařilo ani zjistit, jestli ten script opravdu funguje. Anglicky umím jen velice málo. Online příklad mi nic neřekl a stažená verze mi nefunguje :) Zítra zkusím ten script a změny kolem něj vykuchat, jestli se obrázky opět rozeběhnou. Jestli jo, asi se pokusím najít jiné řešení. |
||
| Kcko Profil |
#6 · Zasláno: 22. 8. 2013, 22:29:17
moskva:
Funguje, už jsem ho použil. |
||
| moskva Profil * |
#7 · Zasláno: 22. 8. 2013, 22:44:03
Tak někde dělám chybu :(
Když odstraním tento řádek <script src ="http://www.pensionsilma.cz/wp-content/themes/pensionsilma/js/imgLiquid-min.js" type="text/javascript"></script> obrázky se opět vykreslí. Kcko: Nemohl by jsi zde napsat odkaz na stránky kde ti to jede? Kouknul bych se co dělám špatně. |
||
| Kcko Profil |
#8 · Zasláno: 22. 8. 2013, 22:45:05
moskva:
Ne, je to privátní a drahý projekt ;) ale zítra Ti spíchnu nějaké demo. |
||
| moskva Profil * |
#9 · Zasláno: 22. 8. 2013, 22:51:49
Kcko: tak to bych ti byl moc vděčný :)
já zatím v těch scriptech dost tápu. Byl jsem nedávno upozorněn, že zbytečně tahám dvě jquery knihovny a tenhle script používá zase novou - nevím jestli se mi to nemůže nějak bít. |
||
| Kcko Profil |
#10 · Zasláno: 23. 8. 2013, 10:12:09
|
||
| moskva Profil * |
#11 · Zasláno: 24. 8. 2013, 20:19:50 · Upravil/a: moskva
Kcko: Ok, vyzkouším to zevrubně zítra v práci. Vykuchám ty ostatní knihovny atd. Každopádně ještě jednou díky za tvůj čas :)
Já jen ještě čistě teoreticky, než se zítra do toho pustím se vší vervou... <div class="imgLiquidFill imgLiquid" style="width:600px; height:600px;">
<img alt="Woody" src="https://dl.dropboxusercontent.com/u/6983010/wserv/imgLiquid/examples/2010_Toy_Story_3_USLC12_Woody.jpg" />
</div>
<br>
<div class="imgLiquidFill imgLiquid" style="width:600px; height:200px;">
<img alt="Woody" src="https://dl.dropboxusercontent.com/u/6983010/wserv/imgLiquid/examples/2010_Toy_Story_3_USLC12_Woody.jpg" />
</div>koukám na to HTML a jen tak pro pořádek... koukám, že ty divy maj nastavený pevnou šířku a výšku, ale to já u toho svého divu neznám. Nefunguje ten script tak, že implementuje různě veliké obrázky do divu s předem nastavenou šířkou a výškou tak, aby byly uživatelsky co nejpřívětivější? Pořád přemýšlím, jestli by nebylo jednodušší zjistit pomocí JS výšku divu slideshow a pak tuto výšku předat slideshow img a nastavit těmto obrázkům width: auto a overflow:hidden... Jestli jsou mé úvahy mylné, tak mě prosím omluv, ale jak jsem psal výše v těchto scriptech ještě docela lítám :) |
||
|
Časová prodleva: 11 let
|
|||
0