Jimat Ruang Entri Menggunakan z-index

Selamat berhujung minggu. Raya dah habis tapi 'open house' belum. Santai-santai ni meh tengok satu lagi slide kali ni guna z-index.

Slide menggunakan z-index jenis 'active' nampak lebih lembut. Ia mudahkan kita papar gambar beserta penerangan. Di sini imej pertama akan jadi paparan pertama kerana kita telah

tetapkan imej tersebut sebagai paparan pertama.

Mungkin ada antara penerangan gambar yang agak panjang (hingga 4 atau 5 baris); jadi sebaiknya saiz ketinggian slideshow biarlah lebih besar (Untuk contoh di bawah aku letak 'height:455px' untuk ruang slide berbanding imej sebenar yang berketinggian hanya 346px )

Mari tengok camana kodnya:

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

<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
}); }
$(function() {setInterval( "slideSwitch()", 5000 );
});
</script>

<style type="text/css">
#slideshow { position:relative; height:455px; width:464px; margin-left: 10px;}
#slideshow DIV {position:absolute; top:0;left:0; z-index:8;opacity:0.0;height: 455px; background-color: #FFF;}
#slideshow DIV.active { z-index:10; opacity:1.0;}
#slideshow DIV.last-active { z-index:9;}
#slideshow DIV IMG { height: 346px; display: block; border:1px solid #ddd; padding: 2px 2px 2px 2px; }
<style>

<div id="slideshow">
<div class="active">
<a href="link atau biar kosong pun takpe"><img alt=" " src="imej yang sama atau lebih besar dan lebar dari saiz dalam ‘style’ " /></a>
Penerangan gambar pertama</div>
<div>
<a href="link atau biar kosong pun takpe"><img alt=" " src="imej yang sama atau lebih besar dan lebar dari saiz dalam ‘style’ " /></a>
Penerangan gambar kedua</div>
<div>
<a href="link atau biar kosong pun takpe"><img alt=" " src="imej yang sama atau lebih besar dan lebar dari saiz dalam ‘style’ " /></a>
Penerangan gambar ketiga</div>
</div>

Cam biasa, skrip jQuery warna merah tak perlu jika blog korang dah ada (tak kisah apa version pun, kalau boleh versi terkini. Mungkin sudah sedia ada dalam template blog; dalam posting sebelum ini; atau di widget kat sidebar)

Kod kat atas cuma ada 3 set gambar, di mana set untuk imej ketiga aku tandakan dengan warna oren. Jika ada lebih gambar/imej, tambah saja di bawahnya. Salln dan tempek je kod warna oren tu bergantung kepada berapa banyak imej yang korang nak letak.

Sebelum ni aku kongsi 2 jenis slider album yang boleh dipapar dalam entri pos bertujuan jimat ruang entri untuk mereka yang suka dengan gambar-gambar yang banyak. Sebagai perbandingan boleh lihat kembali tutorial-tutorial tu di sini:

1. Slider Album Menerusi Picasa Sori Picasa dah tutup kedai...
2. Slider Album Menerusi JjQuery Easing Dan Banner Rotator

Ini slidenya, aku letak 15 gambar. Nampak cam lebih ok berbanding picasa:

Asyraaf Dan Adriana

Asyraaf Dan Airina (Saja bagi panjang ayat nih takut tak menjadi pulak slide aku nanti. Malu jek buat tutorial bila sendiri punya tak jadi. Kalau ayat-ayat cinta ayat ni tak nampak lepas keluar gambar lain, kira jadilah)

Asyraaf Dan Alya

Asyraaf Dan Afrina

Asyraaf Dan Alya lagi

Mengintai...

Membeli belah...

Bersama Aiman yang merajuk

Asyraaf dan Aiman

Asyraaf dan Azalea

Asyraaf macam tu jugak

Eh cam sama je ngan gambar tadi

Asyraaf dan Mama

Haaa tengok...

Asyraaf dan abah. Alamak gelap la pulokkk gambar nih hehe

Jika berminat, cubalah :)