Flickr kullanıcısı iseniz, fotoğraf galerinizdeki çalışmalardan bir slayt gösterisi oluşturup, blog'unuza, web sayfanıza aktarmak istiyorsanız, küçük bir çözüm ürettim.

Örneği görmek için: http://azer.ueuo.com/example.html
Esas Sayfa & Download: http://azerkoculu.blogspot.com/2006/...our-pages.html

Özellikleri:

• Flickr'a bir fotoğraf eklediğiniz an, slayt gösteriniz fotoğrafı alıp döndürmeye başlar
• Resimler orjinal boyutu ile slayt'a eklenir, herhangi bir görüntü kaybı söz konusu olmaz.
• Ziyaretçileriniz slayt gösterisindeki resimi sağa sola çekerek tüm fotoğrafı küçük bir çerçevede görebilirler
• Slayt gösterisine galerinizdeki etiketlerle çağrım yapabilirsiniz
• Slayt gösterisinde resimlerin ilk olarak sol üst kısımları görünür, ama bunu değiştirebilirsiniz
• Bunun için tek yapmanız gereken flickr'da fotoğrafın başlığına "position:-50px -50px" komutunu eklemek.Artık resimleriniz istediğiniz pozisyonda açılacak.
• Bu scripti blogger.com gibi servislerde, hiç upload işlemi yapmadan, 3 adımda kullanabilirsiniz. Download edeceğiniz dosyaları yüklemeniz şart değil, benim sunucumda yüklenmiş olanları kullanabilirsiniz.
• Bu scripti indirip özgürce kullanma hakkına sahipsiniz, istediğiniz gibi değiştirebilir hatta kendinize özgün bir versiyonunu dağıtabilirsiniz.

Kurulum:

• Scripti eklemek istediğiniz sayfayı bir HTML editörü ile açın
• Aşağıdaki kodu sayfanın en altında bulunan </body> kodundan hemen önce yapıştırın.Burada en önemli ayrıntı flickr üye numarasının girilmesi gereken alan.Buraya dikkat edin.Flickr'da sadece bir üyenin galerisinden fotoğraf çekmek isterseniz bu bilgiyi girmek zorundasınız.Kendi Üye numaranızı buradan alabilirsiniz.Sağdaki alanda yazıyor bakınca görürsünüz.Tekrar koda dönelim, aşağıdakini </body> den hemen önce yapıştırın:
  
  
  

  <script language="JavaScript" src="http://koculu.net/jscss/dhtml/flickr/include.js"></script>
  <script language="JavaScript" src="http://koculu.net/jscss/dhtml/flickr/flickr.PHP?fid=YOUR FLICKR USER ID&tags="></script>

• Aşağıdaki kodu </head> etiketinden hemen önceye yapıştırın
  

  <style type="text/CSS">
  	/* 
  	<--------
  
  	Developer: Evren Azer Koçulu
  	E-mail: hello.azer@gmail.com
  	Website: www.koculu.net
  	Start: 12 June 2006
  	Finish: 12 June 2006
  
  	Check for updates: http://azerkoculu.blogspot.com
  	Example: http://azerkoculu.blogspot.com
  
  	-------->
  	*/	
  
  	div#loadingscreen {  position:absolute; z-index:3;  background:#000; width:380px; height:100px; filter:alpha(opacity:80); opacity: 0.8; -moz-opacity:0.8; padding-top:100px; text-align:center; }
  	div#infoscreen { display:none; position:absolute; z-index:2; width:374px; height:20px; margin:170px 0 0 0px; padding:5px 3px 3px 3px; text-align:left;  background:#000; color:#00FF00; filter:alpha(opacity:65); opacity: 0.65; -moz-opacity:0.65; font:11px Arial; border-top:1px solid #aaa; }
  	div#infoscreen h1 { display:inline; font:11px Arial, Helvetica, sans-serif; color:#00FFFF; }
  
  
  	div#buttons { display:none; position:absolute; z-index:3; width:377px; height:15px; margin-top:170px;   text-align:right; }
  	div#buttons a { display:block; float:right; width:15px; height:30px; margin-left:2px; }
  	div#buttons .zoom { width:15px; background:url(http://photos1.blogger.com/blogger/475/1079/320/butonlar.gif) no-repeat -30px; filter:alpha(opacity:65); opacity: 0.65; -moz-opacity:0.65; }
  	div#buttons .zoom:hover { filter:alpha(opacity:95); opacity: 0.95; -moz-opacity:0.95; }
  	div#buttons .ileri { background:url(http://photos1.blogger.com/blogger/475/1079/320/butonlar.gif) no-repeat -15px; filter:alpha(opacity:65); opacity: 0.65; -moz-opacity:0.65; }
  	div#buttons .ileri:hover { filter:alpha(opacity:95); opacity: 0.95; -moz-opacity:0.95;  }
  	div#buttons .geri { background:url(http://photos1.blogger.com/blogger/475/1079/320/butonlar.gif) no-repeat 0; filter:alpha(opacity:65); opacity: 0.65; -moz-opacity:0.65; }
  	div#buttons .geri:hover { filter:alpha(opacity:95); opacity: 0.95; -moz-opacity:0.95; }
  
  	iframe#veriyolu { display:none; }
  	</style>

• Aşağıdaki kodu da scripti eklemek istediğiniz yere yapıştırın. (blogger kullanıcıları <blogger> kodundan önceye yapıştırabilir)
  

  	<div>
  		<div id="infoscreen"><h1>Photo:</h1></div>
  		<div id="buttons"><a class="ileri" href="JavaScript:degistir('+')" title="Forward"></a><a class="zoom" href="JavaScript:yakinlastir()" title="Zoom"></a><a class="geri" href="JavaScript:degistir('-')" title="Back"></a></div>
  		
  		<div id="loadingscreen"><img src="http://photos1.blogger.com/blogger/475/1079/1600/indicator.gif" /></div>
  
  		<div id="slide" style="width:380px; background-position:-50px -50px; height:200px;"></div>
  		<iframe id="veriyolu"></iframe>
    	</div>

• Hepsi bu kadar

Öneri görüş ve düşüncelerinizi bekliyorum, saygılar.

[muhammetsevim]

Çok hoş görünüyor, tebrik ederim.

teşekkürler. safari browser kullanıcısı bir gönüllü arıyorum. scripti test edip hataları bana bildirecek. günde 15 dakikasını bu işe ayırabilecek..

not: bu hafta sonu da yeni versiyonunu buraya yazıcam. yeni versiyonda bunun gibi bişey yapmaya çalışıcam.

[oky]

bu da güzelmiş, tebrikler

teşekkürler oky.hosting firması hesabımı kapattığı için şu an script çalışmıyor.dosyaları indirip kendi sunucunuza yüklerseniz sorunsuz çalışır.

[pixage]

Güzel çalışma olmuş tebrikler..

PC'de gayet şık ve sorunsuz..
Fakat Macintosh'ta Safari ve Firefox denemelerinde load aşamasında tıkanıp kalıyor..


Firefox'ta tespit edilen hatalar..

[wanadoo]

azer teşekkürler bunu da deneyeceğim.eline sağlık. mesaj biraz geç oldu ama olsun.