Kali ini saya akan membagi salah satu trik yang sering digunakan pada website-website, yaitu membuat simple slideshow. Trik ini banyak digunakan oleh para programmer untuk menjadikan websitenya terlihat lebih cantik dan dapat menghemat ruang pada website. Biasanya slider ini dipasang pada halaman home ataupun halaman Gallery. Contohnya saja jika pada website anda mempunyai menu gallery, dan pada menu gallery tersebut hanya menampilkan gambar ataupun foto-foto seperti biasa saja, tentunya ini akan membosankan pengunjung untuk melihatnya. Selain itu hanya akan memenuhi ruang pada website anda. Untuk itulah agar menu gallery anda terlihat cantik dan jauh lebih menarik, maka anda harus menggunakan slider gambar pada gallery anda.
ikutilah langkah demi langkah tutorial yang saya berikan.
Pertama siapkan beberapa gambar yang ingin ditampilkan.
setelah itu buka notepad++ anda,
dan buatlah program sederhana untuk menampilkan gambar tersebut, seperti dibawah ini:
<html>
<head>
<title>Blog Tutorial - Slideshow simple</title>
</head>
<body bgcolor="black"><center><h1><font color="red">"Meyda Sefira"</font></h2>
<font color="white" size="4">Simple Slideshow</font>
<div class="slideshow">
<ul>
<li><img src="../../gambar/meyda(1).jpg" alt="Gambar 1" width="400"></li>
<li><img src="../../gambar/meyda(2).jpg" alt="Gambar 2"></li>
<li><img src="../../gambar/meyda(3).jpg" alt="Gambar 3"></li>
<li><img src="../../gambar/meyda(4).jpg" alt="Gambar 4"></li>
<li><img src="../../gambar/401275_522167764460940_709106150_n.jpg" alt="Gambar 5"></li>
<li><img src="../../gambar/319544_531128123564793_1110527766_n.jpg" alt="Gambar 6"></li>
</ul>
</div>
<div class="jarak">
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0)">1</a>
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(1)">2</a>
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(2)">3</a>
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(3)">4</a>
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(4)">5</a>
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(5)">6</a>
</div><br><br><br>
<font color="WHITE">BLOG TUTORIAL : ALGORITMA-CYBER.BLOGSPOT.COM</font>
</body>
</html>simpan program anda, misalnya dengan nama slideshow.html
jika anda jalankan program tersebut, akan menghasilkan output seperti gambar dibawah ini:
Untuk menambahkan efek slideshow, anda membutuhkan 2 library jquery.
yaitu: jquery-1.4.1.js dan jquery.blinds-0.9.js .
anda bisa mendownload 2 jquery tersebut dilink dibawah ini:
DOWNLOAD DISINI
setelah itu, pada file slideshow.html tadi, tambahkan skrip untuk memanggil jquery yang baru saja anda download., letakan dibawah kode <head>
<script language="Javascript" type="text/javascript" src="jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="jquery.blinds-0.9.js"></script>Jika anda jalankan lagi program anda, tidak akan terjadi perubahan,
karena anda belum membuat javascript untuk slideshownya,
untuk itu tambahkan kode javascript dibawah kode jquery tersebut.
<script type="text/javascript">
$(window).load(function () {
$('.slideshow').blinds();
})
</script>
simpan program anda,
jika anda jalankan program anda lagi, akan menghasilkan output sperti gambar dibawah ini:
efek slideshow anda sudah selesai, tetapi perhatikan halaman dengan angka 1-6,
mungkin jika hanya angka sperti itu, kurang menarik. untuk itu tambahkan css untuk merapihkannya.
buatlha file baru misalnya dengan nama blinds.css
lalu ketikkan programnya sperti ini:
.jarak{
margin-left:580;
}
.change_link {
display: block;
width: 25px;
height: 25px;
font-size: 15pt;
background-color: #a5a5a5;
float: left;
margin-right: 5px;
margin-top: 10px;
border: 2px solid #bbb;
text-decoration: none;
}simpan file css tersebut,
sekarang kembali lagi pada file slideshow.html
tambahkan skrip berikut untuk memanggil file css tersebut.
letakan dibawah kode <head>
<link rel="Stylesheet" href="blinds.css" type="text/css">
simpan program anda, dan coba anda jalankan lagi.
jika berhasil akan keluar output seperti dibawah ini:
0 komentar:
Posting Komentar - Back to Content