Flickr ImageGallery

0
306
Görüntülenme

Full screen image gallery

Evet yine mükemmel hatta kusursuz çalışmalardan bir tanesini sizlerle paylaşıyoruz bu gün.  Flickr web sitesine eklemiş olduğunuz fotoğraflarınızı Flickr api kullanarak json ile web sitenize çağırmanıza yarayan bir tane uygulama. Aslında bu özelliği için mükemmel demedim yanlış. ImageGallery uygulamasının asıl mükemmel olan özelliği 25 tane farklı renge sahip yani 25 farklı web sitesine uyumlu tema desteği ile tam ekran slideshow olarak kullanılabiliyor olmasıdır. Ayrıca 9 farklı geçiş efektiyle beraber hepsini karışık olarak yapabilmesi de cabası 🙂

Örnek vermek gerekirse akla ilk gelen bildiğiniz üzere Facebook sitesindeki resim inceleme olayıdır. Resmin üzerinde bulunan iki yöne doğru açılan ok işaretlerine tıkladığımızda tarayıcı çerçevesi içinde değil bilgisayar ekranının tamamını kapatan bir resim inceleme çerçevesi açılır. Klavyeden f11 tuşuna bastığınızda da web sitesi bunun gibi tam ekran görüntüye geçer. ImageGallery de aynı bu şekilde resim büyütme özelliğine sahiptir.

 Sebastian Tschan yapmış olduğu bu uygulamanın dahası da var. Dilerseniz lightbox tarzı tıklandığında açılan modal popup çerçeveleri olarak ta kullanabilirsiniz. Demo sayfası açılır açılmaz önce küçük resimler yüklenir  ve herhangi bir tanesine tıkladığınızda modal pencere içinde ajax ile yüklenerek resmin büyük versiyonu sitede görünür. Fullscreen ve Slideshow butonlarına basarsanız tam ekran otomatik değişen resim galeri olarak inceleyebilmeniz mümkün. Mouse tekerleği ile resimleri değiştirme ve klavye yön tuşları ile de değiştirme seçeneği bulunuyor.

Kullanım

Eklentiyi  kullanmaya başlamadan önce Flickr üzerinde  bulunan resimlerinizi eklentide  kullanabilmek  için buradan flickr api kodunuzu  alıp main.js  dosyasında  bulunan  api_key kısmına ekleyin

Örnek :

  •  Head etiketleri arasına eklenmesi gereken bölümler.

Css  dosyaları : 

 Js  Dosyaları :

  •  Body  etiketleri arasına eklemeniz gereken bölüm.

Html : 

 

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Loading...
Önceki İçerikLavalampStyle horizontal nav
Sonraki İçerikTiptip.js – 230 tane ikon
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Lütfen yorumunuzu yazın.
Lütfen İsminizi bu alana yazın.