Kod

jQuery kodunu çağırırken aşağıdaki linkin başına ve sonuna script kodlarını ekleyin. Ben her ihtimale karşı değiştirdim çünkü alan adını.

// HTML Alanı:
<h1 id="yukari">Lorem Ipsum</h1>
<p><a href="#yukari" class="ustlink">Yukarı Dön</a></p>

//Script Alanı
<abc type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></abc>
//abc yi script ile değiştirin

<abc type="text/javascript"> //abc yi script ile değiştirin
$(document).ready(function() {

	$("a.ustlink").click(function() {
		$("html, body").animate({
			scrollTop: $($(this).attr("href")).offset().top + "px"
		}, {
			duration: 500,
			easing: "swing" //linear veya swing kullanılabilir
		});
		return false;
	});

});
</abc> //abc yi script ile değiştirin

Yukarıdaki kod ile birlikle easing efektinin linear ve swing efektlerini kullanabilirsiniz. Eğer jQuery Easing efektini eklemek isterseniz jQuery Easing sayfasından gerekli bilgiyi alıp kullanabilirsiniz.

Hadi Selametle

jQuery ile Smooth Scroll KaiseRCrazY.CoM, Serkan Algur sitesinde yer almaktadır. İzinsiz Yayınlamanaz.

Benzer Yazılar

jQuery ile Tweet Çubuğu...

VerticalShift jQuery Ekle...

jQuery İle Bacadan Duman...

Blogger İçin

Kod;

