jQuery Plugin : Membuat galeri dengan YoxView
Pertama adalah menyiapkan halaman HTML kemudian memanggil file jQuery library, javascript serta CSS dari YoxView dan menginisialkan fungsi javascript seperti berikut
<link rel="Stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="../yoxview/yoxview-init.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".yoxview").yoxview();
});
</script>
<script type="text/javascript" src="../yoxview/yoxview-init.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".yoxview").yoxview();
});
</script>
Letakan script di atas dalam tag <Head> kemudian script untuk menampilkan gambarnya ke halaman HTML adalah seperti berikut
<div class="thumbnails yoxview">
<a href="gambar01.jpg"><img src="gambarthumbnail01.jpg" alt="First" title="gambar 1" /></a>
<a href="gambar02.jpg"><img src="gambarthumbnail02.jpg" alt="First" title="gambar 2" /></a>
<a href="gambar03.jpg"><img src="gambarthumbnail03.jpg" alt="First" title="gambar 3" /></a>
</div>
<a href="gambar01.jpg"><img src="gambarthumbnail01.jpg" alt="First" title="gambar 1" /></a>
<a href="gambar02.jpg"><img src="gambarthumbnail02.jpg" alt="First" title="gambar 2" /></a>
<a href="gambar03.jpg"><img src="gambarthumbnail03.jpg" alt="First" title="gambar 3" /></a>
</div>
Ubahlah gambar serta gambar thumbnail pada script di atas dengan gambar yang Anda inginkan , letakan script-script tersebut dalam div container dalam tag <Body>. Anda tinggal menambah berapa banyak gambar yang Anda inginkan .
Tidak ada komentar