Membuat galeri gambar dengan javascript

Membuat galeri gambar dengan javascript
Di Posting Oleh : Wandi febriandi
Kategori : Pelajaran Pemprograman web

Selamat datang kawan kawan di blo saya yang sederhana ini . Sebelumnya saya mau tanya bagaimana kabarnya kawan ?mudah mudahan sehat , amin . Di artikel sebelumnya saya telah berbagi mengenai Belajar excel , fungsi logika if . Di artikel sebelumnya juga saya telah berbagi mengenai jQuery cara mengunakan fungsi animate .

Oke lanjut sekarang saya akan berbagi mengenai cara membuat galeri gambar dengan javascript . Petama tama siapkan 11 foto dengan nama urutan seperti 0,1,2,3,4,5. Oke kalo sudah kita lanjut buat HTML nya dulu .


<img src="img/0.png"width="300px"height="300px"id="photo"/>
<p onclick="next();">Next</p>
<p onclick="prev();">previous</p>
<p id="nama">smk/sma puragabaya</p>

Oke kalo sudah buat HTML kita akan buat javascriptnya

<script language="javascript">
<!-- Galeri gambar catatanwandicager.blogspot.com
//penomoran
var nomor=0;
var nomorprev;
var format=".jpg";
// penamaan gambar
var namagambar = ['smk/sma puragabaya','Asia Afrika','Ciater','Danau Situ Patenggang',
'Museum Geologi','Kampung Gajah','Kawah Putih Ciwidey','Kebun Binatang',
'Kebun Strawberry','Saung Angklung Udjo','air terjun dago pakar','Trans studio'];
function next(){
format=".jpg";
if(nomor==11){
nomor=11;
}else{
nomor=nomor+1;
}
nomorprev=nomor;
//untuk gambarnya
var nomorgambar="img/"+nomor+format;
var gambar=document.getElementById('photo').src=nomorgambar;
document.getElementById('nama').innerHTML = namagambar[nomor];
}
function prev(){
if(nomorprev<=1){
nomorprev=0;
format=".png";
}else{
nomorprev=nomorprev-1;
format=".jpg";
}
nomor=nomorprev;
//untuk gambarnya
var nomorgambar="img/"+nomorprev+format;
var gambar=document.getElementById('photo').src=nomorgambar;
document.getElementById('nama').innerHTML = namagambar[nomorprev];
}
//Galeri gambar beres -->
</script>

Oke ubah sama kalian misal kalian punya yang fotmatya png ubah jadi png . Kalo kalian gak pingin binggung binggung download aja source codenya .

Download source code

Hasilnya kurang lebih seperti ini

Oke itu dia semoga bermanfaat dan juga menambah wawasan . Terimakasih telah membaca artikel ini . Sampai jumpa di artikel yang lainnya yang lebih menarik dan juga lebih bermafaat . 

Silahkan kunjungi blog terbaru saya disini