Tuesday, September 9, 2014

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....

No comments:

Post a Comment