Slideshow Effect Ngedet dengan Mootools

Demo

Tutorial slideshow ini bernama noobslide berbasis mootools, dari beberapa pengembangan slide dari noobslide ini saya mencoba 'sample 2' yang menggunakan effect ngedet untuk diterapkan di 'blogger template'.

Tahapan Pengembangan Slideshow Effect Ngedet dari Mootools

1. Masukan script Mootools berikut sebelum </head> :

<!-- mootools -->
<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/>

:: catatan: apabila script mootools ini sudah anda miliki, maka tidak perlu di input lagi.

2. Masukan Javascript ini sesudah script Mootools diatas:

<!-- Slideshow -->
<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||240;this.box=a.box.setStyle(this.modes[this.mode][1],(this.size*this.items.length)+'px');this.button_event=a.button_event||'click';this.handle_event=a.handle_event||'click';this.onWalk=a.onWalk||null;this.currentIndex=null;this.previousIndex=null;this.nextIndex=null;this.interval=a.interval||5000;this.autoPlay=a.autoPlay||false;this._play=null;this.handles=a.handles||null;if(this.handles){this.addHandleButtons(this.handles)}this.buttons={previous:[],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||{duration:500,wait:false}),{property:this.modes[this.mode][0]}));this.walk((a.startItem||0),true,true)},addHandleButtons:function(a){for(var i=0;i<a.length;i++){a[i].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]||null),(this.handles&&this.handles[this.currentIndex]?this.handles[this.currentIndex]:null))}}}});

//]]>
</script>
<script type='text/javascript'>
window.addEvent(&#39;domready&#39;,function(){


//SAMPLE 2 (transition: Bounce.easeOut)
var nS2 = new noobSlide({
box: $(&#39;box2&#39;),
items: [0,1,2,3,4,5,6.7],
interval: 3000,
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut,
wait: false
},
addButtons: {
previous: $(&#39;prev1&#39;),
next: $(&#39;next1&#39;)
}
});


});
</script>

:: catatan: 'items: [0,1,2,3,4,5,6.7]', angka tersebut adalah jumlah image yang anda gunakan, untuk itu sesuaikan angka ini dengan image untuk slideshow yang anda gunakan, misal anda hanya menggunakan 3 image maka hanya [0,1,2].

3. Masukkan code HTML berikut sesudah <div id='sidebar-wrapper'>

<h2>SlideShow</h2>
<div class='sample'>
<div class='mask2'>
<div id='box2'>
<span><img alt='Photo' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmswoE0HZNI/AAAAAAAABo8/dfvVQU6r-ng/img1.jpg'/></span>
<span><img alt='Photo' src='http://lh3.ggpht.com/_dfnTVAxeWMI/Smswof-uatI/AAAAAAAABpA/NpNb_osZJ1w/img2.jpg'/></span>
<span><img alt='Photo' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmtBFxofJqI/AAAAAAAABpE/j5l17o5gOpI/img3.jpg'/></span>
<span><img alt='Photo' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmtBGJ7z86I/AAAAAAAABpI/SuYuxjSLDuc/img4.jpg'/></span>
<span><img alt='Photo' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmtBGED7mqI/AAAAAAAABpM/IV6dp-zoFs4/img5.jpg'/></span>
<span><img alt='Photo' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmtBGEqDQfI/AAAAAAAABpU/JkMqVL3FzP8/img6.jpg'/></span>
<span><img alt='Photo' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmtBFxofJqI/AAAAAAAABpE/j5l17o5gOpI/img3.jpg'/></span>
<span><img alt='Photo' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SmtBGED7mqI/AAAAAAAABpM/IV6dp-zoFs4/img5.jpg'/></span>
</div>
</div>
<p class='buttons'>
<span id='prev1'>&lt;&lt; Previous</span>
<span id='next1'>Next &gt;&gt;</span>
</p>
</div>

4. Masukkan kode CSS berikut:

/* slideshow */
.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;
}

:: catatan: sesuaikan code CSS ini dengan karakter template anda.

4. Selesai.

Posted in: Blogger,Mootools