Membuat Gallery Slideshow Dengan Javascript

Sudah lama jg saya tidak pernah membuka blog ini lagi, mungkin karena saya terlalu sibuk dengan pembuatan web dinamis, ah... kayaknya terlalu membahas masalah pribadi,, heee,,, kali ini saya akan menjelaskan tentang cara pembuatan Gallery Slideshow Dengan Javascript,

Oke.. untuk melihat contohnya silahkan klik disini 
Langsung saja ke proses pembuatan




Langkah Pembuatan :

1. Masuk Ke akun Blogger Anda
2. Klik Rancangan Pilih Edit Html
3. Cari Kode </head>
4. Lalu Copy Paste Kode Dibawah Ini Dan Letakan  Tepat diatas kode  </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

slideShow(3000);

});

function slideShow(speed) {

$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Script by www.kikiyo.co.cc

$('ul.slideshow li').css({opacity: 0.0});

$('ul.slideshow li:first').css({opacity: 1.0});

$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));

$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption

$('#slideshow-caption').css({opacity: 0.7, bottom:0});

var timer = setInterval('gallery()',speed);

$('ul.slideshow').hover(

function () {

clearInterval(timer);

},

function () {

timer = setInterval('gallery()',speed);

}

);

}

function gallery() {

var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

var title = next.find('img').attr('title');

var desc = next.find('img').attr('alt');

next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

$('#slideshow-caption').animate({bottom:-70}, 300, function () {

//Display the content

$('#slideshow-caption h3').html(title);

$('#slideshow-caption p').html(desc);

$('#slideshow-caption').animate({bottom:0}, 500);

});

current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>

</script>

<style type='text/css'>

ul.slideshow {

list-style:none;

width:800px;

height:240px;

overflow:hidden;

position:relative;

margin:0;

padding:0;

font-family:Arial,Helvetica,Trebuchet MS,Verdana;

;

}

ul.slideshow li {

position:absolute;

left:0;

right:0;

}

ul.slideshow li.show {

z-index:500;

}

ul img {

width:800px;

height:240px;

border:none;

}

#slideshow-caption {

width:800px;

height:70px;

position:absolute;

bottom:0;

left:0;

color:#fff;

background:#000;

z-index:500;

}

#slideshow-caption .slideshow-caption-container {

padding:5px 10px;

z-index:1000;

}

#slideshow-caption h3 {

margin:0;

padding:0;

font-size:16px;

}

#slideshow-caption p {

margin:5px 0 0 0;

padding:0;

}

</style>

ket : Angka yang berwarna biru adalah ukuran permanen gambar, anda dapat menggantinya sesuai dengan ukuran tata letak web anda.

5. Klik Save
6. Selanjutnya klik Rancangan klik Tambah Gadget
7. Pilih HTML/Javascript lalu masukan script kode dibawah ini

<center>

<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2Ur2a9dIXRkAuZKJEGT8GX9nhJBzbvVcm5AKZQu6aBiqH9upPonvZKZbDhcFX1gDUR07n9SayC0PxCeIP5uSNGdtdkA9R1EVSc3FW_Zb8Lz5A7xHpegD9B1Tn2R3Hu2SC-fJ2oKeEXU/s1600/1.jpg" title="Gambar Slideshow 1" alt="Penjelasan Artikel Pada Gambar 1" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjhSumWjhzMymqS0la3ci9vVT8kSvVfyeFjN2XMhMmCPspYbjgH9o4hylXni-p4gWl6MerL9RvtAo1FlJpwfHWywFLk_wPUYvpIEqvYkokEaYj0gqULOfgFHCvKdb4e4Dkk9rMwaB0Cik/s1600/2.jpg" title="Gambar Slideshow 2" alt="Penjelasan Artikel Pada Gambar 2" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFSbfbnBFz3uhYcjjoQsQeOg2qOshTTpyrOaifWQYorw3PZZz_qHjcSHMbY7NEaVzFMys6vyXDGnIM9dgcVCeeW0hAV8v9v30fFQnq2HzoZW5J21WFKpmqHlWUAh0UYrYJUrYYr3m3ooE/s1600/3.jpg" title="Gambar Slideshow 3" alt="Penjelasan Artikel Pada Gambar 3" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7GQMYhCg2EdnHQhL95FbIrRsbYEa9aHUHaa0NBBCA_Jh5jJvPMzQqBwBOT_RKMe1pURCmbBasQOLB1TLJSyI9PunG2KP4yC3JlFCs5ZLWv8GbqNz_OyARz9ukcilcxMTpwRBofDbtEmM/s1600/4.jpg" title="Gambar Slideshow 4" alt="Penjelasan Artikel Pada Gambar 4" /></a></li>

</ul>

<center/></center></center>

Huruf yang berwarna merah dapat anda ganti dengan alamat URL gambar anda
Huruf yang berwarna biru dapat anda ganti sesuai keterangan gambar

8. Klik Save
9. Dan Lihat hasilnya

Artikel Terkait:

Posted in: Tutorial Blog