Membuat Slide Show / Slider Foto dengan jQuery di Blog
23.03
By
Banximran
Slide Show atau yang biasa disebut slider adalah sebuah widet yang akan
menampilkan gallery foto berderet secara slide (meluncur). Dengan widget
ini kita dapat menampilkan beberapa foto guna mempercantik dan menghias
penampilan blog kita, akan lebih menarik lagi jika kita memasang gambar
pemandangan-pemandangan yang indah. Fitur ini berjalan secara manual,
jadi anda harus memasang foto dan URL tujuanya sendiri, berbeda dengan
widget slider artikel otomatis yang akan update slide otomatis setiap
ada artikel yang baru dipublikasikan.Mengenai masalah tampilan juga widget ini tak usah diragukan lagi kebagusanya, karena widget ini telah dilengkapi dengan fitur jQuery smooth yang akan membuat pergantian slide terlihat lebih "lembut", dan yang menarik dari widget ini adalah page numbernya yang simple dan elegan, berwarna merah dan muncul layaknya karpet merah dari balik kanan gambar, jadi widget ini akan terlihat minimalis sekali.
Jika kita perhatikan dengan seksama pada situs-situs portal berita seperti kompas.com, maka tentu kita akan menemukan slide show atau slider artikel pada homepage, namun seperti yang saya jelaskan diatas tadi bahwasanya widget ini berbeda fungsinya dengan yang ada pada kompas tersebut, karena widget ini biasanya hanya digunakan untuk menampilkan foto-foto gallery secara slide show dan tidak digunakan untuk menampilkan update artikel, namun semua keputusan tersebut ada di tangan anda, jika anda ingin menjadikanya untuk slider update artikel juga tidak ada salahnya, lihat saja situs kucoba.com, website yang dikelola kang salman tersebut juga memakai slide show yang untuk menampilkan update artikel.
Cara Membuat Slide Show / Slider Foto dengan jQuery
1. Login ke Blogger.
2. Pilih Tata Letak.
3. Klik Add Gadget.
4. Pilih HTML/JavaScript.
5. Letakkan kode dibawah ini kedalamnya.
<style type="text/css">
.container1 {
width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfh-UqkUYtPUkjvXxchoIrdm6OdFsixtA-bU8FP5zEHAGi3q0VPeuo-571i59eC7QpIsZCLUoo_cUJgyBQFqtWOKlft29ctwro1qvX66RtRjwYpGrlm0v9wBlFmWYJ-9ZXQeD_mwwF3IQ/s1600/paging_btrix_bg2.png) no-repeat;
display: none;
}
.paging_btrix a {
padding: 5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
font-weight: bold; background: #920000; border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>
<!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->
<div class="container1">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="URL Tujuan Gambar"><img src="URL Gambar"/></a>
<a href="URL Tujuan Gambar"><img src="URL Gambar"/></a>
<a href="URL Tujuan Gambar"><img src="URL Gambar" /></a>
<a href="URL Tujuan Gambar"><img src="URL Gambar" /></a>
</div>
</div>
<div class="paging_btrix">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging_btrix").show();
$(".paging_btrix a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//paging_btrix + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging_btrix a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging_btrix a.active').next();
if ( $active.length === 0) { //If paging_btrix reaches the end...
$active = $('.paging_btrix a:first'); //go back to first
}
rotate(); //Trigger the paging_btrix and slider function
}, 5000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging_btrix a").click(function() {
$active = $(this); //Activate the clicked paging_btrix
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>
Keterangan:
- 660 = Lebar Slide Show / Slider Foto
- 240 = Tinggi Slide Show / Slider Foto
6. Klik "Save/Simpan", dan selesai.
Bagaimana? mudah bukan membuat slide show agar blog terlihat makin cantik, dan untuk live demo-nya anda bisa lihat disini.
Demikian informasi terbaru tentang cara membuat slide show / slider
foto dengan jquery di blog, baca juga artikel menarik lainya seputar
tutorial blog tentang cara membuat menu navigasi navbar dengan efek rollover, semoga bermanfaat, dan selamat mencoba
Pesan Banx Imran
Kepada Pengunjung, Setelah membaca Artikel Ini Harap Memberi Komentar N Masukan Ya....
0 komentar:
Posting Komentar