<script Language='Javascript'>
<!--
document.write(unescape('%3C%73%74%79%6C%65%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%3E%2F%2A%20%58%4C%53%46%20%32%30%30%37%20%2A%2F%0A%0A%23%6C%69%67%68%74%73%20%7B%0A%20%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%0A%20%6C%65%66%74%3A%30%70%78%3B%0A%20%74%6F%70%3A%30%70%78%3B%0A%20%77%69%64%74%68%3A%31%30%30%25%3B%0A%20%68%65%69%67%68%74%3A%38%30%70%78%3B%0A%20%6F%76%65%72%66%6C%6F%77%3A%68%69%64%64%65%6E%3B%0A%7D%0A%0A%2E%78%6C%73%66%2D%6C%69%67%68%74%20%7B%0A%20%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%0A%7D%0A%0A%62%6F%64%79%2E%66%61%73%74%20%2E%78%6C%73%66%2D%6C%69%67%68%74%20%7B%0A%20%6F%70%61%63%69%74%79%3A%30%2E%39%3B%0A%7D%0A%0A%2E%78%6C%73%66%2D%66%72%61%67%6D%65%6E%74%20%7B%0A%20%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%0A%20%62%61%63%6B%67%72%6F%75%6E%64%3A%74%72%61%6E%73%70%61%72%65%6E%74%20%75%72%6C%28%68%74%74%70%3A%2F%2F%77%77%77%2E%73%63%68%69%6C%6C%6D%61%6E%69%61%2E%63%6F%6D%2F%70%72%6F%6A%65%63%74%73%2F%73%6E%6F%77%73%74%6F%72%6D%2F%6C%69%67%68%74%73%2F%69%6D%61%67%65%2F%62%75%6C%62%73%2D%35%30%78%35%30%2D%66%72%61%67%6D%65%6E%74%73%2E%70%6E%67%29%20%6E%6F%2D%72%65%70%65%61%74%20%30%70%78%20%30%70%78%3B%0A%20%77%69%64%74%68%3A%35%30%70%78%3B%0A%20%68%65%69%67%68%74%3A%35%30%70%78%3B%0A%7D%0A%0A%2E%78%6C%73%66%2D%66%72%61%67%6D%65%6E%74%2D%62%6F%78%20%7B%0A%20%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%0A%20%6C%65%66%74%3A%30%70%78%3B%0A%20%74%6F%70%3A%30%70%78%3B%0A%20%77%69%64%74%68%3A%35%30%70%78%3B%0A%20%68%65%69%67%68%74%3A%35%30%70%78%3B%0A%20%2A%77%69%64%74%68%3A%31%30%30%25%3B%0A%20%2A%68%65%69%67%68%74%3A%31%30%30%25%3B%0A%20%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%0A%7D%0A%0A%2E%78%6C%73%66%2D%63%6F%76%65%72%20%7B%0A%20%70%6F%73%69%74%69%6F%6E%3A%66%69%78%65%64%3B%0A%20%6C%65%66%74%3A%30%70%78%3B%0A%20%74%6F%70%3A%30%70%78%3B%0A%20%77%69%64%74%68%3A%31%30%30%25%3B%0A%20%68%65%69%67%68%74%3A%31%30%30%25%3B%0A%20%62%61%63%6B%67%72%6F%75%6E%64%3A%23%66%66%66%3B%0A%20%6F%70%61%63%69%74%79%3A%31%3B%0A%20%7A%2D%69%6E%64%65%78%3A%39%39%39%3B%0A%20%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%0A%7D%0A%0A%2F%2A%0A%2E%78%6C%73%66%2D%6C%69%67%68%74%2E%62%6F%74%74%6F%6D%20%7B%0A%20%68%65%69%67%68%74%3A%34%39%70%78%3B%0A%20%62%6F%72%64%65%72%2D%62%6F%74%74%6F%6D%3A%31%70%78%20%73%6F%6C%69%64%20%23%30%30%36%36%30%30%3B%0A%7D%0A%0A%2E%78%6C%73%66%2D%6C%69%67%68%74%2E%74%6F%70%20%7B%0A%20%68%65%69%67%68%74%3A%34%39%70%78%3B%0A%20%62%6F%72%64%65%72%2D%74%6F%70%3A%31%70%78%20%73%6F%6C%69%64%20%23%30%30%39%39%30%30%3B%0A%7D%0A%2A%2F%3C%2F%73%74%79%6C%65%3E%0A%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%73%63%68%69%6C%6C%6D%61%6E%69%61%2E%63%6F%6D%2F%70%72%6F%6A%65%63%74%73%2F%73%6E%6F%77%73%74%6F%72%6D%2F%6C%69%67%68%74%73%2F%73%6F%75%6E%64%6D%61%6E%61%67%65%72%32%2D%6E%6F%64%65%62%75%67%2D%6A%73%6D%69%6E%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%79%75%69%2E%79%61%68%6F%6F%61%70%69%73%2E%63%6F%6D%2F%63%6F%6D%62%6F%3F%32%2E%36%2E%30%2F%62%75%69%6C%64%2F%79%61%68%6F%6F%2D%64%6F%6D%2D%65%76%65%6E%74%2F%79%61%68%6F%6F%2D%64%6F%6D%2D%65%76%65%6E%74%2E%6A%73%26%32%2E%36%2E%30%2F%62%75%69%6C%64%2F%61%6E%69%6D%61%74%69%6F%6E%2F%61%6E%69%6D%61%74%69%6F%6E%2D%6D%69%6E%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%73%63%68%69%6C%6C%6D%61%6E%69%61%2E%63%6F%6D%2F%70%72%6F%6A%65%63%74%73%2F%73%6E%6F%77%73%74%6F%72%6D%2F%6C%69%67%68%74%73%2F%63%68%72%69%73%74%6D%61%73%6C%69%67%68%74%73%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%3E%0A%76%61%72%20%75%72%6C%42%61%73%65%20%3D%20%27%68%74%74%70%3A%2F%2F%77%77%77%2E%73%63%68%69%6C%6C%6D%61%6E%69%61%2E%63%6F%6D%2F%70%72%6F%6A%65%63%74%73%2F%73%6E%6F%77%73%74%6F%72%6D%2F%6C%69%67%68%74%73%2F%2E%2F%27%3B%0A%73%6F%75%6E%64%4D%61%6E%61%67%65%72%2E%75%72%6C%20%3D%20%27%68%74%74%70%3A%2F%2F%77%77%77%2E%73%63%68%69%6C%6C%6D%61%6E%69%61%2E%63%6F%6D%2F%70%72%6F%6A%65%63%74%73%2F%73%6E%6F%77%73%74%6F%72%6D%2F%6C%69%67%68%74%73%2F%2E%2F%27%3B%0A%3C%2F%73%63%72%69%70%74%3E%0A%0A%0A%3C%64%69%76%3E%0A%20%3C%64%69%76%20%69%64%3D%22%6C%6F%61%64%69%6E%67%22%20%73%74%79%6C%65%3D%22%64%69%73%70%6C%61%79%3A%20%6E%6F%6E%65%3B%20%22%3E%0A%20%20%3C%68%31%3E%59%69%6C%62%61%73%69%20%69%73%69%6B%6C%61%72%69%3A%20%3C%2F%68%31%3E%0A%20%20%3C%68%32%3E%48%61%7A%69%72%6C%61%6E%69%79%6F%72%2E%2E%2E%3C%2F%68%32%3E%0A%20%3C%2F%64%69%76%3E%0A%0A%20%3C%64%69%76%20%69%64%3D%22%6C%69%67%68%74%73%22%20%73%74%79%6C%65%3D%22%64%69%73%70%6C%61%79%3A%20%62%6C%6F%63%6B%3B%20%22%3E%0A%0A%3C%2F%64%69%76%3E%0A%3C%2F%64%69%76%3E%3C%73%63%72%69%70%74%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%73%63%68%69%6C%6C%6D%61%6E%69%61%2E%63%6F%6D%2F%70%72%6F%6A%65%63%74%73%2F%73%6E%6F%77%73%74%6F%72%6D%2F%73%6E%6F%77%73%74%6F%72%6D%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%0A'));
//-->
</script>

