Daha önce jQuery Fancybox Gallery ve jQuery Parallax Galeri adı altında iki ayrı galeri örneği paylaşmıştık sizlerle. Bu seferki konumuzda bu iki galeri örneğinin birleştirilmesi ile oluşturduğum galeri örneğini paylaşıcam. Demoyu bir kaç şekilde hazırladım biricisi oval resimler, ikincisi kare resimler. Her iki demoda sayfanın en altında sabit olarak duruyor.
- Kodlarımızın Css kısmında #genel_cerceve isimli kısımdan position: fixed; kısmını silerseniz galeri örneğini istediğiniz alana taşıyabilirsiniz. Eğer silmezseniz sayfanın en altında sabit olarak durmaya devam eder. Bana göre en iyi durduğu yer orasıydı onun için orada sabitlemek istedim.
- Demo ile alakalı anlatmak istediğim bir diğer özellik #genel_cerceve isimli çerçevemizin genişliği tarayıcı sayfasının % 50 si kadarlık bir alanı kaplıyor. Tarayıcı ekranı genişledikçe bahsettiğimiz çerçevemizde otomatik yüzde 50 oranında bir büyüme gösteriyor.
- #genel_cerceve isimli çerçevemizin hemen altında 1600px‘lik #cerceve ismini verdiğim bir alan ekledim bu alan içerisine 22 adet resim ekledim yaklaşık olarak 27-28 adet resim yüklenene kadarda çerçevede bir hata söz konusu değil. Eğer daha fazla resim eklerseniz #cerceve isimli kısımdan width: 1600px yazısını bulup kendinize göre bir boy oranı belirlemeniz gerekiyor.
Aşağıda verdiğim demo adreslerinden demoların çalışır bir örneğini ve sizin için gerekli olan kaynak kodları bulabilirsiniz.
- Demo resimlerine tıkladığınızan sayfa ekranının ortasında yükleme iconu belirip fade geçiş efecti ile ekran siyah renkten gri renge dönüşüyor. Birde resimleri değiştirmek istediğiniz zaman sağ ve sol tarafta ok işaretleri beliriyor. Ok işaretlerini kullanarak yadamouse tekerleğini çevirerek resimleri değiştirebilirsiniz. Klavyeden sağ sol tuşlarını kullanarakta resimleri değiştirebilmeniz mümkün.
Demo 1 : jQuery Galeri Oval Resimler
Demo 2 : jQuery Galeri Keskin Kenarlı Resimler
- Oval olan demo ile alakalı söylemem gereken bir diğer özellik css3 border radius özelliği. Bu özellik sayesinde dörtgen olan resimlerimiz tarayıcılarda yuvarlak olarak görünür. İE9, Mozilla Firefox, Safari ve Google Cherome tarayıcılarında görünüm aynı hepsinde resimler yuvarlak olarak görünüyor ama Opera tarayıcısında resim değilde resmin etrafındaki border yani çizgi yuvarlak şekle dönüşüyor. Hatayı bir türlü düzeltemedim ama galiba tarayıcıdan kaynaklanıyor. Radius ayarı diğer tarayıcılarda nesneyide ( resmi ) desteklerken galiba opra tarayıcısı sadece nesne etrafındaki çizgileri destekliyor. Oda o kadar büyük bir sorun değil aslında. En iyisi mozilla ve cherome deniyordu ama Microsoftun son geliştirdiği İE9 galiba hepsinden daha iyi. Ayrıca yavaş yavaş Css3 içinde çalışmalara başladılar. Css3’ün birkaç tane dışında geri kalan diğer bütün özelliklerini İE9 destekliyor. Buda webtasarımcılar için müjdeli haber denebilir galiba : )
Yakında sizlere İnternet Explorer için Css3 konularını kısmet olursa yavaş yavaş anlatıcaz.
