Sebelum mempelajari bagaimana tutorial slideshow foto auto dengan jquery ada baiknya kita memahami tentang jquery itu sendiri. JQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani eventm animasi, efek dan memproses interaksi ajax. JQuery dirancang agar memudahkan dalam membuat program menggnakan Javascript sesuai dengan slogannya yaitu, write less, do more (menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih sedikit). Dan fungsi jQuery sendiri adalah mengakses bagian halaman tertentu dengan mudah, mengubah tampilan bagian halaman tertentu, mengubah isi dari halaman, menambah animasi tanpa harus memakai flash yang lebih berat, serta load data atau halaman tanpa merefresh seluruh halaman dan mempersingkat sintaks.
Setelah kita mengetahui apa itu jQuery beserta fungsinya mari kita langsung saja mempelajari tutorial pembuatan slideshow foto auto dengan jquery. Dan selanjutnya bisa mendownload bahan-bahannya terlebih dahulu di sini -> DOWNLOAD
1. Langkah pertama ekstrak file yang sudah di download tadi dan buka file headnews.
2. Selanjutnya akan tampil source code seperti berikut:
<html>
<head>
<link rel="stylesheet" type="text/css" href="head.css">
<script src="jquery-1.8.0.min.js"></script>
<script src="headline.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// untuk permulaan, tampilkan content nomor 1 '#slideAwal'
bukaContent($('#slideAwal'),'div1');
});
</script>
<title>Nadihaha Galeri</title></head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td>
<h3> SELAMAT DATANG DI GALERI NADIHAHA.BLOGSPOT.COM </a></h3>
<div id="divTrigger">
<a href="javascript:;" onClick="bukaContent(this,'div1')" id="slideAwal">1</a>
<a href="javascript:;" onClick="bukaContent(this,'div2')">2</a>
<a href="javascript:;" onClick="bukaContent(this,'div3')">3</a>
<a href="javascript:;" onClick="bukaContent(this,'div4')">4</a>
</div>
<div id="divContent">
<div id="div1">
<span class="title">Mini People</span>
<img src="images/1-slide.jpg" align="left" />
Foto mahasiswa mengunakan jas lab yang di edit dengan menggunakan photoshop.
</div>
<div id="div2">
<span class="title">Efek Dispersion</span>
<img src="images/2-slide.jpg" align="left" />
Foto sedang bermain bass sambil meloncat yang di edit dengan photoshop.
</div>
<div id="div3">
<span class="title">Mini Planet</span>
<img src="images/3-slide.jpg" align="left" />
Foto diambil di Danau Seran dan di edit menggunakan aplikasi Android.
</div>
<div id="div4">
<span class="title">Senja</span>
<img src="images/4-slide.jpg" align="left" />
Foto diambil di Bukit Lentera Banjarbaru di sore hari.
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
3. Source code tersebut bisa diedit sesuai keinginan anda jika ingin merubahnya.
4. Berikut hasil tampilanya.
Dan sekian tutorial singkat dari saya, untuk lebih jelasnya bisa download file di atas agar mudah untuk di pelajari. Sekian terimakasih. Wassalamualaikum wr. wb.
Tidak ada komentar:
Posting Komentar