Slide Album Dengan Butang Pause

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 :

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

<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.

Cerita seterusnya »

Jimat Ruang Entri Menggunakan jQuery

Slideshow kali ini menarik juga sebab penerangan gambar berada di hadapan imej. Kita tetapkan saiz latar serta keluasan gambar dan slidenya juga ikut ketetapan masa. Maksudnya hanya guna 'timeOut'; tak leh guna 'fade', 'shuffle', 'scrollup' atau pebenda jelah.

Sebelum ni aku dah kongsi 3 jenis slider yang boleh dipapar dalam entri pos :
1. Slider Album Menerusi Picasa Sori Picasa dah tutup kedai...
2. Slider Album Menerusi jQuery Easing Dan Banner Rotator
3. Slider Album Menggunakan z-index dengan dua contoh :
` a) Penerangan gambar di bawah setiap gambar; dan
` b) Kosong tanpa penerangan gambar

Haaa meh kita cuba yang ini pula. Cubalah korang letak kod yang dalam kotak bawah ni dalam entri korang. Ini kodnya:

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

<script src="http://yourjavascript.com/91650813832/empayarutamas3slider.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#haha').s3Slider({
timeOut: 5000
});
});
</script>

<style>
#haha-slider { width: 480px; height: 355px; position: relative; overflow: hidden; float: left; margin: 5px auto; margin-bottom: 20px; border: 0px solid #ddd; }
#haha-sliderContent { width: 430px; height: 350px; margin-top: -15px; position: absolute; float: left; margin-left: 5px; overflow: hidden; border: 0px solid #ddd; }
#haha-slider h3 a { color: #cc0000; text-transform: normal; font-size: 15px; } /*yang ini kalau nak letak link. Kalau tak nak biarkan saja baris ini*/
.haha-sliderImage { float: left; position: relative; display: none; width: 425px; height: 350px; border: 0px solid #ddd;}
.haha-sliderImage span { position: absolute; width: 410px; padding: 5px 10px 10px 5px; background-color: #595959; opacity:.8; filter:alpha(opacity=80); -moz-opacity:.8; -khtml-opacity:.8; color: #fff; text-transform: normal; display: none; }
.haha-sliderImage span:hover { background-color: #bbb; opacity:.8; filter:alpha(opacity=80); -moz-opacity:.8; -khtml-opacity:.8; color: #555;}
.top { top: 0; left: 0; }
.bottom { bottom: 0; left: 0; }
/* jika letak top: 0; -> kotak penerangan gambar akan keluar di bahagian atas
jika ditukar kepada bottom: 0; -> kotak penerangan gambar akan keluar di bahagian bawah
oleh itu kita letak kedua-duanya di sini dan tentukan kedudukannya dengan menambah top atau bottom pada kandungan imej */
.top p, .bottom p { text-transform: normal; font-size: 12px; }
.clear { clear: both; }
</style>

<div id="haha-slider">
<ul id="haha-sliderContent">
<li class="haha-sliderImage">
<img src="imej pertama - setting dalam style adalah 425*350 jadi biarlah sama atau lebih besar" />
<span class="top atau bottom">
<h3>
<a href="link - biasanya orang bisnes suka link nih" target="_blank">Tajuk Imej Pertama</a></h3>
'Caption' atau Penerangan untuk imej pertama</span>
</li>
<li class="haha-sliderImage">
<img src="imej kedua - setting dalam style adalah 425*350 jadi biarlah sama atau lebih besar" />
<span class="top atau bottom">
<h3>
<a href="link - biasanya orang bisnes suka link nih" target="_blank">Tajuk Imej Kedua</a></h3>
'Caption' atau Penerangan untuk imej kedua</span>
</li>
<div class="clear haha-sliderImage">
</div>
</ul>
</div>

Skrip jQuery warna merah tak perlu jika blog korang dah ada (tak kisah apa version pun. Mungkin dah ada dalam template blog; dalam posting sebelum ini; atau di widget kat sidebar)

Kalau rajin - timeOut, warna dan saiz tulisan, saiz-saiz lain boleh diejas ikut suka. Baca juga keterangan yang berwarna merah yea.

Lihat pilihan ber warna biru. Pilihle sama ada nak letak top atau bottom.

Dalam kotak atas cuma ada 2 set imej, salah satunya aku tandakan dengan warna oren. Jika ada lebih gambar/imej, tambah sendiri ya. Salln je kod warna oren tu di bawahnya bergantung kepada berapa banyak imej yang korang nak letak.

Contoh 'Caption' atau Penerangan muncul dari bawah (7 gambar dengan timeOut 5000; sori aaaa aku guna stok gambar lama) :

• 
  
  
  

  Adriana 1

  Adriana 1
  
• 
  
  
  

  Adriana_2

  Adriana 2
  
• 
  
  
  

  Adriana_3

  Adriana 3
  
• 
  
  
  

  Adriana_4

  Adriana 4
  
• 
  
  
  

  Adriana_5

  Adriana 5
  
• 
  
  
  

  Adriana_6

  Adriana 6
  
• 
  
  
  

  Adriana_7

  Adriana 7
  

Contoh 'Caption' atau Penerangan muncul dari atas (11 gambar, timeOut aku tukar dari 5000 kepada 4000) :

• 
  
  
  

  Ekspresi - Adriana

  2 tahun setengah yang lalu
  
• 
  
  
  

  Ekspresi 1 - Asyraaf

  Ekspresi 1 - Asyraaf
  
• 
  
  
  

  Ekspresi 2 - Asyraaf

  Ekspresi 2 - Asyraaf
  
• 
  
  
  

  Ekspresi 3 - Asyraaf

  Ekspresi 3 - Asyraaf
  
• 
  
  
  

  Ekspresi 4 - Asyraaf

  Ekspresi 4 - Asyraaf
  
• 
  
  
  

  Ekspresi 5 - Asyraaf

  Ekspresi 5 - Asyraaf
  
• 
  
  
  

  Ekspresi 6 - Asyraaf

  Ekspresi 6 - Asyraaf
  
• 
  
  
  

  Ekspresi 7 - Asyraaf

  Ekspresi 7 - Asyraaf
  
• 
  
  
  

  Ekspresi 8 - Asyraaf

  Ekspresi 8 - Asyraaf
  
• 
  
  
  

  Ekspresi 9 - Asyraaf

  Ekspresi 9 - Asyraaf
  
• 
  
  
  

  Ekspresi 10 - Asyraaf

  Ekspresi 10 - Asyraaf
  

Contoh 'Caption' atau Penerangan muncul dari atas dan bawah ikut pilihan (13 gambar - timeOut aku tukar dari 5000 kepada 5500) :

• 
  
  
  

  Ekspresi A

  Ekspresi A
  
• 
  
  
  

  Ekspresi B

  Ekspresi B - 1 Malaysia?
  
• 
  
  
  

  Ekspresi C

  Ekspresi C
  
• 
  
  
  

  Ekspresi D

  Ekspresi D
  
• 
  
  
  

  Ekspresi E

  Ekspresi E - Adriana masih hisap jari...
  
• 
  
  
  

  Ekspresi F

  Ekspresi F
  
• 
  
  
  

  Ekspresi G

  Ekspresi G
  
• 
  
  
  

  Ekspresi H

  Ekspresi H
  
• 
  
  
  

  Ekspresi I

  Ekspresi I
  
• 
  
  
  

  Ekspresi J

  Ekspresi J
  
• 
  
  
  

  Ekspresi K

  Ekspresi K
  
• 
  
  
  

  Ekspresi L

  Ekspresi L
  
• 
  
  
  

  Ekspresi M

  Ekspresi M
  

Cubalah, aku try tiga-tiga kat sini ok je ^_~

Cerita seterusnya »

Percuma Selagi Boleh. Memang Boleh

Sebelum ini aku bincang tentang penglibatan penaja dalam SEGMEN; kali ini meh lihat bagaimana penggunaan atau manipulasi 'sponsor' di alam maya dalam bentuk lain.

Sambil-sambil tu kita tengok ada tak situasi menang-menang antara kedua belah pihak.

Sponsor jadi tajuk iklan
Ia bukan sponsor kerana yang dipapar adalah iklan dari pengendali iklan seperti Komli, Advertlets, Nuffnang, Innity, Adsense, Bidvertiser (antaranya). Kita perlu daftar dan penuhi syarat mereka sebelum iklan berjaya diterbitkan. Pengiklan dapat imbuhan dari iklan yang dipapar dalam belog sebagai imbuhan. Biasanya mereka tidak galakkan tajuk seperti 'tolong klik iklan' dan cadangkan tajuk-tajuk seperti 'iklan', 'Ads', 'Advertisements' atau 'Sponsored Ads'.

Ini sama je dengan program affiliate lain di mana pengiklan perlu daftar dahulu untuk dapatkan link affiliate baru boleh pasang iklan.

Sponsor downliners
Ini frasa standard dalam laman MLM. Aku tak berapa faham kenapa diletak 'menaja /sponsor orang bawah'. Nak bagi cantik ayat je kot. Sebab bukan taja pun, orang bawahan tu kena bayar baru boleh masuk senarai. Bayangkan kalau ada satu program terhebat sampai satu dunia nak join; berdasar kelayakan habis dah satu dunia dah masuk. Dalam piramid tu barisan terbawah sekali mana nak gagau downliner lain?

Sponsor taja website/blog
Kebiasaannya tuanpunya web/blog pilih untuk tidak paparkan penaja tetapi aktiviti blog menjurus kepada operasi tertentu. Contohnya blog abang Gilamodified yang dapat tajaan KBS untuk kemudahan 'roadshow', peralatan, serta ayarikat automotif sebagai penaja hadiah.

Contoh lain (contoh je tauuuu) - penulis maya/cybertroopers politik di mana mereka dibayar untuk menulis (kebanyakan mereka menafikan) dan kita boleh lihat melalui logo tertentu yang sama dalam beberapa blog politik.

Di bawah ini hasil laporan Ketua Audit Negara 2012 (Segar dari ladang hahahahahah):

Iktiraf blog popular sebagai sponsor tak langsung
Ini pun jadi 'trend' dah ni. Selalunya selitkan dalam 'bloglist' sama ada jadi sumber inspirasi tuan belog; nak dapat backfire backlink, tumpang populariti atau tak yakin pada diri/belog sendiri - itu aku tak pasti. Sendiri jawab dalam hati.

Penafian penglibatan sponsor dalam entri
Ini untuk elakkan prejudis di kalangan pesaing (competitors) antara pengeluar produk yang sama. Selalunya entri berbau politik akan diambil kesempatan oleh pihak satu lagi untuk kondem kembali apa yang ditulis. Aku ada juga buat penafian sebegini waktu kempen anti merokok yang kebetulan sampel berjenama satu syarikat penyiaran di mana aku cuba elakkan 'bias'. Satu lagi sewaktu berlangsungnya Sesi Bercakap Dengan Jin setelah tulis perbandingan variable rate di mana tak semua pengeluar kereta dan bank tawarkan skim ini berbanding fixed rate.

Ada juga penulis cari jalan selamat dengan letak bermacam-macam penafian (takut kena saman kot) sebab ayat-ayat cinta dalam artikel pedas-pedas belaka. Di sini tak ada 'win-win situation' kerana penafian (disclaimer) hanya perkongsian cerita untuk rujukan, ilmiah, propaganda, atau bacaan ringan

Sponsor percuma dari program sedia ada
Ini merujuk kepada platform yang kita pilih untuk berblog. Banyak program percuma seperti Blogger, Wordpress, Tumblr; atau melalui pengendali program lain yang juga ada sediakan blog untuk ahli secara percuma. Di sebalik kita bebas untuk menulis; timbal baliknya kita kenalah biarkan nama platform program tersebut di belakang web/blog kita.

Dah habis sebab yang lain aku tak tau

Cerita seterusnya »