Gerçekten çok sevdiğim bir eklentiyi sizlerle paylaşmak istiyorum. Bu eklenti, yazı başlığından da anlaşıldığı üzere slayt eklentisi. Fakat bu slayt eklentisinin, diğer slaytlardan farkı bana göre, hem yapılmasınınkolay olması hem de görsel açıdan güzel efektlere sahip olması. Bu slayt gösterisi ile neler yapabileceklerinize örnek vermek gerekirse; Blogger temalarını teker teker ekleyebilirsiniz. Veyahut, blogunuzdaki yazılara yer verebilirsiniz. Yani eklenti gerçekten çok kullanışlı, ve bir çok konuda kullanılmaya elverişli. Herneyse, eklentinin yapım aşaması uzun gibi gözükebilir, fakat aşağıdaki adımları doğru bir şekilde uyguladıktan sonra, bu güzel eklentiyi kullanmaya başlayabilirsiniz.Öncelikle </head> kodundan önce aşağıdaki kodları ekleyelim;
<!-- slayt eklentisi -->
<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/>Daha sonra, temamızda yer alan kod bölümüne aşağıdaki JavaScript kodlarını ekliyoruz;
<!-- Slayt Eklentisi JavaScript Kodları -->
<script type='text/javascript'>
//<![CDATA[
var noobSlide=new Class({initialize:function(a){this.items=a.items;this.mode=a.mode||'horizontal';this.modes={horizontal:'left','width'],vertical:['top','height']};this.size=a.size 1],(this.size*this.items.length)+'px');this.button_event=a.button_event ,next:],play:[],playback:[],stop:[]};if(a.addButtons){for(var b in a.addButtons){this.addActionButtons(b,$type(a.addButtons[b])=='array'?a.addButtons[b]:[a.addButtons[b]])}}this.fx=new Fx.Tween(this.box,$extend((a.fxOptions 0]}));this.walk((a.startItem .addEvent(this.handle_event,this.walk.bind(this,i,true]))}},addActionButtons:function(a,b){for(var i=0;i<b.length;i++){switch(a){case'previous':b[i].addEvent(this.button_event,this.previous.bind(this,[true]));break;case'next':b[i].addEvent(this.button_event,this.next.bind(this,[true]));break;case'play':b[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'next',false]));break;case'playback':b[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'previous',false]));break;case'stop':b[i].addEvent(this.button_event,this.stop.bind(this));break}this.buttons[a].push(b[i])}},previous:function(a){this.walk((this.currentIndex>0?this.currentIndex-1:this.items.length-1),a)},next:function(a){this.walk((this.currentIndex<this.items.length-1?this.currentIndex+1:0),a)},play:function(a,b,c){this.stop();if(!c){this[b](false)}this._play=this[b].periodical(a,this,[false])},stop:function(){$clear(this._play)},walk:function(a,b,c){if(a!=this.currentIndex){this.currentIndex=a;this.previousIndex=this.currentIndex+(this.currentIndex>0?-1:this.items.length-1);this.nextIndex=this.currentIndex+(this.currentIndex<this.items.length-1?1:1-this.items.length);if(b){this.stop()}if(c){this.fx.cancel().set((this.size*-this.currentIndex)+'px')}else{this.fx.start(this.size*-this.currentIndex)}if(b&&this.autoPlay){this.play(this.interval,'next',true)}if(this.onWalk){this.onWalk((this.items[this.currentIndex] ?this.handles[this.currentIndex]:null))}}}});
//]]>
</script>
<script type='text/javascript'>
window.addEvent('domready',function(){
//SAMPLE 2 (transition: Bounce.easeOut)
var nS2 = new noobSlide({
box: $('box2'),
items: [0,1,2,3,4,5,6.7],
interval: 3000,
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut,
wait: false
},
addButtons: {
previous: $('prev1'),
next: $('next1')
}
});
});
</script>Daha sonra, CSS kısmına aşağıdaki CSS kodlarını ekliyoruz.
/* slayt eklentisi css kodları */
.sample{padding:20px 10px; margin:4px 0 25px 0; border:1px solid #e1e1e1}
#box2{position:absolute;}
#box2 span{display:block;float:left;}
.buttons{text-align:center;padding:5px;}
.buttons span{color:#0080FF;padding:0 5px;cursor:pointer;font:10px Verdana}
.buttons span.active, .buttons span:hover{background:#0080FF;color:#fff}
.mask2{position:relative;width:240px;height:180px;overflow:hidden;}Ve son olarak aşağıdaki Slayt kodlarını, temamızdaki istediğimiz bir yere ekliyoruz;
<h2>Slayt Başlık</h2>
<div class='sample'>
<div class='mask2'>
<div id='box2'>
<span><img alt='Resim 1' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmswoE0HZNI/AAAAAAAABo8/dfvVQU6r-ng/img1.jpg'/></span>
<span><img alt='Resim 2' src='http://lh3.ggpht.com/_dfnTVAxeWMI/Smswof-uatI/AAAAAAAABpA/NpNb_osZJ1w/img2.jpg'/></span>
<span><img alt='Resim 3' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmtBFxofJqI/AAAAAAAABpE/j5l17o5gOpI/img3.jpg'/></span>
<span><img alt='Resim 4' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmtBGJ7z86I/AAAAAAAABpI/SuYuxjSLDuc/img4.jpg'/></span>
<span><img alt='Resim 5' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmtBGED7mqI/AAAAAAAABpM/IV6dp-zoFs4/img5.jpg'/></span>
<span><img alt='Resim 6' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmtBGEqDQfI/AAAAAAAABpU/JkMqVL3FzP8/img6.jpg'/></span>
<span><img alt='Resim 7' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmtBFxofJqI/AAAAAAAABpE/j5l17o5gOpI/img3.jpg'/></span>
<span><img alt='Resim 8' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmtBGED7mqI/AAAAAAAABpM/IV6dp-zoFs4/img5.jpg'/></span>
</div>
</div>
<p class='buttons'>
<span id='prev1'><< Geri</span>
<span id='next1'>İleri >></span>
</p>
</div>Örnek Slayt Görüntüsü
Kullanılışı: Eminim herkes biliyordur, fakat ben yine de anlatmak istiyorum;
Yukarıdaki, Next >> linki ile diğer resime geçebilir, << Previous linki ile ise bir önceki resime geri dönebilirsiniz. Play > tuşuna basarak slaytın kendi kendine ilerlemesine devam edebilirsiniz. VeStop tuşu ile slaytın ilerlemesini durdurabilirsiniz.
Not: Slayt otomatik olarak ilerlemektedir, yani siz ileri geri yapmasanız bile, slayt belli aralıklar ile diğer bir resime geçmektedir.
Not 2: Slaytta Next ve Previous gibi yerler Türkçedir. O kısımları, istediğiniz şekilde değiştirebilirsiniz.
0 yorum:
Yorum Gönder