Home » » Jimat Ruang Entri Menggunakan z-index

Jimat Ruang Entri Menggunakan z-index

EmpayarUtama - Saturday, September 7, 2013 : 10 comments

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 Adriana
Asyraaf Dan Airina
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 Alya
Asyraaf Dan Afrina
Asyraaf Dan Afrina
Asyraaf Dan Alya lagi
Asyraaf Dan Alya lagi
Mengintai...
Mengintai...
Membeli belah...
Membeli belah...
Bersama Aiman yang merajuk
Bersama Aiman yang merajuk
Asyraaf dan Aiman
Asyraaf dan Aiman
Asyraaf dan Azalea
Asyraaf dan Azalea
Asyraaf macam tu jugak
Asyraaf macam tu jugak
Eh cam sama je ngan gambar tadi
Eh cam sama je ngan gambar tadi
Asyraaf dan Mama
Asyraaf dan Mama
Haaa tengok...
Haaa tengok...
Asyraaf dan abah
Asyraaf dan abah. Alamak gelap la pulokkk gambar nih hehe

Jika berminat, cubalah :)




10 Comments

10 comments:

  1. Z index ni macam menarik sbb aku mmg cari pattern posting bergambar mcmni.xmakan banyak ruang dan macam dlm majalah2 kan

    Z index..z index..z ondex.. (dh mcm citer p ramlee plak)

    ReplyDelete
    Replies
    1. Ada yang lebih menarik dari ni Zal. Macam slider 'Blog Kengkawan' kat sidebar tu. Nanti senang-senang aku kongsi tutorialnya ya

      Delete
  2. ada gambar anak-anak, encik dan isteri encik :)

    ReplyDelete
  3. tak lambat ke if nak loading nanti bro..?

    ReplyDelete
    Replies
    1. Kat entri tak lambat, yang lambat tuuu haaa benda-benda kat sidebar :(

      Delete
  4. lama dah dok pelik camana orang buat gambar slide macamni. o... baru tau cenggini rupanya.. hari ni baru jumpa. bulatnya mata baby... comel sgt2. cer cerita kat saya camana nak buat kotak komen macam dalam blog ni. Terima kasih

    ReplyDelete
    Replies
    1. Terima kasih. Itu putera bungsu saya.

      Saya tak buat tutorial cara nak buat kotak komen macam dalam blog ni tapi saya ada kongsikan caranya dalam slide. Cuba buka dan baca cerita 'Replay Eh Bukan, Reply Le...' (saya letak di bawah label informasi, tips)

      Ini linknya: http://empayarutama.blogspot.com/2013/07/replay-eh-bukan-reply-le.html

      Delete

Tulisle apa pun, aku baca ^_~