Bu kodu widget olarak ya da HTML düzenleme yoluyla ekleyebilirsiniz. Hem kar yağdırabilecek hem de ışıkları gösterebilieceksiniz.

WordPress ve diğer siteler için

Header.php düzenlemesi

Temanızın header.php dosyası içerisine head alanının içine aşağıdaki kodları ekleyin.

<style type="text/css">/* XLSF 2007 */

#lights {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;
 height:80px;
 overflow:hidden;
}

.xlsf-light {
 position:absolute;
}

body.fast .xlsf-light {
 opacity:0.9;
}

.xlsf-fragment {
 position:absolute;
 background:transparent url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-50x50-fragments.png) no-repeat 0px 0px;
 width:50px;
 height:50px;
}

.xlsf-fragment-box {
 position:absolute;
 left:0px;
 top:0px;
 width:50px;
 height:50px;
 *width:100%;
 *height:100%;
 display:none;
}

.xlsf-cover {
 position:fixed;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 background:#fff;
 opacity:1;
 z-index:999;
 display:none;
}

/*
.xlsf-light.bottom {
 height:49px;
 border-bottom:1px solid #006600;
}

.xlsf-light.top {
 height:49px;
 border-top:1px solid #009900;
}
*/</style>

<script type="text/javascript" src="http://www.schillmania.com/projects/snowstorm/lights/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://www.schillmania.com/projects/snowstorm/lights/christmaslights.js"></script>
<script type="text/javascript">
var urlBase = 'http://www.schillmania.com/projects/snowstorm/lights/./';
soundManager.url = 'http://www.schillmania.com/projects/snowstorm/lights/./';
</script>
<script src="http://www.schillmania.com/projects/snowstorm/snowstorm.js"></script>

Sonra şu kodu body etiketinden hemen sonraya ekleyin.

<div id="lights" style="display: block; "></div>

Görmeden İnanmam Diyenlere Blogspot Örneği: Oda Oyunları 7/24
İşlem tamamdır. Yok ben illa dosyaları sitemde barındıracağım derseniz aşağıdaki dosyayı indirin ve kodları kendinize göre ayarlayın. Ha bu arada benim sitede kar farklı şekilde yağıyor. Sizde normal kar olacak :D

Hadi Selametle

Blogger’da kar yağdırmak KaiseRCrazY.CoM, Serkan Algur sitesinde yer almaktadır. İzinsiz Yayınlamanaz.

Benzer Yazılar

No related photos.

Twitter ID nedir, bilmiyorum derseniz, ücretsiz ve bu güne kadar güvenle kullandığım ID From User sitesini kullanabilirsiniz. Tek yapmanız gereken twitter kullanıcı adınızı yazmanız. ID bilginizi size aktarıyor böylelikle. Twitter’deki bazı değişikliklerden sonra çalışmaz olmuştu ancak tekrar aktif hale gelmiş. Sevindirici bir haber :)

İşte Kod;

