Autor Zpráva
moom
Profil
Dobrý den, rád bych se prosím zeptal jak správně
postupovat při vytvářeni galérie obrázků.

Mám na stránce asi 60 fotografii v náhledech
a po odkliknutí se pomocí jQuery a Fancybox
zvětší větší obrázek.

Jaký správný tag použít pro Popisek a jeho podnadpis.
Je špatně pokud bude 60x nadpis H1 a H2 na stránce?

Nebo je lepší použít nadpis nižší úrovně, třeba H4
a podnadpis udělat jako SPAN v rámci nadpisu.

A koneckonců je nejlepší jednotlivé fotografie, které
jsou součástí fotogalerie mít jako seznam LI, nebo
samostatné DIV elementy, případně využít HTML5
a použít pro každou fotku FIGURE a FIGCAPTION.

<li> 
  <a href="foto-1.jpg" rel="galerie" title="Název fotky"> 
    <img src="thumb/foto-1.jpg" width="260" height="195" alt="Název fotky"> 
  <h1>Název fotky</h1> 
   <h2>Doplňující text</span></h2>
  </a>
</li>

Máte prosím nějakou radu. Přemýšlím tady nad tím už dvě hodiny
a nic rozumného mě nenapadá, a ten zlatý kompas v TV mně asi taky
nepomůže :)
Chamurappi
Profil
Přemýšlím tady nad tím už dvě hodiny
To budeš každé dvě hodiny zakládat další vlákno? Tohle mi připadá duplicitní.

Můžu se zeptat, proč při psaní do diskuse zalamuješ řádky po pár slovech a ne tam, kde končí odstavec?
moom
Profil
jsem profesí grafik a mám profesní deformaci a zalamuji
řádky, pro moji lepší čitelnost. Nemám rád nepřehledné
dlouhé řádky. Stejně tak dělám jednoznakové předložky
na začátku řádku :)

Někteří kamarádi programátoři to nechápou a je to věčný
boj, ale nemusím vidět na monitoru řádek dlouhý třeba 1920px.

Tak asi tak.

Pokud jsem založil duplicitní vlákno a porušil nějaká pravidla,
tak se omlouvám komunitě :)
Cody
Profil
Nadpis H1 bych nedával, spíše <h2>, nebo <h3>. Podle logiky struktury dokumentu. A popisek bych dal do <p>.
moom
Profil
Děkuji za pomoc. Ještě mě napadlo toto řešení, kde jednotlivé fotografie
jsou položky seznamu UL LI a popisek fotografie je span v rámci odkazu A.

Co myslíte? Je to blbost? A je dobré doplnit k tagu A, IMG i Title?

<li> 
    <a href="img/foto-01.jpg" rel="galerie" title="Místo Realizace"> 
        <img src="img/thumb/foto-01.jpg" width="260" height="195" alt="Místo Realizace">
        <span class="misto-realizace">Místo Realizace</span>
        <span class="druh-realizace">Stěny a podlahy</span> 
    </a>
</li>
Thalia
Profil
moom:
ul li...ty náhledy budou v jednom sloupci? 60 náhledů bych osobně dala do víc sloupců (tabulka?). Co se týče nadpisu a popisku, souhlasím s Codym.

A je dobré doplnit k tagu A, IMG i Title?
Ano.

Chamurappi:
proč při psaní do diskuse zalamuješ řádky
Aby se to petovi vlezlo do okýnka 500 na 500? Já jsem nejdřív myslela, že tu máme nějakého schopného básníka... Trošku upravit počty řádků a slabik a směle může konkurovat Garcilasovým sonetům. moome, dost blbě se to čte a jistě nebudu jediná, kdo ocení, když tady omezíš používání entru. Neboj, řádek nepřeteče.
Cody
Profil
moom:
Pokud "Místo a realizace" plní funkci nadpisu, tak bych ho tam asi nechal. Nedokážu zdůvodnit proč, ale používal bych spíše blokové prvky.
moom
Profil
Thalia: ne, ne, obrázky jsou ve třech sloupcích (float: left;)
u linku jsem sloučil obě informace do TITLE. Myslíte tedy, že by bylo
dobré doplnit i stejný TITLE pro IMG a použít ho i pro ALT?

Nakonec mám zatím toto:

<li> 
    <a href="img/foto-01.jpg" rel="galerie" title="Místo Realizace, Stěny a podlahy"> 
        <img src="img/thumb/foto-01.jpg" width="260" height="195" alt="Foto / Místo Realizace">
        <span class="misto-realizace">Místo Realizace</span>
        <span class="druh-realizace">Stěny a podlahy</span> 
    </a>
</li>

Myslíte, že je lepší toto, kde je tedy duplikovaný TITLE i pro IMG?

<li> 
    <a href="img/foto-01.jpg" rel="galerie" title="Místo Realizace, Stěny a podlahy"> 
        <img src="img/thumb/foto-01.jpg" width="260" height="195" alt="Místo Realizace, Stěny a podlahy" title="Místo Realizace, Stěny a podlahy">
        <span class="misto-realizace">Místo Realizace</span>
        <span class="druh-realizace">Stěny a podlahy</span> 
    </a>
</li>

Nebo jak píše Cody, že by použil blokové prvky.
Koukal jsem na awwwards.com kde popisky u obrázků
řeší skrze div, kde by výsledný kód byl asi tento:


<li> 
    <a href="img/foto-01.jpg" rel="galerie" title="Místo Realizace, Stěny a podlahy"> 
        <img src="img/thumb/foto-01.jpg" width="260" height="195" alt="Místo Realizace, Stěny a podlahy" title="Místo Realizace, Stěny a podlahy">
        <div class="misto-realizace">Místo Realizace</div>
        <div class="druh-realizace">Stěny a podlahy</div> 
    </a>
</li>

Kurňa taková blbost a rád bych to vyřešil jak nejlíp to jde...
Původně jsem myslel, že použiji FIGURE, ale asi to nemá smysl
u galérie 60 obrázků.

Omlouvám se za řádky, ale věřím, že existuje tolerance k mimozemským civilizacím :)

Vaše odpověď

Mohlo by se hodit

Zajímavé čtení:
Poptávání výměny odkazů je na této diskusi nežádoucí.

Prosím používejte diakritiku a interpunkci.

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