Css ile akordion resim galerisi oluşturma

Css kullanarak resim galerisi nasıl yapılır ?

---

Bu yazımda sizlerle birlikte akordion resim galerisi yapılışını göstereceğim
Css ile akordion şeklinde resim galerisi yapıp bunu sitenizde kolay bir şekilde yayınlayabilirsiniz.
Sizde biliyorsunuz ki bu işlemi java script kodları ile de yapabiliyoruz. Ancak biz bunu daha kolay hale getirerek Css (Cascading Style Sheets) ile gerçekleşrirelim.
Şimdi neler yapacagız onları inceleyelim :
İlk olarak akordiyon görüntümüzün iskeletini oluşturacak olan resimlern bulunduğu sütunları html ile oluşturacagız.
Daha sonra oluşturduğumuz bu sütunlara görünüm kazandıralım. Bunu tabiki de Css ile yardımı ile yapacağız.
Son olarak da oluşturduğumuz bu alana dinamik bir yapı oluşturcağız.

1.HTML de div kullanımı :

2.Css ile görünüm kazandırma :

#bir {
background : url(http://a7.sphotos.ak.fbcdn.net/hphotos-ak-snc4/36895_409493414153_850699153_4211590_5522065_n.jpg) no-repeat center;
}
#iki{
background : url(http://a5.sphotos.ak.fbcdn.net/hphotos-ak-ash1/30540_391005004153_850699153_3775106_188818_n.jpg) no-repeat center;
}
#uc {
background : url(http://a3.sphotos.ak.fbcdn.net/hphotos-ak-ash1/30790_398928419153_850699153_3960476_3805619_n.jpg) no-repeat center;
}
#dort{
background : url(http://a7.sphotos.ak.fbcdn.net/hphotos-ak-snc3/28510_387144814153_850699153_3696732_665125_n.jpg) no-repeat center;
}


Yukarıdaki kodlar sayesinde akordiyonumuzda görüntülenmesini istediğimiz fotoğrafları background olarak olusturduğumuz divlere yerleştiriyoruz.

#akordiyon {
width : 400px;
height : 474px;
background : #bebebe;
}
#akordiyon div {
width : 25%;
height : 100%;
float : left;

Daha sonra yukarıda yazdığım kodlar ile akordiyon tanımlamamızda akordiyona ait yükseklik ve genişlik değerlerini fotoğraflarınızın büyüklüğüne göre değiştirebilirsiniz.
%25 ve %100 tanımlamaları ise 4 adet fotoğrafımız olduğu için oluşturduğumuz alanın 4 te 1 lik kısmını kaplaması içindir.

Son olarakta mouseumuz fotoğraflar üzerine geldiğinde değişiklik yaratmak için şu kodları Css dosyamıza ekleyelim.

#akordiyon:hover div {
width : 40px;
overflow:hidden;
}

Yukarıdaki kodda üzerine geldiğimiz fotoğrafın görünümünün büyüklüğüne göre diğer fotoğrafların küçüülmesi gerekmektedir. Bu yüzden diğer fotoğrafların 40 px olmasını istedim.Daha sonra da aşağıda yazmış olduğum kodu Css dosyamıza ekleyelim.

#akordiyon:hover div:hover {
width : 280px;
overflow:auto;

Yukarıdaki kodda ise mouse ile üzerine geldiğimiz fotoğrafın büyüklüğü belirtiyoruz.Burada neden 280 px yaptığımı düşünürseniz.Toplam alanın 400 px olarak belirlemişik. Daha sonra da mouse ile üzerine geldğimizde diğer resimlerin boyutunu 40 px olarak belirledim. 4 tane resimin olduğuna göre bunlardan 3 ünün 40 px boyutunda olması gerektiğini üstteki komutla belirledim.3x40 =120 Geriye kalan alanımız ise 400-120= 280 olduğu için genişliğimizi 280 olarak belirtiyoruz.


Yaptığım uygulamayı aşağıda inceleyebilirsiniz.Html ve css sekmelerinden kodları görebilir daha sonra play tuşu ile uygulamayı çalıştırabilirsiniz.