<style>
.twitter {padding:3px 0;border-bottom:1px dashed #ddd;font-family:Trebuchet MS,cursive;}
.twitter a {padding-left: 15px;background: url(link.png) 3px 1px no-repeat; /*Bu alana link.png 'nin adresini ekleyin */
}
</style>

<ul style="list-style-type:none;">
< ?php
$feedURL = "http://twitter.com/statuses/user_timeline/idfromuserdenalinan_id.rss"; // Feed URL içindeki ID değiştirin
$doc = new DOMDocument();
$doc->load($feedURL);
$kimlik ="kullanici_adi"; //kendi Twitter kullanıcı adınız
$arrFeeds = array();
foreach ($doc->getElementsByTagName('item') as $node) {
    $itemRSS = array (
        'title' => $node->getElementsByTagName('title')->item(0)->nodeValue
        );
    array_push($arrFeeds, $itemRSS);
}
$limit = 5; //Twitter Feed Limiti
for($x=0;$x< $limit;$x++) {
    $title = str_replace(''.$kimlik.': ', '', $arrFeeds[$x]['title']);
    $str = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]","<a href=\"\\0\">\\0</a>", $title);
    $pattern = '/[#|@][^\s]*/';
    preg_match_all($pattern, $str, $matches);	

    foreach($matches[0] as $keyword) {
        $keyword = str_replace(")","",$keyword);
        $link = str_replace("#","%23",$keyword);
        $link = str_replace("@","",$keyword);
        if(strstr($keyword,"@")) {
            $search = "<a href=\"http://twitter.com/$link\">$keyword</a>";
        } else {
            $link = urlencode($link);
            $search = "<a href=\"http://twitter.com/#search?q=$link\" class=\"grey\">$keyword</a>";
        }
        $str = str_replace($keyword, $search, $str);
    }
    echo '<li class="twitter">'.$str.'</li>';
}
?>
</ul>

Bu kodu ister temanızın bir yerlerine ekleyin isterseniz daha başka birşeyde kullanın. Burada yapmanız gereken iki-üç değişiklik var. Bunlar sırasıyla;

$kimlik: Bu alanda gördüğünüz şey sizin kullanıcı adınız olacak ki aşağıdaki alanda rss çıktısında beliren kullanıcı_adı: alanı temizlenebilsin.

style alanındaki resim yolu: Resminizi nereye ekliyorsanız o yolu belirtin ki link yanında resim çıksın.

RSS linkindeki id: idfromuser.com adresinden ID nizi alıp. hemen .rss alanından önceki yere ekleyin.

Demo için tıklayın.

Dosyaları aşağıdan indirebilirsiniz. Zipleyip ekledim

Twitter Feed Okutmak… KaiseRCrazY.CoM, Serkan Algur sitesinde yer almaktadır. İzinsiz Yayınlamanaz.

Benzer Yazılar

Twitter imzanızı foruml...

Twitterden Friendfeed e p...

Nice Search Eklentisi!

Yatay Alanda Açılır Resim Kutucukları…

Aşağıda önizleme linki vereceğim scripti kullanmak için öncelikle javascript dosyasını ve dolayısıyla jQuery dosyalarını sitemize entegre etmek zorundayız. Önemli bir Not: jQuery 1.4.4 ve sonraki sürümlerinde çalışır.

İndirme Linki;

Script Kullanımı;

NOT: Ordaki Örneği Kullanarak Kod örneği verdim. Lütfen Detaylar için Önizleme Sayfasını ziyaret ediniz.
Öncelikle jQuery ve VerticalShift i sisteme dahil edelim.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://husbandman.org/javascripts/verticalshift/jquery.verticalShift.js"></script> 

Daha sonra kullanmak sistemi aktif hale getirmek için gerekli kodu ekleyelim.

<script type="text/javascript">
$(document).ready( function() {
	$(".blind").verticalShift({opacity: .4});
	$("#textBoxes > div").verticalShift();
});
</script> 

Ekleyeceğimiz resimleri ya da yazıları girelim

<div id="notes">
	<div>Note One</div>
	<div>Note Two</div>
	<div>Note Three</div>
</div>
	ya da
<div id="photos">
	<div><img src="images/forest.jpg" width="216px" height="216px" /></div>
	<div><img src="images/ocean.jpg" width="216px" height="216px" /></div>
	<div><img src="images/desert.jpg" width="216px" height="216px" /></div>
</div>
		

Burda işimiz bittiyse tüm kodlama şöyle görünecektir;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://husbandman.org/javascripts/verticalshift/jquery.verticalShift.js"></script>
<script type="text/javascript">
$(document).ready( function() {
	$(".blind").verticalShift({opacity: .4});
	$("#textBoxes > div").verticalShift();
});
</script>
<div id="notes">
	<div>Note One</div>
	<div>Note Two</div>
	<div>Note Three</div>
</div>
	ya da
<div id="photos">
	<div><img src="images/forest.jpg" width="216px" height="216px" /></div>
	<div><img src="images/ocean.jpg" width="216px" height="216px" /></div>
	<div><img src="images/desert.jpg" width="216px" height="216px" /></div>
</div>

Aynısını görüyorsunuz sıkıntı yok :) Güle Güle Kullanın.

Örnek görmek isterim diyenlere;

Hadi Selametle…

VerticalShift jQuery Eklentisi KaiseRCrazY.CoM, Serkan Algur sitesinde yer almaktadır. İzinsiz Yayınlamanaz.

Benzer Yazılar

jQuery ile Tweet Çubuğu...

jQuery İle Bacadan Duman...

jQuery ile üst giriş pa...

Neyse ben bu özelliği site üzerinde denemek istedim ve aklıma SEO yaparken Türkçe karakterler ile ilgili kullandığımız bir fonksiyon geldi. str_replace fonksiyonugenellikle yazı veya değişik alanlarda sisteme uygun olmayan yada yazılarak kullanılması sıkıntılı olan karakterleri uygun hale getirmek amacıyla kullanılır. Birçok özelliği olan bu fonksiyonu şu alandaki yazı yoluyla kontrol edebilirsiniz. Kim bilir belki sizinde değiştirebileceğiniz birşey çıkar karşınıza. Bu fonksiyon oldukça kullanışlı olabiliyor.

Ben bu fonksiyonun içindeki bir özellik olan str_ireplace komutunu kullandım. Bu komut büyük küçük karakter gözetmeksizin istenilen değişikliği yapmaktadır. Kullanacağınız bazı harfleri fonksiyon dosyasına küçük harfle yazarsanız ve kullanıcı bunu büyük harfle yazarsa bu değişiklik gene gerçekleşecektir. Merak etmeyin bu konuda :)

Gelelim kodumuza;

/* -- Sembol Değiştirme -- */
function sembol_degistir($string) {
    $string = str_ireplace('<3', '♥', $string);
    $string = str_ireplace('88-', '∞', $string);
    $string = str_ireplace('(r)', '®', $string);
    $string = str_ireplace('=<', '≤', $string);
    $string = str_ireplace('=>', '≥', $string);

    return $string;
}
add_filter('comment_text', 'sembol_degistir');
/* -- Sembol Değiştirme -- */

Burada gördüğünüz gibi Facebook içindeki kalp simgesinin yanına birkaç değişik karakter ekledim. Siz de $string olarak başlayan ve ; ile biten satırlardan çoğaltıp eklerseniz değişik sembolleri elde edebilirsiniz. Bunu kullanırken dikkat etmeniz gereken şey. <3 olarak belirtilen alan değişecek karakterler ve ♥ simgesinin olduğu alan değişimden sonrası oluyor. Siz de ekstra karakterler eklemek isterseniz birer satır eklemeniz yeterli olacaktır. Unutmayın, bu kodu temanız içindeki functions.php dosyasındaki ?> simgesinden önce atacaksınız. Sonrasında ise yorumda eğer bu karakterlerden biri kullanılırsa otomatik olarak simgeler gelecektir. Ben denedim ve bir örnek olarak bu yazının altına yorum ekleyeceğim bütün karakterlerimi :)

Güle Güle kullanın. Sorularınız için yorum bırakmanız yeterli olacaktır.

Yorumlara Facebook gibi Simgeler Eklemek… KaiseRCrazY.CoM, Serkan Algur sitesinde yer almaktadır. İzinsiz Yayınlamanaz.

Benzer Yazılar

Yazınıza Facebook Beğe...

Özel Kullanıcı Bilgile...

Yeni Facebook Özelliği!...

Bir diğer özelliği de büyük kodlamalardaki gibi açılan popup alanının fare imlecine olan uzaklığı. Yani siz resmin üzerine gelidğinizde popup direk resmi kapatmıyor, fare imlecinin yanında açılarak her iki resminde görünmesini sağlıyor.Kodlara geçelim isterseniz.

Öncelikle javascript kodlarımızı görelim;

Kodlar;

//Resim üzerine gelince açılan popup
//Kodu düzenleyip geliştiren : Serkan Algur
//Web Sitesi: http://www.kaisercrazy.com
//Genel amaçla kullanınız. Geliştirmek size kalmış.

this.resimonizleme = function(){
    /* Düzenleme */

        xOffset = 10;
        yOffset = 30;
        // Bu iki ayar görüntülenecek popup alanının  fare imlecine olan uzaklığını değiştirir.
        // İstediğiniz Şekle Getirmek için oynamalar yapaiblirsiniz.

    /* Düzenleme Sonu */
    $("a[rel*=popupacil]").hover(function(e){
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='onizleme'><img src='"+ this.href +"' alt='Önizleme Resmi' />"+ c +"</p>");
        $("#onizleme")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn();
    },
    function(){
        this.title = this.t;
        $("#onizleme").remove();
    });
    $("[rel*=popupacil]").mousemove(function(e){
        $("#onizleme")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });
};

