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 :)

Cerita seterusnya »

Singa Mengaum Lagi, Kali Ini Di Syawal Yang Mulia

Hehe masih cerita Raya. Ingat lagi cerita Singa masa Raya Cina awal tahun lepas? Aku fikir dah kena tangkap rupanya Idilfitri muncul pulak kat Pontian.

Cenggini. Biasalah lepas salam salam dan bermaaf-maafan antara keluarga diselang seli dengan sikit-sikit drama airmata; tergerak hati sorang mamat

tu nak ajak semua bergambar kat kedai.

Jadi kesemua mereka merangkap sebuah keluarga yang tak berapa besar (lebih doploh orang juga tu) buat pertama kali dengan bergayanya mengabadikan kenangan hari raya tahun ini di sebuah kedai gambar. Siap pilih saiz gambar, gambar latar serta bingai bangkai bingkai.

Dua minggu lepas tu kedai gambar tipon "gambar dah siap, cantik-cantik boleh datang ambik". Gumbiranya rasa hati mamat tu rasa nak melompat-lompat sebab first time nih bergambar kat kedai. Biasanya guna enset je. Diapun ponteng kerja terus je lari ke kedai gambar yang tak jauh - Pontian, 65-70 km je dari JB.

Sampai je tokey kedai dengan tersenyum simpul (yela nak dapat duit belen kannnnn....) tunjuk 3 gambar berbingkai. Katanya "gambar keluarga besar belum siap. Itu saiz you mintak tak ngam. Kena lebih besar dari 17R. Satu lagi, ini you punya keluarga dia punya background you pilih dulu tak berapa cantik. Jadi kita tukar dia punya latar". Aduh, ada satu customer masuk jadi mamat tupun keluar dulu. Tapi dapat rasa dah aura Singa kuat betul dalam kedai. Kenapa ya?

Bila pelanggan dah takde dia masuk balik sambil tanya "Boss; saya datang dari JB semata-mata nak ambik gambar. Awak talipon bagitau gambar dah siapkan? Cantik-cantik lagi. Kenapa tak talipon bagitau satu gambar lagi belum siap? Kenapa tak talipon bagitau awak fikir gambar latar yang kami pilih tak berapa cantik dan cadangkan untuk tukar? Kenapa suka-suka tukar gambar latar yang kami pilih? 4 set gambar ni bukan lima-nam ringgit. Ratus-ratus tu. Kenapa tak talipon bagitau ada masalah?" Walaupun dengan lemah lembut tapi aku dapat rasa aura Singa semakin membara dalam kedai. Aku tunggu juga siapa yang nak mintak maaf, mamat singa tu ke atau tokey kedai.

Dulu 3 sekarang ni tinggal 2 je kedai gambar sepanjang Jalan Taib di Pontian nih. Agak-agak yang mana satu?

Dengan selamba tokey jawab "tak apa. Kalau you nak latar yang you pilih dulu; kita tukar tapi kena tunggu lagi. Saya sendiri akan turun JB talipon you dan hantar sekali dengan gambar keluarga besar. Dalam gambar sangat ramai tak boleh framekan saiz 17R" "Boss, kenapa you layan you punya customer macam ni? Ramai customer kena tipu macam ini ke? Tak apalah saya bayar baki duit" sambil singa tu hulur not limapuluh 4 keping. Kiranya dia dapat 2 gambar sajalah haritu.

Jawapan mudah lagi "itu hari orang ramai sangat jadi kita tak perasan apa you order ada yang tak ngam saiz sama itu gambar latar tak berapa cantik. Nanti kita hantar bagi you kalau sudah siap. Ok ya" Hek elehhhhh camtu je? Dia pun cam laju je tergesa-gesa masuk studio gambar. Aku yang ada kat situpun rasa nak betukar jadi otromen.

Dah nampak dah singa menunggu masa nak terkam dan menyiat-nyiat tengkuk mangsa. Mulalah mengaum dan mengejutkan satu pelanggan yang baru masuk. "Tokey, awak bukan baru 2-3 hari berniaga. Kalau lebih 20 orang dalam satu gambar awak patut tahu tak boleh buat 17R dan wwak boleh beritahu kita awal-awal. Kenapa nak sorok? Semalam awak talipon pun tak bagitau masalah ini. Awak cuma kata gambar dah siap dan boleh datang ambil. Apa ni? Tengok - saya bayar dua ratus baki untuk 3 gambar; belen dua puluh ringgitpun tak pulang balik. Jumlahnya seratus lapan puluh saja kan? Esok dah taknak berniaga ke?" Dah takde rasa malu singa tu terus saja mengaum dengan bingit. Deruan angin dari pantai Pontian mengerbangkan lagi rambut di tengkuknya yang sedia panjang. Ngeri betul aku tengok. Terserlah kejantanannya. Macho pun ada jugak sikit-sikit hahahahahahahahahaha hampagas tul.

