Cara Membuat Preloaded Slideshow
Preloaded Slide Show, sebuah tanyangan slide gambar yang dapat langsung dilihat tanpa harus preload terlebih dahulu, karena "Chaces" dapat memanggil dan menampilkan gambar untuk berpindah ke gambar berikutnya.
Dan hal ini memastikan kelancaran transisi antara gambar yang akan ditampilkan.
Contoh:
(Lihat navigasi dibawah gambar...)Cara Memasang Preloaded Slideshow
Langkah Pertama:
Letakan script berikut ini diatas kode </head><script language="JavaScript">
//Preloaded slideshow script- By Jason Moon
//For this script and more
//Visit http://www.dynamicdrive.com
// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array('http://files.myopera.com/botaxs_dahe/albums/4000722/100_2927.JPG','http://files.myopera.com/botaxs_dahe/albums/4000722/100_2869.JPG','http://files.myopera.com/botaxs_dahe/albums/4000722/100_2911.JPG');
// DO NOT EDIT BELOW THIS LINE!
function CacheImage(ImageSource) { // TURNS THE STRING INTO AN IMAGE OBJECT
var ImageObject = new Image();
ImageObject.src = ImageSource;
return ImageObject;
}
function ShowSlide(Direction) {
if (SlideReady) {
NextSlide = CurrentSlide + Direction;
// THIS WILL DISABLE THE BUTTONS (IE-ONLY)
document.SlideShow.Previous.disabled = (NextSlide == 0);
document.SlideShow.Next.disabled = (NextSlide ==
(Slides.length-1));
if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
document.images['Screen'].src = Slides[NextSlide].src;
CurrentSlide = NextSlide++;
Message = 'Picture ' + (CurrentSlide+1) + ' of ' +
Slides.length;
self.defaultStatus = Message;
if (Direction == 1) CacheNextSlide();
}
return true;
}
}
function Download() {
if (Slides[NextSlide].complete) {
SlideReady = true;
self.defaultStatus = Message;
}
else setTimeout("Download()", 100); // CHECKS DOWNLOAD STATUS EVERY 100 MS
return true;
}
function CacheNextSlide() {
if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] ==
'string'))
{ // ONLY CACHES THE IMAGES ONCE
SlideReady = false;
self.defaultStatus = 'Downloading next picture...';
Slides[NextSlide] = CacheImage(Slides[NextSlide]);
Download();
}
return true;
}
function StartSlideShow() {
CurrentSlide = -1;
Slides[0] = CacheImage(Slides[0]);
SlideReady = true;
ShowSlide(1);
}
</script>
Keterangan:
Ganti isi var Slides = new Array (dengan gambar anda yang akan ditampilkan.)Langkah Kedua:
Pasang script berikut ini untuk membuat Preloaded SlideShow, pada <body> halaman website anda.<form name="SlideShow">
<table>
<tr>
<td colspan=2><img name="Screen" width=108 height=135></td>
</tr>
<tr>
<td><input type="button" name="Previous"
value=" << "
onClick="ShowSlide(-1)"></td>
<td align="right"><input type="button" name="Next"
value=" >> " onClick="ShowSlide(1)"></td>
</table>
</form>
Langkah Ketiga:
Tambahkan event handler berikut ini kedalam tag <body> itu sendiri.<body onLoad="StartSlideShow()">
sumber: dynamicdrive
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