// Kodları başlangıçta çağıralım
$(document).ready(function(){
    resimonizleme();
});

Yukarıdaki kodlarda görebileceğiniz gibi bir ayar alanı var. Buradan x ve y ofsetlerini ayarlayarak açılacak popup alanının fare imlecine uzaklığını ayarlayabiliyorsunuz. Bunu seçmek size kalmış. Ve diğer ayarlar da görebileceğiniz gibi resmin yolunu belirten a alanına bir rel kod atadım. Bunun adını da popupacil olarak belirledim. buraları dilediğiniz gibi değiştirebilir, benim rel olarak atadığım alanları class olarak da düzenleyebilirsiniz. Bu değişiklği yaptığınızda aşağıdaki HTML kodlarında da gerekli değişiklikleri yapın. Bir de fadeIn değer olarak sabit bir değer bıraktım . Bunun iki opsiyonu var slow ve fast. slow opsiyonu 600ms, fast opsiyonu 200ms, benim bıraktığım gibi kalırsa varsayılan gecikme değeri olarak 400ms belirlenir. Bunu değiştirmek için tırnak işaretlerini kullanarak fadeIn(“slow”) ya da fadeIn(“fast”) olarak belirtebilirsiniz.

Sonra da html dosyamızı oluşturalım ve kodlarımızı çağıralım.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ile resim önizlemesi</title>
<meta name="description" content="jQuery ile resim önizlemesi">
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script src="onizleme.js" type="text/javascript"></script>
</meta>

Önce kodlarımızı çağıralım. jQuery kaynağı olarak kendi sitesini kullandım. Siz dilediğiniz bir adresi veya kendi sitenizdeki jQuery dosyasını çağırabilirsniz.

Sonra da araya stil kodlarımızı serpiştirelim. Burada #onizleme alanı bizim popup alanımız için ayarlanmıştır. Siz renkleri ve diğer değişkenleri istediğiniz gibi ayarlayın.

