Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



AUTOMATIC IMAGE SLIDER DENGAN CSS/JQUERY
February 22, 2011
Posted by: Fauzie




Dalam siri tutorial ini saya ingin membincangkan berhubung dengan widget “image slider” yang dibina dengan hanya menggunakan HTML/CSS dan juga jQuery. Pembinaan image slider dengan menggunakan kaedah ini telah memberi satu cabaran kepada penggunaan “flash” yang mana kaedah ini telah mendominasi pembinaan website sebelum ini.

Sebenarnya image slider yang berasaskan html ini lebih banyak kebaikannya terutama dari segi SEO. Contoh pertama yang ingin saya tunjukkan di sini ialah “automatic image slider” di mana image atau gambar bergerak secara otomatik.





Di bawah ini ialah contoh “Live Demo” menggunakan kaedah ini. Image slider ini sesuai untuk dibuat iklan.


pic1pic2pic3pic4pic5
12345


Untuk membina image slider seperti dia atas, kita mulakan dengan menyediakan“wrapping container” yang diberi nama sebagai“main_view”. Di dalamnya kita akan diletakkan dua section yang diberi nama sebagai: “image_reel” dan “paging".

<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="reel_1.jpg" alt="" /></a>
<a href="#"><img src="reel_2.jpg" alt="" /></a>
<a href="#"><img src="reel_3.jpg" alt="" /></a>
<a href="#"><img src="reel_4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<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>


Image_reel mengandungi image atau gambar yang akan di”slide” dan paging pula mengandungi “paging control”. Langkah seterunya ialah menyediakan kod CSS dan juga jQuery.

Di bawah ini ialah kod sepenuhnya untuk effect ini. Anda boleh copy & paste kod-kod ini dan save dalam Notepad. Sila lihat rujuk tutorial sebelum ini untuk mengetahui bagaimana cara “save file name” dalam Notepad dan upload ke browser. Jika anda copy & paste semua kod ini dengan betul, anda akan mendapatkan image slider seperti dalam contoh ini.

Warna maroon adalah kod CSS, warna biru kod HTML dan kod berwarna hijau pula adalah kod jQuery.


<html>
<head>
<style type="text/css">
.kotakslider {
width: 450px;
padding: 0;
margin-left: 30px;
}
.folio_block {
position: relative;
border:0px solid #ccc;
}

/*--Main Container--*/
.main_view {
float: right;
position: relative;
margin-bottom:50px;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 450px;
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;
}
</style>
</head>
<body>
<div class='kotakslider'>
<div class='folio_block'>
<div class='main_view'>
<div class='window'>
<div class='image_reel'>
<img alt='pic1' height='250' src='http://eu.chv.me/images/chinavasion-CVMB-M76-7.jpg' width='450'/>
<img alt='pic2' height='250' src='http://eu.chv.me/images/odolG5VC.jpg' width='450'/>
<img alt='pic3' height='250' src='http://eu.chv.me/images/awllttvk.jpg' width='450'/>
<img alt='pic4' height='250' src='http://eu.chv.me/images/chinavasion-CVEM-M143-9.jpg' width='450'/>
<img alt='pic5' height='250' src='http://eu.chv.me/images/YTgl41Nx.jpg' width='450'/>
<div class='paging'>
<a href='#' rel='1'>1</a>
<a href='#' rel='2'>2</a>
<a href='#' rel='3'>3</a>
<a href='#' rel='4'>4</a>
<a href='#' rel='5'>5</a>
</div>
</div>
</div>
</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").show();
$(".paging 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 + 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 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 a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //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 a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});
</script>

</body>
</html


Jika anda berminat untuk meletakkan dalam bahagian post blog blogger anda sila pastikan kod-kod berwarna maroon (kod CSS) diletakkan di bahagian atas </head>, kod berwarna biru (kod html) di letak dalam bahagian post (dalam mode Edit Html)dan kod hijau (jQuery)di bahagian atas </body>.

Nota: Kemungkinan besar bila anda masukkan contoh ini didalam blog anda, kedudukan window slider tidak di tempat yang anda inginkan. Anda perlu membuat sedikit adjusment kepada "margin"nya.

.kotakslider {
width: 450px;
padding: 0;
margin-left: 30px;
}


Dalam contoh saya ini kedudukannya dari kiri (margin dari kiri) ialah 30px. Anda juga boleh adjust kedudukan atas atau bawah dengan menambah kod ini margin-top: xxx px;

Kembali kepada | Archives →

Sebarang komen dan pertanyaan, sila klik butang di bawah ini: