Cara Membuat BackBox Image Viewer
"BackBox Image Viewer" ini mendukung kemampuan untuk mengabaikan perbesaran gambar saat pengguna mengklik browser.
Dalam "BackBox" ini disediakan beberapa tombol navigasi yang dapat digunakan untuk melihat gambar dengan pilihan mode yang berbeda, seperti "auto rotasi", "pervious" dan "next" links dan dapat kembali kehalaman sebelumnya dengan menutup "BackBox" ini.
Contoh:
(Letakan cursor pada gambar, lalu klik..)
Cara Memasang BackBox Image Viewer
Langkah Pertama:
Letakan beberapa kode script berikut ini diatas kode</head>
<link rel="stylesheet" href="backbox.css" type="text/css" />
<script type="text/javascript" src="js/prototype.compressed.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/dhtmlHistory.js"></script>
<script type="text/javascript" src="js/customsignsheader.js"></script>
Langkah Kedua:
Pasang script Contoh berikut ini untuk membuat BackBox Image Viewer, letakan pada <body> halaman anda.
<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="images/babyhand.jpg" rel="lightbox[slide]" caption="A Bunch of Grapes">
<img src="images/sunset.jpg" alt="lime" width="400" height="300" border="0" /></a>
</div>
<a href="images/desert.jpg" rel="lightbox[slide]" caption="Sunflower"></a>
<a href="images/beech.jpg" rel="lightbox[slide]" caption="Dolphin"></a>
<a href="images/lime.jpg" rel="lightbox[slide]" caption="Waterfall"></a>
Keterangan:
Bagian yang berwarna merah adalah HTML untuk thumbnail, sedangkan warna kuning adalah link kosong yang berisi path gambar yang harus disajikan sebagai bagian dari slideshow. Perhatikan rel = " lightbox[slide] " di dalam masing-masing-link, ini memberitahukan bahwa semua bagian dari kelompok BackBox disebut "slide". Anda dapat membuat grup gambar yang berbeda dengan memberikan masing-masing kelompok nama yang berbeda.sumber: javascriptkit
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon