Fancybox

By

jQuery FancyBox ve Parallax Birleşimi Galeri | mintik.com

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.

jQuery FancyBox ve Parallax Birleşimi Galeri | mintik.com

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

  1. 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.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...


Leave a Comment

Your email address will not be published.

You may also like

Trend

Hot News