Merhabalar.. Bugün sizlere, çoğu yabancı ve birkaç tane de türk blogunda yer alan, sonraki konu ya da yorumlara atla gibi jQuery ScrollTo Pluginini nasıl kullanırız onu göstereceğim.. Zaten şurada mevcut olan jQuery Pluginimizi öncelikle indirmemiz gerekiyor. Ve de jQuery scriptimizi şuradan indirebilirsiniz.
Birazdan sizler için ekleyeceğim demo da bi sonraki , bir önceki, yorumlar ve yorum bırak diye 4 adet link yerleştireceğim. Linkleri dilediğimiz gibi çoğaltabileceğimizi ,kendimize ait bir katman oluşturup artık sizin yaratıcılığınızla farklı şeyler de elde edebiliriz. İlk olarak plugini ve ne anlatmak istediğimi anlamak için demoyu inceleyiniz.
2 jQuery scriptimizin yanında 3 adet bölümden oluşan bir ders anlatacağım. Bunlara artık bildiğiniz gibi HTML ile başalyalım;
HTML Kodları
Arkadaşlar, bu özellik genelde wordpress bloglarında işe yaradığı için sanki worpdress temasına entegre ediyormuş gibi anlatacağım, oysaki dilediğiniz yerde kullanabilirsiniz.. Örneğimizi açıklarken şöyle bir şey daha açıklayayım; düşünelim ki bir wordpress temamız var ve wordpress temasının bütün blog yazılar post sınıfına dahil olsun. Yani her blog başlamadan önce bir post sınıflı katman açılsın. Buna göre uygularsak HTML kodlarımız şu şekilde olacaktır;
<div class="post"> içerik.. </div> <div class="post"> içerik... </div> <div class="post"> içerik... </div>
CSS Kodları
Arkadaşlar, CSS kodların yapmamız gereken tek değişiklik, yan tarafta duracak olan navigasyon panelimize, CSS derslerinde de bahsettiğim gibi, position:fixed değerini veriyoruz.
#navigasyon-cubuk {
position: fixed;
right: 15px;
top: 35%;
}
Javascript
Zaten hali hazırda var olan plugine javascript kadlarıyla bir açıklık getirmemiz gerekiyor. Bunun için anonim fonksiyonlardan yararlanacağız.Tabi bundan önce her demo da olduğu gib, <head> etiketlerimizin arasına aşağıda verdiğim scriptlerin yollarını göstermemiz gerekiyor;
&amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;js/jquery-1.4.2.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;js/jquery.scrollTo-min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
Yukarıda son satırda bulunan kod birazdan ekleyeceğimiz anonim fonksiyonun başladığını gösteriyor.Scriptin amacı; ilk olarak kullanıcı sonraki butonuna tıkladığında, akordiyon şeklinde diğer yazıya yani diğer post sınıfına göderiyor bizi.
İkinci olarak;seçilen bölümün içeriği, pluginde var olan kodlar sayesinde bize thumb gösterimi ayarlıyor. Bu seçenek aslında sadece bir dahaki yazı gibi görünsede , blog içerisinde sadece sonraki ve önceki yazı olarak gösterilip ,yazı sayfalarında (single.php) yorumlar ve yorum yap diye iki adet daha eklenti kurulabilir. Örnekte hepsi bir arada gösterilmiştir.
$(function() {
function scroll(direction) {
var scroll, i,
positions = [],
here = $(window).scrollTop(),
collection = $('.post');
collection.each(function() {
positions.push(parseInt($(this).offset()['top'],10));
});
for(i = 0; i &amp;lt; positions.length; i++) {
if (direction == 'ileri' &amp;amp;&amp;amp; positions[i] &amp;gt; here) { scroll = collection.get(i); break; }
if (direction == 'geri' &amp;amp;&amp;amp; i &amp;gt; 0 &amp;amp;&amp;amp; positions[i] &amp;gt;= here) { scroll = collection.get(i-1); break; }
}
if (scroll) {
$.scrollTo(scroll, {
duration: 750
});
}
return false;
}
$(&amp;quot;#ileri,#geri&amp;quot;).click(function() {
return scroll($(this).attr('id'));
});
$(&amp;quot;.scrolltoanchor&amp;quot;).click(function() {
$.scrollTo($($(this).attr(&amp;quot;href&amp;quot;)), {
duration: 750
});
return false;
});
});