SMKN3 MAUMERE: MEMBUAT IMAGE SLIDESHOW SEDERHANA

Image Slideshow adalah salah satu bagian penting dalam sebuah website. Tampilan gambar akan berganti secara otomatis sesuai pengaturan waktu.

Sebagai latihan untuk membuat image slideshow saat ini kita memerlukan 3 jenis file yakni:

File html untuk menempatkan image atau foto yang akan ditampilkan, dengan nama index.html.
File css yang digunakan untuk mengatur tampilan file html, kita beri nama style.css
Filejavascript untuk mengatur slide show images dengan nama jquery.js, style.js dan basic-jquery-slider.js

Adapaun langkah-langkah pembuatannya sebagai berikut :

Buatlah file index.html menggunakan notepad atau notepad++. untuk memudahkan latihan kemudian copas script berikut ini dan simpan dengan nama index.html

<html> <head><title>Latihan Membuat Slide Image</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="basic-jquery-slider.js"></script> <script type="text/javascript" src="style.js"></script> <link rel="stylesheet" href="style.css" type="text/css"/> </head> <body> <div id="tuts-slider"> <ul class="bjqs"> <li class="bjqs-slide clone"> <a href="#" target="_blank"><img src="images/gambar1.jpg" alt=""></a></li> <li class="bjqs-slide clone"> <a href="#" target="_blank"><img src="images/gambar2.jpg" alt=""></a></li> <li class="bjqs-slide clone"> <a href="#" target="_blank"><img src="images/gambar3.jpg" alt=""></a></li> <li class="bjqs-slide clone"> <a href="#" target="_blank"><img src="images/gambar4.jpg" alt=""></a></li> <li class="bjqs-slide clone"> <a href="#" target="_blank"><img src="images/gambar5.jpg" alt=""></a></li> <li class="bjqs-slide clone"> <a href="#" target="_blank"><img src="images/gambar6.jpg" alt=""></a></li> </ul> </div> </body> </html>

Untuk mengatur tampilan file html tadi dapat digunakan file css, berikut ini file style.css yang digunakan dalam latihan berikut:

/* Slider */
 
*{
  margin :0;
  padding:0;
}
#tuts-slider{
  margin:auto;
  position: relative;
  border:1px solid #ddd;
  height: 250px;
  width: 300px;
}
#tuts-slider .bjqs{
  position: absolute;
  height: 250px;
  overflow: hidden;
}
#tuts-slider ul{
  list-style-type: none;
}
#tuts-slider .bjqs li{
  border-top:none;
  padding:0;
  float: left;
}
#tuts-slider .bjqs-controls {
  position:absolute;
  top:10px;
  left:-5px;
  border:1px solid #ddd;
}
#tuts-slider .bjqs-controls:before{
  content:"";
  width:4px;
  height:4px; 
  position: absolute;
  bottom:-5px;
  left:0;
}
#tuts-slider .bjqs-controls li{
  border-top:none;
  padding:0;
}
#tuts-slider .bjqs-controls li:first-child{
  border-bottom:1px solid #ddd;
}
#tuts-slider .bjqs-controls li a{
  padding:5px;
  text-decoration:none;
  background:white;
  display: block;
  color:#000; 
  font:normal 12px arial;
}
#tuts-slider .bjqs-controls li a:hover{
  text-decoration: none;
  background:#efefef;
}
#tuts-slider img{
  height: 480px; width: 640px; float: left; position: relative;
}

Untuk pengaturan slideshow images digunakan 3 file java script yang dapat anda download pada link berikut ini : download jsrar
Tempatkan semua file pada folder yang sama
Buat folder baru dengan nama images untuk menyimpan semua file gambar yang akan ditampilakan seperti gambar berikut ini :

Pastikan bahwa nama file dalam folder yakni jquery.js, style.js dan basic-jquery-slider.js, dan style.css sama dengan nama file pada index.html pada tag <script></script>

Pastikan pula nama file image di folder images sama dengan yang tertulis pada tag <img src=images/nama_file.jpg> pada file index.html
Untuk melihatnya silahkan menjalankan file index.html.

Selamat mencoba semoga sukses

Minggu, 28 September 2014

MEMBUAT IMAGE SLIDESHOW SEDERHANA