Galerija slik

Za kreiranje galerije slik uporabimo CSS.

Galerija slik s pozicioniranjem float in psevdorazredom hover

Primer izdelave galerije slik s pozicioniranjem float. Slike galerije se samodejno razporedijo glede na razpoložljiv prostor. S CSS oblikujemo okvir slike, s psevdorazredom hover pa oblikujemo ozadje okvirja slike, ko je kurzor nad sliko. Povezava odpre povečano sliko v novem oknu oz. zavihku brskalnika:

<div class="primer1">
   <a href="../../_slike/css/gore/brana.jpg" target="_blank">
   <img src="../../_slike/css/gore/brana_min.jpg" width="133" height="100" alt="Brana" />
   <div class="napis">Brana</div></a>
</div>
<div class="primer1">
   <a href="../../_slike/css/gore/grintovec.jpg" target="_blank">
   <img src="../../_slike/css/gore/grintovec_min.jpg" width="133" height="100" alt="Grintovec" />
   <div class="napis">Grintovec</div></a>
</div>
...

div.primer1 {
   margin: 5px;
   border: 1px solid rgba(249,147,1,1.00);
   height: auto;
   width: auto;
   float: left;
   text-align: center;
}
div.primer1 img { padding: 5px }
div.primer1 a { color: #888; text-decoration: none }
div.primer1 img:hover { background-color: rgba(249,147,1,1.00) }

Brana

Grintovec

Jezerska kočna

Kokrska kočna

Planjava

Rinke

Skuta

Turska gora

Primer v novem oknu oz. zavihku.

Galerija slik z oznakama figure in figcaption ter lastnostjo visibility

Najprej v HTML izdelamo oznako id, ki jo poljubno poimenujemo. V oznako vstavimo seznam in slike. Uporabimo tudi oznaki figure in figcaption. Pred vsako sliko dodamo tudi manjšo sliko, ki je namenjena za predogled in se hitreje naloži. V primeru je uporabljena ista slika, ki je zmanjšana s pomočjo lastnosti width in height.

Oznaki id določimo relativen položaj in seznamu odstranimo pike. Uporabimo psevdorazred hover s katerim določimo transparentno ozadje in obrobo slik. Večjo sliko skrijemo in ji določimo absoluten položaj. Določimo še obliko večje slike, ko se s kurzorjem zapeljemo nad manjšo sliko:

<div id="primer2">
   <ul>
      <li>
         <img src="../../_slike/css/gore/kokrska-kocna.jpg" width="100" height="75" alt="Kokrska kočna"/>
         <figure>
            <img src="../../_slike/css/gore/kokrska-kocna.jpg" width="500" height="375" alt="Kokrska kočna"/>
            <figcaption>Kokrska kočna</figcaption>
         </figure>
      </li>
      <li>
         <img src="../../_slike/css/gore/jezerska-kocna.jpg" width="100" height="75" alt="Jezerska kočna"/>
         <figure>
            <img src="../../_slike/css/gore/jezerska-kocna.jpg" width="500" height="375" alt="Jezerska kočna"/>
            <figcaption>Jezerska kočna</figcaption>
         </figure>
      </li>
      ...
      ...
   </ul>
</div>

#primer2 { position: relative; width: 110px }
#primer2 ul { list-style:none; padding-left:5px }
#primer2 img { border: 2px solid white; margin: 0 5px 5px 0 }
#primer2 img:hover { border: 2px solid #FC8E02; background-color: transparent }
#primer2 figure {
    position: absolute;
    background-color: #F7DFA3;
    padding: 5px;
    border: 1px dotted #FC8E02;
    visibility: hidden;
    color: black;
    text-decoration: none;
}
#primer2 li:hover figure img {
    border: none;
    padding: 5px;
    max-width: 550px;
}
#primer2 li:hover figure {
    visibility: visible;
    top: 0;
    left: 100px;
}
#primer2 figcaption { color: gray; padding-left:10px }

Primer v novem oknu oz. zavihku.