Category: Java Script

Kali ini saya mau berbagi sedikit pengetahuan saya mengenai flexslider, dan membuat widget slider sederhana dengan flexslider ini, mariii…. 🙂

Okeh, mari kita membuat widget slider flexslider sendiri!

1. Download source dari Flexslider disini

Setelah source Flexslider berhasil didownload, ekstrak kedalam folder sesuai keinginan. Kalau saya menaruhnya di folder ‘js’, jadi kurang lebih seperti ini ‘public_html/js’

2. Struktur dasar dari Flexslider

Deklarasi Javascript dan CSS flexslider dilakukan dalam tag ‘< head >‘

< link rel="stylesheet" href="http://www.domainmu.com/js/flexslider/flexslider.css" type="text/css" media="screen"  />
< script type="text/javascript" src="http://www.domainmu.com/js/flexslider/jquery.flexslider-min.js" >
< script type="text/javascript" >
			jQuery ( document).ready(function($){
				$ ( '.flexslider').flexslider({
					slideshowSpeed: 36000, //silahkan diganti
					animationDuration: 36000 //silahkan diganti
				});
			});
		< /script >

Deklarasi HTML yang akan menjadi slider dengan flexslider, letakkan di bagian mana kamu mau slidernya muncul

< div class="flexslider">
  < ul class="slides">
    < li>
      < img src="slide1.jpg" />
    
    < li>
      < img src="slide2.jpg" />
    
    < li>
      < img src="slide3.jpg" />
    
  

Secara HTML flexslider ini sudah berfungsi dengan baik. Tapi karena post ini judulnya adalah membuat widget slider flexslider sederhana, maka belum lengkap kalau belum kita buat widgetnya yah 🙂 Maka langsung saja kita ke langkah selanjutnya!

3. Pembuatan widget slider flexslider

Deklarasi dasar pembuatan sebuah widget dalam wordpress adalah seperti berikut:

    class My_Widget extends WP_Widget {

	public function __construct () {
		// widget actual processes 
                // definisi variable2 utama dari widget yang akan kita buat
	}

	public function widget( $args, $instance ) {
		// outputs the content of the widget
                // HTML widget yang akan tampil
	}

 	public function form ( $instance ) {
		// outputs the options form on admin
                // tampilan form widget di WP-admin
	}

	public function update ( $new_instance, $old_instance ) {
		// processes widget options to be saved
                // apabila form widget kamu di edit, valuenya akan ter-update
	}
}

//Daftarin dan eksekusi widget kamu
add_action ( 'widgets_init', function (){
     register_widget ( 'My_Widget' );
});

Berikut adalah sample widget yang sudah jadi, harap maklum masih sederhana, silahkan bermain-main lebih lanjut 🙂

class Widget_Ku extends WP_Widget {

function __construct () {

$widget_ops = array ( ‘classname’ = > ‘widget_ku’, ‘description’ = > __(‘Widget Flexslider Sederhana’, ‘Widget_Ku’) );
$control_ops = array ( ‘width’ = > 300, ‘id_base’ = > ‘widget_ku’ );

parent::__construct (
‘widget_ku’, // Base ID
‘Widget Flexslider Sederhana’, // Name
$widget_ops,
$control_ops
);

}

function form ( $instance ) {

$defaults = array (
‘image_id1’ = > ”,
‘image_id2’ = > ”,
‘image_id3’ = > ”,
);

$instance = wp_parse_args ( (array) $instance, $defaults );
?>
< fieldset style =" background-color: #F1F1F1; width: 95.5%; border: 1px solid #DDD; padding: 10px 0px 10px 10px;">
< table style=" width: 100%;" cellpadding="0" cellspacing="0">
< tr>
< td>< label>Image url 1
< td align="left">
< input style=" width: 98%;" type=" text" id=" get_field_id( ‘image_id1’ ); ?>” name=”< ? php echo $this->get_field_name( ‘image_id1’ ); ?>” value=”< ? php echo $instance['image_id1'] ?>” />

< tr>
< td>< label>Image url 2
< td align="left">
< input style="width: 98%;" type="text" id="< ? php echo $this->get_field_id( ‘image_id2’ ); ?>” name=”< ? php echo $this->get_field_name( ‘image_id2’ ); ?>” value=”< ? php echo $instance['image_id2'] ?>” />

< tr>
< td>Image url 3
< td align="left">
< input style="width: 98%;" type="text" id="< ? php echo $this->get_field_id( ‘image_id3’ ); ?>” name=”< ? php echo $this->get_field_name( ‘image_id3’ ); ?>” value=”< ? php echo $instance['image_id3'] ?>” />

< ? php } function update ( $new_instance, $old_instance ) { $instance['image_id1'] = $new_instance['image_id1']; $instance['image_id2'] = $new_instance['image_id2']; $instance['image_id3'] = $new_instance['image_id3']; return $instance; } function widget ( $args, $instance ) { ?>
< div class="flexslider">
< ul class="slides">
< ? php $i=1; while ($instance['video_id'.$i] != '') { ?>
< li>
< img src="“>

< ? php $i++; } ?>

< ? php } } add_action ( 'widgets_init', 'load_widget_ku' ); function load_widget_ku () { register_widget( 'Widget_Ku' ); } [/html] Nahhh..... selamat mencoba yah 🙂 Jika ada pertanyaan silahkan diajukan dibawah, semoga saya bisa membantu. Semoga Artikel saya memberikan sedikit pencerahan, silahkan di share supaya 'kita semua bisa' membuat widget slider sederhana dengan Flexslider.