membuat backgound slide menggunakan jquery dan vegas

Design web lebih menarik jika background pada web tidak hanya warna putih, tetapi menggunakan gambar. Menggunakan Jquery dapat membantu mempercepat membuat background dengan gambar. Plugin yang ditambahkan dalah dari vegas yang berupa file js dan file css, yaitu jquery.vegas.min.js dan jquery.vegas.min.js. Komponen-komponen tersebut terlebih dahulu dapat didownload disini.  untuk mendapatkan jquery yang terbaru disini. Setelah di download langkah untuk setupnya adalah sebagai berikut :

include file Jquery : <script type="text/javascript" src="jquery.1.11.1.js" </script>
include file Jquery.vegas.js : <script type="text/javascript" src="jquery.vegas.min.js"></script>
include file Jquery.vegas.css :<link rel="stylesheet" type="text/css" src="jqyery.vegas.css"/>

Setelah itu jika hanya ingin menambahkan background dapat menggunakan script sebagai berikut :

<script>

• $(function() {
• $.vegas({
• src:'/images/background.jpg'
• });
• $.vegas('overlay', {
• src:'/vegas/overlays/13.png'
• });
• });

</script>

Jika ingin menggunakan slide background dapat menggunakan script sebagai berikut :

<script>

• $.vegas('slideshow', {
• backgrounds:[
• { src:'/img/background1.jpg' },
• { src:'/img/background2.jpg' },
• { src:'/img/background3.jpg' }
• ]
• })('overlay');

</script>

untuk include setiap file dapat menyesuaikan lokasi dimana penempatan filenya. Jquery vegas ini hanya membuat background untuk satu halaman penuh jadi untuk diset ke area div kayaknya masih belum bisa.

Untuk lebih jelasnya silahkan kunjungi documentasi yang saya peroleh di http://vegas.jaysalvat.com/documentation/slideshow/

Saya menemukan jquery vegas ini tidak sengaja saat mencari-cari jquery slide dan ini menurut saya kok agak menarik jadi saya coba dan lumayan menambah pengetahuan. Sekian dan terimakasih....

Membuat timepicker menggunakan JQuery-ui

Membuat timepicker menggunakan Jquery sangat mudah. Tetapi jika lama tidak dicoba untuk membuatnya terkadang hal kecil seperti membuat timepicker sering terlupa. Saya menulis ini bertujuan untuk mengisi kekosongan waktu yang banyak ini agar tidak membosankan. Selain itu jika suatu saat saya lupa untuk membuat timepicker saya akan membuka blog saya sendiri ini. Banyak tutorial di internet yang membahas tentang menggunakan time picker. Karena saking banyaknya malah membuat bingung untuk memilih. Salah satunya menggunakan timepicker menggunakan bootstrap. Tetapi yang saya gunakan saat ini tidak menggunakan bootstrap karena saya coba dan tidak berhasil. Saya menggunakan jquery biasa yang memanfaatkan beberapa plugin. Plugin-plugin yang saya gunakan sudah saya siapkan beserta file index.html dan images yang sudah siap dijalankan, filenya dapat di download disini.

1. Membuat folder time_picker
2.dalam folder tersebut diisi dengan file css dan js

• jquery-1.9.0.min.js
• jquery-ui-timepicker-addon.css
• jquery-ui-timepicker-addon.js
• jquery-ui.css
• jquery-ui.min.js

3. membuat folder image didalam time_picker untuk menyimpan image yang akan digunakan

• ui-bg_flat_75_ffffff_40x100.png
• ui-bg_glass_55_fbf9ee_1x400.png
• ui-bg_glass_65_ffffff_1x400.png
• ui-bg_glass_75_dadada_1x400.png
• ui-bg_glass_75_e6e6e6_1x400.png
• ui-bg_highlight-soft_75_cccccc_1x100.png
• ui-icons_222222_256x240.png

4. membuat file index.html untuk membuat form input waktu yang menggunakan time_picker

<script type="text/javascript" src="jquery-1.9.0.min.js"></script>

<script type="text/javascript" src="jquery-ui.min.js"></script>

<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>

<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css"/>

<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css"/>

<div class="example-container">

<p>Format the time:</p>

    <div>

    <input type="text" name="basic_example_3" id="basic_example_3" value="" />

</div>



<script>

    $(document).ready(function(){

        $('#basic_example_3').timepicker();

    });

</script>