Berikut adalah cara membuat slide show dengan jQuery:

<script type=”text/javascript” src=”js/jquery-1.3.1.min.js”></script>
<script type=”text/javascript”>

$(document).ready(function() {

//Execute the slideShow
slideShow();

});

function slideShow() {

//Set the opacity of all images to 0
$(‘#gallery a’).css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$(‘#gallery a:first’).css({opacity: 1.0});

//Set the caption background to semi-transparent
$(‘#gallery .caption’).css({opacity: 0.7});

//Resize the width of the caption according to the image width
$(‘#gallery .caption’).css({width: $(‘#gallery a’).find(‘img’).css(‘width’)});

//Get the caption of the first image from REL attribute and display it
$(‘#gallery .content’).html($(‘#gallery a:first’).find(‘img’).attr(‘rel’))
.animate({opacity: 0.7}, 400);

//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval(‘gallery()’,6000);

}

function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($(‘#gallery a.show’)? $(‘#gallery a.show’) : $(‘#gallery a:first’));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass(‘caption’))? $(‘#gallery a:first’) :current.next()) : $(‘#gallery a:first’));

//Get next image caption
var caption = next.find(‘img’).attr(‘rel’);

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass(‘show’)
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass(‘show’);

//Set the opacity to 0 and height to 1px
$(‘#gallery .caption’).animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: ‘1px’}, { queue:true, duration:300 });

//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$(‘#gallery .caption’).animate({opacity: 0.7},100 ).animate({height: ‘100px’},500 );

//Display the content
$(‘#gallery .content’).html(caption);

}

</script>
<style type=”text/css”>
body{
font-family:arial
}

.clear {
clear:both
}

#gallery {
position:relative;
height:360px
}
#gallery a {
float:left;
position:absolute;
}

#gallery a img {
border:none;
}

#gallery a.show {
z-index:500
}

#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}

#gallery .caption .content {
margin:5px
}

#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}

</style>
</head>

Untuk menggunakannya, kita tinggal memasukkan image dalam id=galery

14 Comments on Membuat Slideshow dengan jQuery

  1. kickymaulana says:

    cara memasukan nya gimana mas?

  2. contactwahyu says:

    dicopy dimasukkan di body mas… 🙂

  3. afrioni says:

    makaci ya mas info nya,,,
    bole request g mas?? hehehehe…
    request feed rss postingan dengan jquery.. 🙂

  4. ren says:

    ada contoh penerapannya mas? maksudna yg udah dipasangin jquery begini (maklum ya, aku nubi baru blajar wp)… mohon penjelasan 🙂

  5. panji says:

    bisa lebih detail gak mas caranya maklum masih newbie

    • contactwahyu says:

      itu tinggal diinsertkan saja di body htmlnya dan saat mau ditampilkan tinggal menggunakan tag div dan diberi id image. Tentu saja file2 gambarnya juga harus disiapkan terlebih dahulu

  6. riska says:

    ngisi gambarnya gmn ya…

  7. ekadarmawan says:

    kurang jelas penjelasanya masbro..

  8. Di Implementasikan ke dalam Web bisa gak, SOb..?