Dan siang tadi orang yang sama (tokey tulah, siapa lagi) talipon lagi bagitau 2 gambar tu dah siap dan boleh datang ambik (janji nak hantar, hampehhhh) - kena gi Pontian semulalah esok. Terbakar betullllllll........

Cerita seterusnya »

Jika Kamu Masih Di Sini, Maafkan Aku Ya

'Cikgu' satu-satunya gelaran istimewa yang dibawa walaupun empunya diri sudah tiada; terlebih istimewanya berbanding 'doktor' hingga encik pulis juga dipanggil 'cikgu'.

Khas buat semua insan bergelar guru / cikgu, aku mulakan dengan ucapan Selamat Hari Guru Raya Idilfitri Maaf Zahir & Batin (bulan raya daaa...)

Sekali lagi mintak maaf kalau cerita ni meragut kemeriahan Idilfitri barangkali. Seingat aku, setiap kali bercerita pasal cikgu atau sekolah, aku akan beri sokongan atas apa juga aktiviti atau tindakan mereka. Tetapi persepsi kian berbeza bila kebelakangan ini aku mula buat perbandingan zaman.

Aku tak pasti sama ada masa yang berubah atau sejujurnya lah - apakah tugas mendidik benar-benar jadi tanggungjawab (amanah) atau sama saja seperti bidang lain (kerana gaji...?) Atau dalam ayat lain; adakah tanggungjawab mendidik lebih utama berbanding sara hidup... atau tiada keseimbangan antara kedua-duanya?

Zaman aku dulu; kami takut betul ponteng sekolah. Bila guru buat kelas tambahan di rumah (dulu tak buat di sekolah) dan salah seorang anak murid tidak hadir (aku le tu) - guru sendiri datang berjumpa ibu bapa. Bila bersukan (di sekolah lain), guru sanggup berpakat kongsi 3-4 kereta ambil pelajar untuk bersama-sama ke acara sukan. Jika menang, mereka belanja makan sebelum hantar kami pulang.

Bila ada apa-apa acara di sekolah, satu senpun tidak diminta dari ibubapa kami (mungkin masa itu sekolah dah cukup duit atau para guru bijak ambil inisiatif untuk dapatkan sumber kewangan). Yang penting, sewaktu acara apa pun di sekolah - tiada gerai jualan. Hanya ibu bapa berkumpul di sana sini untuk lebih mengenali satu sama lain; eratkan silaturrahim bersama para guru yang juga turut serta.

Waktu persekolahan - rotan sebesar jari kelingking memang jadi belasahan kami. Ibu bapa serah bulat-bulat kepada guru dan ayat lazim yang rajin kedengaran "asal jangan sampai cacat sudahlah". Begitu sekali hormat ibu bapa kepada para guru zaman dulu hingga tidak perlu apa-apa 'akta'. Corak disiplin yang ketat hinggakan berbual atau berbaris tidak lurus juga boleh dapat penampar percuma cikgu... Hehe indahnya kenangan zaman sekolah masa itu.

Cerita di sekolah menengah yang memang aku ingat sampai bila-bila - kami diberi tugasan 3 sekumpulan untuk bentang tajuk dan buat presentation (Bahasa Malaysia) dan tiba giliran kumpulan aku; kami bertiga hilang dari kelas menyorok dalam perpustakaan. Kami tahu cikgu akan buat laporan mengajar dalam buku log harian. Dah jenis 'terjal', malam itu kami pecah masuk bilik guru untuk tuang air dalam buku tersebut. Sebelum buat kerja tak berfaedah tu, kami baca dulu apa yang ditulis. Malu sungguh bila catatan laporan tidak seperti dijangka. Cikgu menulis persembahan kami bagus; menepati tajuk diberi; dibuat melebihi masa ditetapkan dan markah keseluruhan kumpulan adalah A. Memang sebak bila baca segala perinciannya. Sama ada 'ego remaja' atau 'terjal melampau', mungkin juga kerana malu yang teramat; hinggalah cerita ini aku kongsikan dalam belog hari ini kami tidak mengadap beliaupun untuk minta maaf. Aku respek semua cikgu kerana kekalkan prinsip guru adalah guru dan anak murid tetap anak murid. Maafkan aku cikgu kerana tidak sempat minta maaf...

Cikgu Jaja, sebenarnya aku takut nak berkongsi cerita ni.
Ada yang tak suka...

Zaman sekarang - apa majlispun jika dianjurkan di sekolah, akan dimaklumkan secara bertulis dengan kepala rasmi sekolah. Tak cukup dengan itu, ada slip derma di bahagian bawah yang mesti dipulangkan bersama 'derma ikhlas'... Dan guru terlebih mendekati anak murid hingga boleh jadi rakan se'fesbuk' kalau tidakpun jadi rakan se'wechat'.

Er, aku tak nak teruskan. Takat ini ajalah...

Cerita seterusnya »