SwfIR ile resimlerinizi görselleştirin

Bugün rastladığım güzel birşeyi Türkçeleştirerek paylaşayım dedim. Web sayfanıza ya da bloguna img ile eklediğiniz resimleri görsel zenginliğe kavuşturmak çok kolay. Bunu swfIR (swf Image Replacement) ile yapabilirsiniz. Bu script ile img (resim tagı) biçimlendirmedeki standard html limitlerinize yeni özellikler katabilirsiniz. www.swfir.com adresinde örnek olarak göreceğiniz tüm özellikleri eklediğiniz resim veya fotoğraflara uygulamanız birkaç adımda yapabileceğiniz birşey. Bunun için yapmanız gereken;

Kurulum:

Öncelikle swfir_v1.zip dosyasını buradan download edin ve swfir.js ve swfir.swf dosyalarını hostunuza upload edin.

Web sayfanızın <head> </head> kodları arasına
<script type=”text/javascript” src=”swfir.js”></script>

şeklinde tanımlamayı ekleyin.

Efekt tanımlamasını <body> tagından hemen sonra sayfanıza ekleyin. Örnek olarak;

<script type="text/javascript">// <![CDATA[
       window.onload = function() { var sir = new swfir(); sir.specify("border-width", "10"); sir.specify("border-color", "FFFFFF"); sir.specify("shadow-blur", "8"); sir.specify("rotate","-5"); sir.swap("img"); }
// ]]></script>

Kullanım:

Örnek olarak kullandığımız tanımlama tüm img ile başlayan kodları dolayısıyla tüm resimleri etkileyecektir. Burada önemli olan sir.swap(“img”); tanımlamasıdır. Bu kısmı birkaç şekilde kullanmamız mümkündür.
“img” img ile eklenen tüm resimleri etkiler.
“#photo” img tagında id=”photo” olarak tanımlanan resimleri etkiler.
“#conatiner img” <div id=”conatiner”></div> arasına img ile eklenen resimleri etkiler.
“img[alt='Head']“ img tagında alt=”Head” olarak tanımlanan resimleri etkiler.

Kullanılabilecek efekt parametreleri:

border-radius : Sayı
border-width : Sayı
border-color : CSS tarzı renk (örnek: FF6600)
shadow-offset : Sayı
shadow-angle : Sayı
shadow-alpha : 0 – 100 arası Sayı
shadow-blur-x : Sayı
shadow-blur-y : Sayı
shadow-strength : Sayı
shadow-color : CSS tarzı renk (örnek: FF6600)
shadow-quality : 0 – 1 arası Sayı
shadow-inner : Sadece (true veya false)
shadow-knockout : Sadece (true veya false)
shadow-hide : Sadece (true veya false)
rotate : 0 +-359 arası Sayı
overflow : ‘expand-x’, ‘expand-y’ veya ‘fit’
link : Metin (örnek: http://www.hakkiceylan.com)
src : Metin (swf dosyanın yolu, eğer faklı bir dizindeyse)
wmode : Metin (‘opaque’, ‘transparent’, gibi)
elasticity : Metin (‘true’), Sayı (pixel/em oranı)

Aynı sayfada farklı efektler kullanmak:

Aşağıdaki örneği inceleyerek aynı sayfada farklı efektlerin nasıl kullanılacağı hakkında fikir sahibi olabilirsiniz:

<script type="text/javascript">// <![CDATA[
       window.onload = function() { var sir = new swfir(); sir.specify("border-width", "10"); sir.specify("border-color", "FFFFFF"); sir.specify("shadow-blur", "10"); sir.specify("rotate","-5"); sir.swap("img[alt=\'beyaz_yatik\']"); var sir2 = new swfir(); sir2.specify("border-width", "10"); sir2.specify("border-color", "FF9900"); sir2.specify("shadow-blur", "10"); sir2.swap("img[alt=\'turuncu_duz\']"); }
// ]]></script>

Sayfaya eklediğiniz img kodlarında alt olarak kulladığınız tanıma göre faklı efektler elde edebilirsiniz.
<img alt=”Head” src=”resim.jpg”>
<img alt=”Foot” src=”resim.jpg”>
Burada alt olarak girilen Head ve Foot ayrı ayrı sonuçlar verecektir.

Eğer bu yazımı beğendiyseniz, RSS kullanarak tüm yeni yazılarımdan kolaylıkla haberdar olabilirsiniz. Gmail hesabınız varsa burası ve tüm beğendiğiniz siteler için Google Reader sistemini kullanabilirsiniz.

Henüz yorum yok

  1. pilaki diyor ki:

    gerçekten güzel bi script..monoton resim gösterimlerine renk katacağı kesin..
    aslında wordpress entegre edilebilecek bir script..
    eline sağlık hakkı hocam.. ++rep :)

  2. Ali Kılıç diyor ki:

    Uzun zamandır aradığım script diyebilirim. Teşekkürler Hakkıcan takipteyim

  3. BesST diyor ki:

    Merhabalar, bu scprit i WP ye nasıl entegre edeceğimizi
    kavrayamadım bir türlü. Yani hangi sayfanın taglari arasında
    olacak.. Eğer yardımcı olursanız sevinirim.Tşkler. İyi Çalışmalar.

  4. HC diyor ki:

    Zaten bu yazıda WP yw nasıl entegre edileceğini anlatmadım..
    Zamanım olursa onu da yazarım, burada herhangi bir web
    sitesinde nasıl kullanılacağı anlatılıyor..

  5. BesST diyor ki:

    Oke ben en başta kendimi WP için anlatılıyormuşçasına koşullayınca
    direkt öyle algıladım. Tşk. ler Cevabın için.

  6. Hüseyin ALKAN diyor ki:

    merhaba
    benim sorum bu swfir yi wordpress e nasıl uygilicaz ? yani resimler kısmındaki resimler bölümünü sizin sitenizdeki gibi (resimler çerçeveli ve albümler arası ayırma çizgili) nasıl yapabiliriz.
    Teşekkürler.

  7. Hüseyin ALKAN diyor ki:

    size bir sorum daha olucak. bu yavaşlık konusunda rodosweb e mail attım ve bana 2.1.2 de yavaşlık sorunu olduğunu söyledi. sizce hangi sürümü yüklemeliyim ?

  8. HC diyor ki:

    Bu sitedeki fotoğraflar için fotobook eklentisi kulllanılıyor.. swfIR ile bunu nasıl yapabilirsiniz bilemiyorum, ayrıca şu anda kullanmakta olduğum WP 2.1.2 ve yavaşlık sözkonusu değil.

  9. zorlubey diyor ki:

    Eklenti wordpress için entegre etmişler burada var ama türkçeleştirecek arkadaş varsa çok seviniriz…
    http://www.august8th.com/blog/2006/05/04/sifr-wp-plugin-v01-flash-titles-plugin/

  10. zorlubey diyor ki:

    Özür önceki yorumda yazdığım eklenti sifr içinmiş. (Eklenti wordpress için entegre etmişler burada var ama türkçeleştirecek arkadaş varsa çok sevinirizâ?¦)
    ancak benim istediğim bu swfIR olayını wordpress e nasıl uygularız.





Son Fotoğraflarım

20091121251BK
20091121104BK
20060910117BK
20070910247BK
20100613105BK
20091121005BSK
20100423150BSK
20091121242BK
20091121005BK
20090926055BK
20100708022BSK
20071111048BK