<style>
body{margin:0 auto;padding:0 auto;background:#fff;font:80% Arial, Helvetica, sans-serif;color:#555;line-height:180%;}
h1{font-size:180%;font-weight:normal;color:#333;}
h2{clear:both;font-size:160%;font-weight:normal;color:#666;margin:0;padding:.5em 0;}
a{text-decoration:none;color:#f30;}
p{clear:both;margin:0;padding:.5em 0;}
img{border:none;}
ul,li{margin:0;padding:0;}
li{list-style:none;float:left;display:inline;margin-right:10px;}
#ortala {width:960px;margin:0 auto;padding:0 auto;display:block;}
#onizleme{position:absolute;border:2px solid #333;background:#ccc;padding:5px;display:none;color:#333;-moz-border-radius:5px;border-radius:5px;}
.altlink{clear:both;margin-top:250px;}
</style>
</head>

Stil kodları da bittiğine göre resimlerimizi ekleyelim. Burada unutmamanız gereken link alanındaki rel kodlamasıdır. Bütün resimlerin linklerini atarken rel=”popupacil” kodunu eklemeyi unutmayın.

<body>
<div id="ortala">
    <h1>jQuery ile Resim Önizlemesi</h1>

    <h2>Resim Galerisi (alt başlık olmadan)</h2>

    <ul>
        <li><a href="1.jpg" rel="popupacil"><img src="1s.jpg" alt="önizleme" /></a></li>
        <li><a href="2.jpg" rel="popupacil"><img src="2s.jpg" alt="önizleme" /></a></li>
        <li><a href="3.jpg" rel="popupacil"><img src="3s.jpg" alt="önizleme" /></a></li>
        <li><a href="4.jpg" rel="popupacil"><img src="4s.jpg" alt="önizleme" /></a></li>
    </ul>

    <h2>Resim Galerisi (alt başlıklar ile)</h2>

    <ul>
        <li><a href="1.jpg" rel="popupacil" title="Güzel bir resim"><img src="1s.jpg" alt="önizleme" /></a></li>
        <li><a href="2.jpg" rel="popupacil" title="Daha Güzel bir resim"><img src="2s.jpg" alt="önizleme" /></a></li>
        <li><a href="3.jpg" rel="popupacil" title="Alt başlıklar görünüyor"><img src="3s.jpg" alt="önizleme" /></a></li>
        <li><a href="4.jpg" rel="popupacil" title="Demek ki sorun yok"><img src="4s.jpg" alt="önizleme" /></a></li>
    </ul>
    <div class="altlink"><a href="http://www.kaisercrazy.com" title="KaiseRCrazY.CoM, Serkan Algur">Anasayfa</a></div>
</div>

</body>
</html>

Bütün işlem bundan ibaret. Canlı örnek için buraya tıklayın. İndirmek için aşağıda kaynak kodlarını ve resimleri size aktarıyorum.

Hadi Selametle.

Note: There is a file embedded within this post, please visit this post to download the file.

jQuery ile Resim Önizlemesi KaiseRCrazY.CoM, Serkan Algur sitesinde yer almaktadır. İzinsiz Yayınlamanaz.

Benzer Yazılar

Siteyle birlikte açılan...

jQuery ile Tweet Çubuğu...

jQuery İle Bacadan Duman...

Kodlar…

Her zamanki gibi öncelikle sayfamıza java kodlarımızı ve jQuery kodlarını çağırmamız gerekmekte. Öncelikle bu işlemleri gerçekleştirelim. Örneğini vereceğim çubuk alanı için gerekli olan javascript dosyasını aşağıdan indirebilirsiniz.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js"></script>

Sonra bu kodların altına sizin tweetlerini göstermesi için gerekli kodu yerleştiriyoruz.

<script type="text/javascript">
   $(document).ready(function(){
      $('#rrt').relatedTweets({
         debug:true
         ,from_users:'sizin twitter idniz'
         ,status:1
         ,realtime:0
         ,n:20
         ,show_avatar:0
         ,show_author:0
      });
   });
</script>

Bu kodları çağırdıktan sonra çubuğun görüneceği alanı oluşturuyoruz.

<div id="rrt">Yükleniyor..</div>

Hepsi bu kadar. Örneğe aşağıdan erişebilirsiniz.

Örnek Linki

Kaynak Site

Gerekli Javascript Dosyası

Hadi Selametle

jQuery ile Tweet Çubuğu Yapımı KaiseRCrazY.CoM, Serkan Algur sitesinde yer almaktadır. İzinsiz Yayınlamanaz.

Benzer Yazılar

jQuery İle Bacadan Duman...

jQuery ile üst giriş pa...

Siteyle birlikte açılan...

Siteye erişmek için tıklayınız.

Selametle.

Em Hesaplayıcı KaiseRCrazY.CoM, Serkan Algur sitesinde yer almaktadır. İzinsiz Yayınlamanaz.

Benzer Yazılar

No related photos.

Öncelikle açılışta siteyle beraber yüklenen javascript popuplar uzun zamandır bizimle birlikte ama kimi farklı pencerede kimi de rahatsız edici derecede kötü oluyor. jQuery nin hayatımıza girmesiyle birlikte bu işleri yapmak ve insanları rahatsız etmeden site içinde kullanmak daha basit bir hal aldı. İşte aşağıda anlattığım şekilde bunu başarabilrsiniz.

Öncelikle HMTL sayfamızı oluşturalım. Burada yukarıdaki yazıda belirtmiş olduğum document.ready komutu ile çağırma işlemini yapıyoruz. O satırları ayrı bir şekilde işaretledim. Aşağıda javascript dosyasındaki ile karıştırmayın. Burada sitenize eklemeniz gereken alanlar popupContact ve backgroundPopup adlı div alanları. Bunları da işaretledim. Bu kodlar ile açılacaktır Popup. Yapmanız gereken şey işaretli alanlardaki divleri olduğu gibi sitenizde açmak istediğiniz yere eklemek. Tabii css ve javascript dosyalarını da entegre etmeyi unutmadan :D

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Siteyle birlikte açılan jQuery Popup!</title>
	<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="popup.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
centerPopup();
loadPopup();
});
</script>
</head>
<body>
	<center>
		Açılıyoooor :)
	</center>
	<div id="popupContact">
		<a id="popupContactClose">x</a>
		<h1>Siteyle birlikte açılan jQuery Popup!</h1>
		<p id="contactArea">
			Bu ufak kodlar ve jQuery sayesinde harikalar yaratabiliriz.
			<br/><br/>
			Açılışta popup gelmesi için biraz kafa yordum :D ama değdi.
			<br/><br/>
			ESC ye popup dışına yada x e basarak kapanabilir.
			<br/><br/>
		</p>
	</div>
	<div id="backgroundPopup"></div>
</body>
</html>

Sonra da siteye eklediğimiz popup.js özelliklerine göz atalım. Unutmayın ki javascript dosyasını ben yazmadım. Sadece ona uygun olarak bazı değişiklikler yaptım.

Popup sisteminin aktifliğini belirleyelim.

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

Yükleme ve devredışı bırakma komutları

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

Ortalayalım…

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6

	$("#backgroundPopup").css({
		"height": windowHeight
	});

}

