imgPreview: Yeni jQuery Eklentisi

Posted on 29 Ocak 2009 by Kaan Şengül

Twitter’dan takip ettiğim bir kullanıcı olan “jquery” sayesinde öğrendiğim bu eklentiyi size tanıtacağım.
imgPreview isminde de anlaşılacağı gibi resim linkinin üzerine geldiğiniz zaman bunu bir kutu içerisinde açıyor ve bu sayede onu tıklamadan önizleme yapmış oluyorsunuz. Bunun bide şu şekilde bir yardımcı yanı olabilir, resme tıkladığımız an resim önceden yüklendiğinden ötürü açılması için zaman kaybetmeyeceğiz.

Örnek kod:

$('#imgpreview-demo a').imgPreview({
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    onShow: function(link){
        // Animate link:
        $(link).stop().animate({opacity:0.4});
        // Reset image:
        $('img', this).stop().css({opacity:0});
    },
    onLoad: function(){
        // Animate image
        $(this).animate({opacity:1}, 300);
    },
    onHide: function(link){
        // Animate link:
        $(link).stop().animate({opacity:1});
    }
});

Daha detaylı açıklama ve demo için buraya bakabilirsiniz.

Kubrick Temasında Üst Kısma İstenilen Resmi Koyma

Posted on 29 Ocak 2009 by Kaan Şengül

Benimde artık WordPress’in kökleşmiş Kubrick temasına geçmemle beraber yaşadığım bir sorundu ve birkaç araştırma ve bunları birleştirerek sorunun çözümüne ulaştım.

Öncelikle “header image” ‘imiz aslında gördüğünüz arkaplanı beyaz ve yuvarlak hatlara sahip olan üst kısmın bir kısmı. Yani düşünmeyin ki (orjinalde) mavi olan yer tek bir resim geri kalan hatlar başka bir resim diye. Kısacası üstte gördüğünüz şey komple bir resim.

Neyse kendi koymak istediğimiz resmi şuradan Kubrick’in düzenine göre değiştiriyoruz ve buradan bize geri dönen resmi Kubrick_tema_dizini/images/kubrickheader.jpg ile değiştiriyoruz. Bunuda yaptıktan sonra;

Kubrick_tema_dizini/function.php ‘deki şu satırı bulup

add_action(’wp_head’, ‘kubrick_head’);

önüne yorum işaretini koyuyoruz (yani bir çalışmasını engelliyoruz ) sonuçta elimizde;

//add_action(’wp_head’, ‘kubrick_head’);

oluyor. Ve evet bitti bu kadardı

Son Zamanlar: Tatil ve projeler

Posted on 28 Ocak 2009 by Kaan Şengül

Tatilinde gelmesi ile aklımdaki projeleri somutlaştırmaya başladım. Şu aralar twitter için bir arama motoru projesi için çabalıyorum.. Evet yok mu da ben bir tane yapıyorum değil. Sadece olanı geliştirerek kişilere sunmak istiyorum. Proje aslında şu anda altyapısına kavuştu fakat bazı aksaklıklar yaşanabilir.

Bu benim php ile olan ilk deneyimim. Php’yi temel seviyede biliyordum ama ilk defa bu denli içli dışlı oldum ve büyük birşey oldu ilk deneyim içim.

Başlarda

biraz bocaladım çünkü hangi teknolojiyi nasıl kullanacağımı bilmiyordum. Atom’la gelen bilgileri Php ile parçalayıp sunuyordum fakat bu süreçte çok zaman kaybediliyordu. Sonra Atom yerine JSON kullanarak bilgileri çekmeye başladım. Atom’a göre algoritma daha da kısa bir hal aldı ve işler kolaylaştı. Sonra anladım ki iki boyutlu array’ler için bu algoritma çalışmıyordu. Sonra internette gezinirken anladım ki jQuery derdime devaymış. O basit olan algoritma (daha da doğrusu yalnış ama basit olan) daha da basitleşti. Meğersem ne kolaymış ..

Sonuçta

Elimde artık çalışan güzel bir sistem var.. Hala gelişim aşamasında (beta olsa gerek) ve yapmayı düşündüğüm bir sürü fonksiyonda var. Tatil bitmeden bitirmek istiyorum, hayırlısı ..

Hatta eğer yapılması güzel olacağı yeni özellik gelirse aklınıza paylaşın.

jQuery ile JSON’dan Veri Çekmek

Posted on 27 Ocak 2009 by Kaan Şengül

