CSS ile Resim Galerisi

15 Ocak 2010 tarihinde Altuğ Orgun yazmış. İyi de etmiş.

Bu yazı 1 ay 24 gün önce yayınlanmış olduğundan güncelliğini yitirmiş veya içeriğindeki bilgilerin geçerliliği kaybolmuş olabilir. Herhangi bir yanlış anlaşılmadan rzrarti sorumlu değildir.

Resim galerileri çoğu kullanıcı için vazgeçilmezdir, hatta yüzlerce “galeri” temeliyle kurulmuş websitesi vardır fakat basit kodlamalar kullanılmaz bu siteler için, genellikle mysql + php betik(script)leri kullanılır. Fakat CSS ile oldukça basit bir kodlamayla, basit bir resim galerisi oluşturmak mümkün. O basit kodlara geçelim isterseniz :) …

CSS Kodları:

ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
background:#888 url(galeribg.jpg);
}
#gallery li {
list-style-type:none;
width:64px;
height:48px;
float:left;
z-index:100;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}
#gallery a {
position:relative;
width:64px;
height:48px;
display:block;
float:left;
z-index:100;
cursor:default;
}
#gallery a img {
position:relative;
width:62px;
height:46px;
border:1px solid #888;
z-index:100;
}
#gallery a:hover {
width:160px;
height:120px;
padding:108px 144px;
position:absolute;
left:0;
top:0;
z-index:20;
}
#gallery a:hover img {
background:#eee;
position:relative;
width:160px;
height:120px;
border:0;
z-index:20;
}
#gallery a:active, #gallery a:focus {
background:transparent;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
width:320px;
height:239px;
border:0;
z-index:10;
}
/* hack for Internet Explorer */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:448px;
font-size:0;
}

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
background:#888;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:hover img {
background:#aaa;
position:relative;
width:320px;
height:240px;
border:0;
z-index:10;
}
}

Burda ufak bir detay var: background:#888 url(galeribg.jpg);
galeribg.jpg galerinin arkaplanıdır, fakat galerideki resimlerin de arkaplanı bu resimde yer alıyor. Burda da görebilirsiniz tam olarak.

HTML Kodları:

<ul id=”gallery”>
<li><a href=”#nogo”>
<img src=”g1.jpg” alt=”#1″ title=”#1″ /></a></li>
<li><a href=”#nogo”>
<img src=”g2.jpg” alt=”#2″ title=”#2″ /></a></li>
<li><a href=”#nogo”>
<img src=”g3.jpg” alt=”#3″ title=”#3″ /></a></li>
<li><a href=”#nogo”>
<img src=”g4.jpg” alt=”#4″ title=”#4″ /></a></li>
<li><a href=”#nogo”>
<img src=”g5.jpg” alt=”#5″ title=”#5″ /></a></li>
<li><a href=”#nogo”>
<img src=”g6.jpg” alt=”#6″ title=”#6″ /></a></li>
<li class=”rgt”><a href=”#nogo”>
<img src=”g7.jpg” alt=”#7″ title=”#7″ /></a></li>

<li class=”lft”><a href=”#nogo”>
<img src=”g8.jpg” alt=”#8″ title=”#8″ /></a></li>
<li class=”rgt”><a href=”#nogo”>
<img src=”g9.jpg” alt=”#9″ title=”#9″ /></a></li>
<li class=”lft”><a href=”#nogo”>
<img src=”g10.jpg” alt=”#10″ title=”#10″ /></a></li>
<li class=”rgt”><a href=”#nogo”>
<img src=”g11.jpg” alt=”#11″ title=”#11″ /></a></li>
<li class=”lft”><a href=”#nogo”>
<img src=”g12.jpg” alt=”#12″ title=”#12″ /></a></li>
<li class=”rgt”><a href=”#nogo”>
<img src=”g13.jpg” alt=”#13″ title=”#13″ /></a></li>
<li class=”lft”><a href=”#nogo”>
<img src=”g14.jpg” alt=”#14″ title=”#14″ /></a></li>
<li class=”rgt”><a href=”#nogo”>
<img src=”g15.jpg” alt=”#15″ title=”#15″ /></a></li>
<li class=”lft”><a href=”#nogo”>
<img src=”g16.jpg” alt=”#16″ title=”#16″ /></a></li>
<li class=”rgt”><a href=”#nogo”>
<img src=”g17.jpg” alt=”#17″ title=”#17″ /></a></li>

<li class=”pad”></li>

<li class=”lft”><a href=”#nogo”>
<img src=”g18.jpg” alt=”#18″ title=”#18″ /></a></li>
<li><a href=”#nogo”>
<img src=”g19.jpg” alt=”#19″ title=”#19″ /></a></li>
<li><a href=”#nogo”>
<img src=”g20.jpg” alt=”#20″ title=”#20″ /></a></li>
<li><a href=”#nogo”>
<img src=”g21.jpg” alt=”#21″ title=”#21″ /></a></li>
<li><a href=”#nogo”>
<img src=”g22.jpg” alt=”#22″ title=”#22″ /></a></li>
<li><a href=”#nogo”>
<img src=”g23.jpg” alt=”#23″ title=”#23″ /></a></li>
<li class=”rgt”><a href=”#nogo”>
<img src=”g24.jpg” alt=”#24″ title=”#24″ /></a></li>
</ul>

“gallery” stilini kodlarımıza da yansıttık ve böylece resim galerimizi tam anlamıyla oluşturmuş olduk. Tek yapmanız gereken resim linklerini düzenlemek olacak ;) . Haa aklıma gelmiken :) , bu resim galerisi IE 6 ve Firefox‘ta sorunsuz çalışırken, Opera‘da resmi tam boyutta görünteleyemeye izin vermiyor.

Çalışmanın bir örneğini görmek için BURDAN buyrun…