Flickr resimlerini siteye slideshow olarak çekme

Flickr

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 :

        data: {
            format: 'json',
            method: 'flickr.interestingness.getList',
            api_key: 'buraya  flickr api key eklemeniz gerekiyor'
        }
  •  Head etiketleri arasına eklenmesi gereken bölümler.

Css  dosyaları : 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/south-street/jquery-ui.css" id="theme">
<link rel="stylesheet" href="css/jquery.image-gallery.min.css">
<link rel="stylesheet" href="css/style.css">

 Js  Dosyaları :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
<script src="js/jquery.image-gallery.min.js"></script>
<script src="js/main.js"></script>
  •  Body  etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div>
    <span id="buttonset">
        <input type="checkbox" id="option-fullscreen"><label for="option-fullscreen">Fullscreen</label>
        <input type="checkbox" id="option-slideshow"><label for="option-slideshow">Slideshow</label>
    </span>
</div>
<div id="gallery"></div>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-04-25 tarihinde yayınlandı,Toplam 1804 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...