Taman Merdeka

Taman Merdeka dibuka secara rasmi dua tahun lepas. Kalau dari rumah aku, jaraknya lebih kurang je macam nak ke Hutan Bandar. Sesuai sangat untuk beriadah, 'sight-seeing', bersukan, berenang atau saja-saja nak ‘kapling’.

Setakat berjalan kaki keliling 'tasik' tu aja dah semput sebab laluannya berbukit. Kalau nak redah semua;

setengah hari pun belum tentu habis sebab keluasannya lebih 31 ekar. Berbeza tul rasanya jalan kaki kat sini berbanding jalan kaki men golf.

Di sini kita boleh imbau sejarah kemerdekaan negara berdasar sembilan laman khusus yang dibina. Laman-laman ini menggambarkan perkembangan sejarah kemerdekaan negara iaitu Laman Peringatan Kesultanan Melayu Johor (Laman Melayu); Laman Peringatan Sultan Abu Bakar; Laman Peringatan Penjajahan Jepun; Laman Peringatan Penentangan Komunis; Laman Peringatan Kedaulatan Raja-Raja Melayu; Laman Peringatan Semarak Kemerdekaan; Laman Malaysia; Padang Merdeka dan Promenade Perarakan Kemerdekaan.

Meh nengok slide (51 gambar kot) :

Kalau tak salah, Taman Merdeka ni antara salah satu tempat aku pernah cadangkan untuk Gath GBS sebab jaraknya yang dekat dengan Bandar JB (3 km). Ada 2 tempat makan; yang pertama lebih kepada suasana ‘kolonial’:

Manakala yang kedua ni memang meriah tiap malam:

Haaaa, marilah ke Taman Merdeka. Hujung minggu ni cuti 3 hari sempena 1 Malaysia kannnn...

Sebelum lupa; hari ini bermula UPSR. Selamat menghadapi peperiksaan dan semoga berjaya dengan cemerlang buat semua murid-murid darjah enam, termasuklah Putera Nur Aiman :)

Cerita seterusnya »

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 »