Avtor: -primož- 01.01.10

CSS galerija 650 predelava in nadgradnja

Predelana CSS galerija 650 uporablja psevdo element first-child, zato je HTML zgradba galerije veliko preprostejša, kot pri originalni galeriji. Galerija dela thumbnaile iz originalnih slik, zato dodatne slikice niso potrebne. Zaradi lepšega izgleda galerije so dodane tudi obrobe, ki se spreminjajo glede na hover.

CSS Galerija 650 v2 - PRIKAZ

Galerija650.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<style type="text/css">
 
div#prva_slika{width: 428px; height: 405px; padding: 10px;
           background: url(c.jpg) 12px 96px no-repeat; border: 1px solid #ff9900;}
 
a.povezave img{border: 2px solid #ff9900; width: 100px;}
a.povezave img:hover{border: 2px solid #3399ff;}
a.povezave img:first-child{display: none; width: 424px;
           position:absolute; top: 103px; border: 2px solid #3399ff; z-index: 100;}
a.povezave:hover img:first-child{display:block;  z-index: 1000;}
a.povezave:focus img:first-child{display:block;}
 
</style>
 
</head>
 
<body>
<div id="prva_slika">
<a class="povezave" href="#"><img src="a.jpg" /><img src="a.jpg" /></a>
<a class="povezave" href="#"><img src="b.jpg" /><img src="b.jpg" /></a>
<a class="povezave" href="#"><img src="c.jpg" /><img src="c.jpg" /></a>
<a class="povezave" href="#"><img src="d.jpg" /><img src="d.jpg" /></a>
</div>
</body>
</html>

PRIKAZ galerije

Razlaga kode:

Pri prejšnji verziji CSS galerije smo večje slike nadzirali tako, da smo jih vključili v značko <span>. Kot lahko vidite, tukaj ni nobenih spanov. Za isti učinek smo uporabili psevdo razred z imenom :first-child. :first-child nam da namreč nadzor nad prvo sliko, od obeh slik, ki sta vstavljeni med <a> in </a> znački.

Tako prva slika (prvi img) predstavlja večjo sliko, ki se pokaže, ko gremo z miško čez manjšo slikico. Prvi sliki smo določili display: none, da se ne prikaže, dokler ne gremo z miško čez thumbnail (hover). Takrat se display spremeni na display: block in slika se prikaže.

:focus je tukaj zato, da slika, po kliku ostane prikazana. Prikazana slika ima določen manjši z-index, kot pa hover slika, saj se mora hover slika prikazati nad trenutno prikazano sliko.

Prva prikazana slika je v div vstavljena, kot ozadje in jo lahko odstranite. Če jo odstranite lahko nato prikazujete slike različnih velikosti in ne bo izpadlo čudno.

To bi bilo vse od razlage.

*Če želite thumbnaile kaj posebej urejati jim določite poseben razred (class).

Upam, da vam bo CSS galerija 650 prav prišla Very Happy

Komentiraj:

Primož Novak

|20-02-2010 22:42

Jaz bi pa lepo prosil, če bi lahko malo bolj natančno razložil
*Če želite thumbnaile kaj posebej urejati jim določite poseben razred (class).
Ker ne razumem kaj moram dati v class.
Hvala

-primož-

|21-02-2010 01:03

Malo neprevidno sem napisal. Thumbnaile urejate v vrstici 12 "a.povezave img", izgled le teh, ko greste z miško čez pa urejate v vrstici 13 "a.povezave img:hover".

*Stavek o posebnem urejanju thumbnailov se je nanašal predvsem na to, če želite kakšnega posebej izpostaviti oz. spremeniti. Takrat v značko slike, ki predstavja thumbnail (drug img v vrstici) vstavite id="posebnaOblika" , med style in /style pa vstavite #posebnaOblika{ ... }

Namesto class sem vam v komentarju predlagal id, ker ga brskalniki bolj upoštevajo in boste z njim dosegli najboljši učinek.

PRIMER: levi zgornji thumbnail ima vedno črno obrobo (poglejte izvorno kodo)

http://moje-mesto.com/css_primeri/css_galerija_650/a.html

Na isti način lahko urejate tudi večje slike (prvi img).

Če vam z odgovorom nisem pomagal mi povejte vaš problem oz. želje in poskušal bom biti bolj natančen.

Primož Novak

|21-02-2010 14:36

Kakšna bi pa bila koda, če bi želel, da se ti thumbnail premikali - overflow v x smeri naprimer, velika slika bi pa bila vedno na enem mestu

-primož-

|21-02-2010 16:59

Da bi bil drsnik, ki bi ga moral ročno premikati, ali da bi se thumbnaili avtomatsko vrteli?!? Ker če hočete, da se vrtijo potrebujete javascript.

Primož

|21-02-2010 17:25

Ne jaz bi rad drsnik

-primož-

|21-02-2010 19:51

Tako galerijo, kot jo potrebujete vi sem našel na spletni strani cssplay.co.uk

http://www.cssplay.co.uk/menu/scroll_gallery.html

Odstranil sem vam oglase, besedilo in ostalo vsebino s te strani, tako da lahko le kodo in slike najdete tukaj:

http://moje-mesto.com/css_primeri/scroll_galerija/scroll_gallery.html

Kode je kar nekaj, zato upam, da ne boste obupali.

Primož Novak

|21-02-2010 22:05

Najjjjlepša Hvala!

-primož-

|21-02-2010 22:12

Pomagam, če le morem

parkodlak

|04-02-2011 19:09

Hey. Mene pa zanima kako bi lahko naredil da bi spodaj pod vsako sliko imel še opis-članek skratka neko besedilo? Podobno kot si kasneje objavil link, samo brez drsnika in da glavna slika Hvala za pomoč.
Lp, rok

-primož-

|14-02-2011 13:24

Pozdravljen,

se opravičujem za pozen odgovor, ki bo poleg tega verjetno tudi pomankljiv.

Nisem šel testirati a če bi jaz to delal bi dal besedilo v besedilo (pobriši vprašaje), poleg obeh slik, ta span pa bi nato kontroliral tako, kot sliko "a.povezave img:first-child" le da bi tukaj napisal "a.povezave span{}".

Upam, da nisem bil presplošen.

Lp,
-primož-

Sorodni vodiči
Z miško označeno besedilo na spletni strani Flyout meni Meni s slikami + HOVER list-style Velike črke, male črke in velika začetnica s CSSjem	hover oblaček za namig Noga spletne strani Div v divu in problem z višino - overflow: auto Urejanje obrazcev s CSSjem Prosojnost slike s CSSjem

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."

Moje-Mesto.com

Oglasi

Naključni CSS vodiči