Cerita Yang Jarang Jarang Terkini :

Sama Tapi Tak Serupa

EmpayarUtama - Thursday, October 17, 2013 : 8 comments

Aku nak buat ulasan wayang pulak. Mari tengok cerita Melayu. Kat bawah ni ada 4 cerita yang tak kurang popularnya. Ada yang masih bersiaran, ada yang sedang diulang tayang.

Takkan korang tak tengok satu pun dari 4 cerita tu...
Apa persamaan yang boleh kita nampak, dan apa pengajaran dari persamaan tersebut?

Kita disajikan sifat iri hati, cemburu, hasad dengki ibu mertua terhadap menantu. Kita terima susunan ceritanya, bangga dengan pembawaan sikap mertua yang tidak elok hingga kita angkat cerita tu jadi popular.


Ombak Rindu
Ombak Rindu - Meletup juga cerita ni dulu
Tentang Dhia
Tentang Dhia - Drama, sekarang tengah tayang ulangannya
Love You Mr Arrogant
Love You Mr Arrogant - masih bersiaran
Pelita Tanpa Sumbu
Pelita Tanpa Sumbu - Tayangan sempena AidilAdha malam tadi
Ciptaan Terindah
Kemaskini 19.10.2013 - Ciptaan Terindah - Ini bukan mak mertua tapi mak sendiri...
Pastu, bandingkan dengan yang ini. Ini cerita klasik tak patut kalau belum tengok :

Tajuk 'straight to the point' dan di penghujung cerita sang mertua mengaku bersalah.



Haaa itulah ulasan aku :p


Slide Album Dengan Butang Pause

EmpayarUtama - Tuesday, October 15, 2013 : 4 comments

Slide kali ini guna jQuery sedia ada dalam blog. Tapi dengan penambahan fungsi butang 'back', 'pause', 'play' dan 'next'.

Untuk sesuaikan slide jenis ini, aku cuba letak beberapa '.gif' imej. Walaupun masa setiap imej (forward interval) ditetapkan pada 5000; tempoh paparan '.gif' imej mungkin
lebih panjang. Oleh itu penggunaan butang 'pause' amat membantu untuk kita lihat paparan '.gif' imej hingga tamat.

Di bawah adalah contoh slidenya. Ada 8 gambar serta 4 '.gif' imej :

  • Caius vs Lightning
  • Raiden
  • Genesis
  • Power of Cosmos


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

<style>
ul.ppt {position: relative; height: 260px;}
.ppt li {list-style-type: none;position: absolute;top: 0;left: 10px;}
.ppt img {border: 1px solid #e7e7e7;padding: 5px;background-color: #ececec;width: 450px; height: 255px; overflow hidden; }
</style>

<ul class="ppt">
<li><img src="imej pertama" alt=""></img></li>
<li><img src="imej kedua" alt=""></img></li>
<li><img src="imej ketiga" alt=""></img></li>
<li><img src="imej keempat" alt=""></img></li>
<li><img src="imej kelima" alt=""></img></li>
</ul>

<div style="text-align: center;">
<button type="button" id="back">Semula</button>
<button type="button" id="stop">Pause</button>
<button type="button" id="play">Play</button>
<button type="button" id="fwd">Teruskan</button>
</div>

<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
$('#play').hide();

var cur = $('.ppt li:first');
var interval;

$('#fwd').click( function() { goFwd(); showPause(); } );
$('#back').click( function() { goBack(); showPause(); } );
$('#stop').click( function() { stop(); showPlay(); } );
$('#play').click( function() { start(); showPause(); } );

function goFwd() { stop(); forward(); start(); }
function goBack() { stop(); back(); start(); }
function back() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'first' )
cur = $('.ppt li:last');
else
cur = cur.prev();
cur.fadeIn( 1000 );
}
function forward() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
function showPause() {
$('#play').hide();
$('#stop').show();
}
function showPlay() {
$('#stop').hide();
$('#play').show();
}
function start() {
interval = setInterval( "forward()", 5000 );
}
function stop() {
clearInterval( interval );
}
$(function() {
start();
} );
</script>

Keterangan warna :

jQuery warna merah tak perlu jika blog korang dah ada (Mungkin ada dalam template blog; dalam posting sebelum ini; atau di widget kat sidebar). Dapatkan versi terkini lagi bagus.

Kalau rajin - segala yang berwarna biru boleh diejas ikut suka hati janji sedap mata memandang. Sesuaikan ketinggian berwarna oren supaya butang-butang tidak tersorok di belakang slide/imej.

Manakala butang-butang yang ditanda dengan warna hijau boleh ditukar dengan imej lain (lihat contoh). Satu lagi, dalam kod nih ada 5 imej je. Tambah le kalau nak lebih.

Karya pegun di atas aku pinjam dari Peter Callesen manakala imej-imej .gif pula adalah antara koleksi Jlegend83; EruruuTail; dan Cyberbublic yang aku pinjam dari devianART.

Cubalah.