Kamis, 18 Desember 2014

Membuat Slide Show Pada PHP

Diposting oleh Unknown di 19.58
Nivo Slider merupakan framework javascript atau jquery plugin yang dibuat khusus untuk image slide. Plugin ini memiliki 16 transisi slide yang berbeda, selain itu plugin nivo slider sangat gampang digunakan, support terhadap responsive website dan yang pasti free custom dan free cost.
Terus bagaiman cara memasang image slideshow Nivo Slider?
1. Download free nivo slider plugin di http://dev7studios.com/nivo-slider/
2. Buat  folder baru dengan nama misalnya slider
3. Ekstrak file nivoslider.zip didalam folder slider ( biasanya menjadi folder nivo-slider). Jadi dalam folder slider sudah ada folder nivo-slider ( /slider/nivo-slider/ )
4. Buat file index.php di dalam folder slider ( /slider/index.php ), Mungkin penjelasanya sedikit mendetail untuk mengantisipasi kesalahan path untuk nivo slider
5. Pada index.php buatlah tag <head> seperti code dibawah ini :
1
2
3
4
5
6
7
8
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Nivo Slider</title>
     <link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" />
     <link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" />
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
     <script src="nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
</head>
6. Masukan javascript utama untuk slider di dalam tag <head>, posisikan script di bagian bawah. (sebelum tag penutup </head>)
1
2
3
4
5
<script type="text/javascript">
     $(window).load(function() {
          $('#slider').nivoSlider();
     });
</script>
7. Buatlah sebuah folder untuk menyimpan image yang akan dijadikan slide misalnya folder img ( /slider/img/ ). Masukan gambar – gambar yang akan digunakan untuk image slideshow misalnya

1
2
3
4
- /slider/img/1.jpg
- /slider/img/2.jpg
- /slider/img/3.jpg
- /slider/img/4.jpg
8. Selanjutnya pasang markup html untuk slide pada tag <body> seperti dibawah:
1
2
3
4
5
6
7
8
9
10
11
<body>
     <div class="slider-wrapper theme-default">
          <div class="ribbon"></div>
          <div id="slider" class="nivoSlider">
               <img src="img/1.jpg" alt="Image 1" />
               <img src="img/2.jpg" alt="Image 2" />
               <img src="img/3.jpg" alt="Image 3" />
               <img src="img/4.jpg" alt="Image 4" />
           </div>
    </div>
</body>
9. Nah, sekarang coba buka index.php pada browser. Image slideshow ternyata sudah jalan.

Mungkin untuk lebih advance bisa dipelajari lebih lanjut dari dokumentasi nivo slider http://docs.dev7studios.com/jquery-plugins/nivo-slider. Ada banyak sekali feature tambahan yang bisa ditambah dalam nivo slider dan dengan cara simple tinggal menambahkan beberapa property di script utama di tag <head>. Salah satu contoh merubah effect transisi seperti dibawah ini :
1
2
3
4
5
6
7
<script type="text/javascript">
     $(window).load(function() {
           $('#slider').nivoSlider({
                effect: ' fade',     // Specify sets like: 'fold, random, sliceDown'
           });
     });
</script>
Dengan script di atas transisi akan berubah menjadi memudar.

http://pixelbali.com/tutorial-website/cara-memasang-image-slideshow-nivo-slider.html

http://khoiruddin.com/tag/css-web-design/

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
 
Blogger Widgets