Home » » Membuat Image Slider Sederhana dengan Jquery

Membuat Image Slider Sederhana dengan Jquery

Redi Apri Handoko | 06.52 | 0 comments
Kali ini kita akan membuat Image Slider (Slider Gambar) Sederhana ala Jquery dengan Judul dan Caption yang transparan. Jquery marupakan plugin yang menarik dan tidak membuat blog anda menjadi berat. Slider ini sangat mudah untuk diinstal karena hanya membutuhkan 4 langkah sederhana: Menambahkan Kode CSS, menambahkan jquery plugin, manambahkan java script, dan terakhir menambahkan widget slider. Demo Image Slider dapat dilihat DISINI. Jika anda udah gak sabar untuk membuatnya mari kita simak caranya berikut ini:

1. Klik Dashboard >> Design >> Edit HTML
2. Cari kode berikut ini ]]></b:skin> , kopi kode dibawah ini sebelum kode ]]></b:skin>

#gallery {
position:relative;
height:320px; /* Set Height */
width:540px; /* Set Width */
overflow:hidden;
}
#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;
}

3. Tambahkan kode dibawah ini sebelum kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>

4. Tambahkan lagi kode dibawah ini sebelum kode </head>
<script type="text/javascript">
//<!--
$(document).ready(function() {
slideShow();
});
function slideShow() {
var dur= 5000;
$('#gallery a').css({opacity: 0.0});
$('#gallery a:first').css({opacity: 1.0});
$('#gallery .caption').css({opacity: 0.7});
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
setInterval('gallery()', dur);
}
function gallery() {
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
var caption = next.find('img').attr('rel');
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
$('#gallery .content').html(caption);
}
//-->
</script>

5. Simpan template anda.
6. Pilih Design -- Page Element, lalu tambahkan "HTML JavaScript", letakan kode dibawah ini:
<div id="gallery">

<!-- Image Slide 1 and must have a class='show' -->
<a href="Link url" class="show">
<img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
</a>

<!-- Image Slide 2 -->
<a href="Link Url" >
<img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
</a>

<!-- You can add more n more images as link above -->

<div class="caption"><div class="content"></div></div>
<div style='clear:both;'/>
</div>

Keterangan:
"Link Url" ganti dengan link url yang anda inginkan
"Image url" ini url gambar dan gantikan tinggi dan panjang gambar sesuai keinginan anda
"This is Title" ganti ini dengan judul
"This is Description" ganti ini dengan deskripsi judul

7. Simpan widget anda.

Selamat mencoba!
Berbagi Dengan Teman:

Posted by : Redi A.H ~ / Tutorial windows, SEO , Info gadget, Download game

Artikel Membuat Image Slider Sederhana dengan Jquery Di posting oleh Redi A.H pada 18 Mar 2012. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kontak atau komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging!!!

0 comments:

Posting Komentar

Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.

 
Site Meter :
Copyright © 2011. Tutorial Windows 7 - All Rights Reserved
Proudly powered by Blogger
Thank You For Google