Buat slide show image/photo

Blog info kembali lagi dengan tips bagaimana membuat gambar/photo dalam bentuk slide show.Slide show ini bukan dalam bentuk auto tetapi dalam bentuk manual.Ada button start,next,prev dan end.Fungsinya agar photo/image didalam blog anda dapat dikumpulkan dalam satu tempat dan ianya memudahkan pengunjung melayarinya.Nak tahu lebih lanjut, sila lihat contoh dibawah atau disebelah sidebar blog ini (itupun klu masih ada lagi)

Contoh :-

Scriptnya :-

<script language=javascript>
var width = 250;
var height = 100;
var imgAr1 = new Array();
var rImg1 = new Array();

imgAr1[0] = "dir1/image-1.jpg";
imgAr1[1] = "dir1/image-2.jpg";
</script>

<table cellpadding=0 cellspacing=0><tr><td style="border: 2px ridge red;">
<img id=pic border=0>
</td></tr>
<tr><td>
<table width=100% style="border: 2px ridge red; font-size: 13px; font-family: verdana, arial;">
<td align=center><a style="color: blue; cursor:pointer;" onclick="start()">Start</a></td>
<td align=center><a style="color: blue; cursor:pointer;" onclick="slideshow()">Next</a></td>
<td align=center><a style="color: blue; cursor:pointer;" onclick="prev()">Prev</a></td>
<td align=center><a style="color: blue; cursor:pointer;" onclick="end()">End</a></td>
<td align=center><a href="http://bloginfotips.blogspot.com" style="color: blue; text-decoration: none;
cursor:ponter; font-size: 13px;">&copy;H</a></td>
</tr></table>
</td></tr></table>

<script language=javascript>

for(var j = 0; j < imgAr1.length; j++)
{
rImg1[j] = new Image();
rImg1[j].src = imgAr1[j];
}

document.onload = setting();

var slide;
function setting()
{
slide = document.getElementById('pic');
slide.src = imgAr1[0];
slide.setAttribute("width",width);
slide.setAttribute("height",height);
}

//Image or picture slide show using java script
//slideshow function
var picture = 0;
function slideshow(){
if(picture < imgAr1.length-1){
picture=picture+1;
slide.src = imgAr1[picture];
}
}

function prev(){
if(picture > 0 ){
picture=picture-1;
slide.src = imgAr1[picture];
}
}

function start(){
slide.src = imgAr1[0];
picture = 0;
}

function end(){
slide.src = imgAr1[imgAr1.length-1];
picture = imgAr1.length-1
}
</script>

Keterangan

1) Copy script diatas dan pastekan disidebar atau footer blog anda.

2) Untuk ubah saiz slide show, cari kod ini..

var width = 250;

var height = 100;

3) Untuk letakkan image/photo, cari kod ini..

imgAr1[0] = "dir1/image-0.jpg";

imgAr1[1] = "dir1/image-1.jpg";

Gantikan tulisan yang bertanda merah dengan alamat url image anda.Contohnya alamat url image penulis :

imgAr1[0] = "http://dino.hpa.googlepages.com/DSC00736_opt.jpg";

imgAr1[1] = "http://dino.hpa.googlepages.com/DSC00733_opt.jpg";

4) Jika anda hendak menambah bilangan imagenya, hanya tambah kodnya saje seperti imgAr1[2] = "dir1/image-2.jpg"; imgAr1[3] = "dir1/image-3.jpg"; dan seterusnya.

Ingatan, upload dulu gambar/photo ke hosting anda dan dapatkan URL nya saje.Jika anda tidak mempunyai hosting atau tidak tahu caranya, ikuti tutorial image hosting disini.

Tamat.amin...

Note: Jika anda telah mempelajari tutorial diblog ini dan berjaya diapplikasikan diblog anda, harap dapat beri kredit pada blog ini dengan hanya memberi sepatah komen.

Mungkin artikel dibawah yang sedang anda cari