E tabii yükleme safhasında olacakları belirleyelim. Buradaki document.ready bir butona tıklama durumunda kullanılabilecek düzeyde hazırlanmıştı. Benim kullandığım fonksiyon HTML dosyasında. Yazdım yukarıda.

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

	//LOADING POPUP
	//Click the button event!
	$("#button").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});

	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});

Sonrasında CSS dosyasını irdeleyelim. Burada kodlarla ilgili body için de düzenleme yapmıştım. Siz ihtiyacınıza göre cssleri sitenize ekleyebilirsiniz.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}

Örneğe bakalım :) tıklayın bu yazıya.

Örnekte de nasıl çalıştığını görebilrisiniz. Eğer kafanıza yatmayan bir kısım varsa yorum bırakabilirsiniz. En kısa sürede size cevap veririm.Örnekteki Dosyaları indirmek için aşağıdaki indirme linkine tıklayın.

Hadi Selametle…

Note: There is a file embedded within this post, please visit this post to download the file.

Siteyle birlikte açılan jQuery Popup KaiseRCrazY.CoM, Serkan Algur sitesinde yer almaktadır. İzinsiz Yayınlamanaz.

Benzer Yazılar

jQuery ile üst giriş pa...

jQuery İle Bacadan Duman...

HTML5 Drag-Drop

Kodu Ekliyorum aşağıya. Kodun altında örneğe ait bir link te bulacaksınız;

<!DOCTYPE HTML>
<html>
<head>
<meta content=”text/html; charset=UTF-8″ http-equiv=”content-type”/>
<center><title>HTML5 Drag and drop demonstration</title>
<style type=”text/css”>
#boxA, #boxB, #boxC {
float:left; width:165px; height:165px; padding:10px; margin:10px;
}

#boxA { background-color: #474747; }
#boxB { background-color: #474747; }
#boxC { background-color: #474747; }

#drag, #drag2, #drag3 {
width:30px; height:30px; padding:5px; margin:5px;
-moz-user-select:none;
}
#drag { background-color: #e8e8e8;}
#drag2 { background-color: orange;}
#drag3 { background-color: purple; border:3px brown solid;}

</style>
<script type=”text/javascript”>
function dragStart(ev) {
ev.dataTransfer.effectAllowed=’move’;
//ev.dataTransfer.dropEffect=’move’;
ev.dataTransfer.setData(“Text”, ev.target.getAttribute(‘id’));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}

function dragEnter(ev) {
var idelt = ev.dataTransfer.getData(“Text”);
return true;
}

function dragOver(ev) {
var idelt = ev.dataTransfer.getData(“Text”);
var id = ev.target.getAttribute(‘id’);
if( (id ==’boxB’ || id ==’boxA’) && (idelt == ‘drag’ || idelt==’drag2′))
return false;
else if( id ==’boxC’ && idelt == ‘drag3′)
return false;
else
return true;
}

function dragEnd(ev) {
ev.dataTransfer.clearData(“Text”);
return true
}

function dragDrop(ev) {
var idelt = ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(idelt));
ev.stopPropagation();
return false; // return false so the event will not be propagated to the browser
}

</script>
</center></head>
<body>
<h1>Drag and drop HTML5 demo</h1>
<div>there are many other variables that can be used also, we will coer this another day.
</div>

<div id=”boxA”
ondragenter=”return dragEnter(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>

<div id=”drag” draggable=”true”
ondragstart=”return dragStart(event)”
ondragend=”return dragEnd(event)”>drag me</div>

<div id=”drag2″ draggable=”true”
ondragstart=”return dragStart(event)”
ondragend=”return dragEnd(event)”>drag me</div>

<div id=”drag3″ draggable=”true”
ondragstart=”return dragStart(event)”
ondragend=”return dragEnd(event)”>drag me</div>

</div>

<div id=”boxB”
ondragenter=”return dragEnter(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>
</div>

<div id=”boxC”
ondragenter=”return dragEnter(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>
</div>
<div style=”clear:both”>Example created by <a href=”http://html5tutorial.net/”>HTML Tutorials</a>.</div>
</body>
</html>

Örnek linki için tıklayın…

Selametle…

HTML5 Drag-Drop KaiseRCrazY.CoM, Serkan Algur sitesinde yer almaktadır. İzinsiz Yayınlamanaz.

Benzer Yazılar

jQuery ile üst giriş pa...