Bu aralar üzerinde çalıştığım bir projeden dolayı JSON verisini işlemem gerekti ve önce php fonksiyonlarıyla bunu başarmayı denedim ama gördüm ki hem yavaş çalışıyordu hemde bir yığın kod birikintisi projeyi kaplıyordu.

Sonra farkettim ki aslında JSON jQuery için yaratılmış! PHP’de yapmak istediğimi 10 satırı geçmeden jQuery’de rahatça yapabiliyorduk..

Neyse konuya gelelim. Projemdeki gibi Twitter API‘yi kullanarak size nasıl kolayca veri çekeceğimizi göstereceğim. Öncelikle Twitter’da bir aramadan gelen JSON’da ne gibi bilgiler var?

Results: Aradığımız kelime “Results” array’i içinde dödürülüyor. Bu array’in içinde saklanılan bilgiler ise:
- Yazılan yazı*
- Yazıyı yazan*
- (varsa) Kime cevap olarak yazıldığı
- Profil resmi* ..
Bu arama için dönen diğer bilgiler ise:
- Aranılan kelime*
- Sonraki&Önceki sayfa adresi
- Yenileme adresi
- Max_ID

Biz şimdi yapacağımız mini projede yanında yıldız olanları kullanacağız. Bundan önce Max_ID’nin işlevinden bahsetmek istiyorum.

Düşünün ki “Google” kelimesini aratıyorsunuz. Dünyada twitter’ı kullanan milyonlarca insanın 10%’unun “Google” kelimesini siz arama yaparken girdiğini düşünsek, siz sonuç sayfalarında dolandıkça yenileri eklenecek ve yenileri eklenecek. Bunu engellemek için siz arama yaptığınız anda Max_ID tanımlanıyor ve arama sonuçları o ana kadar o kelimeyi içeren sonuçları gösteriyor.

Kodlamaya Başlıyoruz

Öncelikle jQuery’i kullanacağımızdan </head> etiketinden önce buradan indirmemiz gereken dosyayı ekliyoruz:

&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;

jQuery Kodu

Yukarıda yıldızlı belirtmiş olduğumuş verileri çekmeye başlıyoruz, dikkat edin kaç satır aldı?

var url = &quot;http://search.twitter.com/search.json?callback=?&amp;amp;q=gkaans&quot;; 

		$.getJSON(url, function(JSON){
			$('#search ul').empty();
			$.each(JSON.results, function(i, results){
				$('#search ul').append('&lt;li&gt;&lt;img src=&quot;' + results.profile_image_url + '&quot; /&gt;&lt;span&gt;' + results.text + ' - &lt;a href=&quot;http://twitter.com/' + results.from_user + '&quot;&gt;' + results.from_user + '&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;');
			});
		});

JSON.results’u $.each kullanarak results‘a eşitledik ve results.variable_ismi kullanarak teker teker verileri kolayca çektik.

HTML Kodu ise..

&lt;div id=&quot;search&quot;&gt;
&lt;ul&gt;&lt;/ul&gt;
&lt;/div&gt;

Hiçte zor değil!.. Buyrun demo sayfası..

IE6 PNG Sorunu

Posted on 22 Ocak 2009 by Kaan Şengül

Başımızı ağrıtan tarayıcı olan Microsoft Internet Explorer 6. sürümünde arkaplan rengi tanımlanmamış .png uzantılı resimlerde sorun çıkardığını biliyoruz. Küçük bir CSS kodu ise bu sorunun çözülmesine yardımcı oluyor:


* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&amp;&amp;(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" &amp;&amp; this.src.toLowerCase().indexOf('.png')&gt;-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Bu kodun yaptığı işlem ise resmin arkaplanına “transparent.gif” adında bir resim koyup .png uzantılı resmin saydam bir arkaplana sahip olmasını sağlıyor.

Bu CSS kodunu stil dosyanıza direk koyabilir yada başka bir dosyada saklayıp IE6 ve alt sürüm tarayıcılar geldiğinde bu dosyayı çağırabilirsiniz:

<!--[if lte IE 6]>
<link rel=”stylesheet” type=”text/css” href=”png_fix.css” />
<![endif]–>

Unutmayın!

Sunucunuzda “transparent.gif” yüklü olması lazım ve resmin boyutunun tarayıcı tarafından değiştirilmesi yada pozisyonun sabit ayarlanması durumunda bu işlemlerin çalışmayacağını unutmayın!

Not: Burada kullanılan bilgiler Komodo Media tarafından alınmıştır.

Kaan Şengül

Kaan ve teknoloji ve kodlama ve tasarım ve ve ve…

Monthly Archives: Ocak 2009