Blog yazan insanlar sıklıkla kullandıkları fotoğrafları başka aracı sitelere yüklüyorlar. Flickr, Imageshack gibi siteler kullanılıyor bu işler için. Ben de öyle yapıyorum. Photobucket'e yüklüyorum fotoğrafları. Neden Flickr gibi daha az reklamlı ve daha düzenli bir site varken Photobucket'i kullanıyorum daha sonra açıklayacağım.
Yapacağımız iş, Rss kaynağından fotoğrafları çekmek ve güzel bir slide show şeklinde göstermek. Daha doğrusu bunu yapmışlar. Ben sadece Türkçe olarak anlatacağım nasıl olacağını.
Yapan arkadaşlar şu şekilde yapmışlar. Google Api kullanmışlar. Kodları da vermişler bize kullanalım diye. Bize sadece Rss kaynağının adresini yazmak ve bir iki küçük ayar kalıyor. Kodlar aşağıda. <head> </head> kodları arasında yazmamızda fayda var aşağıdakileri.
<!--
copyright (c) 2009 Google inc.
You are free to copy and use this sample.
License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<!-- Scripts for the slideshow -->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
type="text/javascript"></script>
<style type="text/css">
#picasaSlideshow {
width: 250px;
height: 200px;
margin-bottom: 40px;
padding: 5px;
}
</style>
<script type="text/javascript">
/*
* How to make a slideshow with a photo feed using our custom control.
* To see the options, go here or click the docs link in the titlebar:
* http://www.google.com/uds/solutions/slideshow/index.html
*/
google.load("feeds", "1");
function OnLoad() {
var feed = "http://dlc0421.googlepages.com/gfss.rss";
var options = {
displayTime:2000,
transistionTime:600,
scaleImages:true,
fullControlPanel : true
};
var ss = new GFslideShow(feed, "picasaSlideshow", options);
}
google.setOnLoadCallback(OnLoad);
</script>
Yapacağımız sadece
var feed = "http://dlc0421.googlepages.com/gfss.rss";
satırındaki rss linkini kendi istediğimiz şekilde değiştirmek. İstenirse resimlerin gösterileceği boyutlar ile de oynayabiliyoruz. Width: 250px; yazan yerdeki değeri değiştirerek tabii.
Son olarak bu slide showun gözükmesini istediğimiz yere
<div id="picasaSlideshow" class="gslideshow">
<div class="feed-loading">Loading...</div></div>
kodunu ekliyoruz. Tabii Loading... yazan yere Yükleniyor... gibi bir Türkçeleştirme gerekecektir.
Sonuç sağ üstte gördüğünüz şekilde olacak. Mouse ile üzerine gelince fotoğraf duraklıyor ve ileri geri gidebilmek için düğmeler çıkıyor ortaya.
Gelelim bu slide showu nerelerde kullanabileceğimize. Mesela imajları Flickr'a yükleyen blogcular kendi rss beslemesi adreslerini yazarak kendi bloglarındaki resimleri slide show yapabilirler.
Rss adresi şu şekilde bir şey olacak.
http://api.flickr.com/services/feeds/photos_public.gne?id=12345678@N00&lang=en-us&format=rss_200
Flickr'da kategori mantığı var ama bildiğim kadarı ile kategoriler için rss desteği yok. Bu nedenle bir kategori oluşturarak sadece istediğiniz resimleri çekebilmeniz mümkün olmuyor. Fakat bu özellik Photobucket'de var. Örneğin üç tane resmi bu mantıkla sergilemek istiyorsanız, Photobucket'de bir kategori açarsınız ve o üç resmi bu kategori altına yüklersiniz. Daha sonra o kategorinin rss adresini yukarıdaki koda yazarsınız.
Mesela benim bu blog için kullandığım kategorinin rss adresi şu şekilde.
http://feed713.photobucket.com/albums/ww136/aQuaRiSTGenTr/Blog/feed.rss
Photobucket kullanmamın bir başka nedeni de arama sonuçlarına da rss desteği vermesi. Mesela ben "Tolga" şeklinde bir arama yaparak sadece bu arama sonucunda çıkan resimleri bu slide showda gösterebilirim. Bunun örneğini http://www.aquarist.gen.tr adresinde sağ sütunda görebilirsiniz.
Bu özellikleri olan sanıyorum bir de Deviantart var. Onu kullanmadım o nedenle çok yorum yapamayacağım.
Hadi iyi günlerde kullanın. Kolay gelsin.