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:
- Aşağıdaki kodu </head> etiketinden hemen önceye yapıştırın
Kod:
<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)
Kod:
<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.