Jimat Ruang Entri Menggunakan jQueryCycle Dengan Fungsi Shuffle

Aku tertarik dengan slideshow yang disediakan Busuk.org. Baru-baru ini Busuk-org kemakini laman webnya dan banyak 'features' menarik seperti pilihan kod widget serta auto ping.

Salah satu ialah widget slideshownya. Jadi aku cuba ejas kalau kalau boleh diletakkan slide itu di dalam entri pos. Gambar sebelah takde kena mengena pun dengan cerita ni tau.

Rasanya aku pernah letak slide nih dalam kempen jimatkan air. Selain dari penggunaan marque, slider juga bantu kita jimatkan ruang jika banyak gambar/imej yang nak kita paparkan. Tapi oleh kerana blog ni banyak sangat slide atas bawah kiri kanan; aku kena sentiasa update jQuery script kepada yang terkini.

Mari lihat bagaimana rupa 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/1332412970/empayarutama-jquerycycleplugin.js" type="text/javascript"></script>

<script type='text/javascript'>
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'shuffle'
});
});
</script>

<style>
.slideshow {height:250px; width:300px; margin-left:75px;}
.slideshow img { border: 1px solid #eee; }
</style>

<div text-align="center" class="slideshow">

<div>
<img height="250px" src="imej pertama yang saiznya kalau boleh sama dengan width dan height yang berwarna pink" width="300px" />
Penerangan gambar / imej pertama</div>

<div>
<img height="250px" src="imej kedua yang saiznya kalau boleh sama dengan width dan height yang berwarna pink" width="300px" />
Penerangan gambar / imej kedua</div>

</div>
<div style="clear: both;"></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)

Yang berwarna hijau tu pula jarak imej dari tepi kiri blog. Ejas le cantik-cantik.

Boleh juga jika nak tukar fx: 'shuffle' ini kepada fx: 'fade' atau timeOut: 4000. Nombor pada timeOut adalah kelajuan slide. Lebih besar nombornya, lebih lambat slide bertukar.

Satu lagi, kalau nak guna fx: 'scrollUp' pun boleh tapi penerangan gambar tak keluar. Hanya gambar yang skrol ke atas.

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 bagaimana slide ini berfungsi (Arkkk border tu aku tambah kendian):

Aktiviti Akhir Bersama...

Aku Tak Mampu Menahannya

Kisah Seram UUM - The Untold Story

Koleksi Gambar Gamber Panas

Maafkan Aku Cikgu

Nanti aku kongsi slide yang lain yea :)

Cerita seterusnya »

Jimat Ruang Entri Menggunakan z-index Ala PowerPoint

Satu lagi slide yang agak menarik untuk dikongsi. Semua imej dikumpul macam susun duit (Hahaha yang men daun terup mesti kata cam susun daun terup).

Sebenarnya gambar-gambar tu tegak je, aku yang ejas jadi senget. Kalau semua tegak, boleh juga tapi tak nampakle susunannya.

Nanti aku ajar camana nak sengetkan gambar-gambar tu. Cuma agak tak cantik kalau nak letak 'penerangan gambar' (caption) sebab z-index jenis ini lebih kepada gambar yang boleh shuffle ke atas dan ke bawah mengikut arahan.

Aku pernah guna masa bercerita pasal onscreen keyboard. Kat sini aku letak 11 gambar lama ya:

(halakan anak panah [Mouse] pada imej untuk lihat penerangan gambar)

« Imej Sebelum «

» Imej Seterusnya »

Kalau berminat, salin jelah kod kat bawah ni ya :)

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

<script type='text/javascript'>
$(document).ready(function() {
var z = 0;
var inAnimation = false;
$('#pictures img').each(function() {
z++;
$(this).css('z-index', z); });
function swapFirstLast(isFirst) {
if(inAnimation) return false;
else inAnimation = true;
var processZindex, direction, newZindex, inDeCrease;
if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; }
else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; }
$('#pictures img').each(function() {
if($(this).css('z-index') == processZindex) {
$(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() {
$(this).css('z-index', newZindex)
.animate({ 'top' : '0' }, 'slow', function() {
inAnimation = false; }); });
} else {
$(this).animate({ 'top' : '0' }, 'slow', function() {
$(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
}); } });
return false; }
$('#next a').click(function() { return swapFirstLast(true); });
$('#prev a').click(function() { return swapFirstLast(false); }); });
</script>

<style> #gallery { position: relative; }
#pictures { position: relative; height: 360px; }
#pictures img { position: absolute; top: 0; left: 50px; }
#prev, #next { margin-top: 15px; text-align: center; font-size: 14px; }
.container {margin-left:auto;margin-right:auto;width:400px}
.grid_a,.grid_b,.grid_c,{display:inline;float:left;margin-left:10px;margin-right:10px}
.container .grid_a{width:100px}
.container .grid_b{width:470px}
.container .grid_c{width:470px}
.container .prefix {padding-left:50px}
.container .suffix {padding-right:50px}
.alpha{margin-left:0}
.omega{margin-right:0}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}
.clearfix{display:inline-block}* html
.clearfix{height:1%}
.clearfix{display:block}
</style>

<div style="padding-bottom: 10px; text-align: center;">
(halakan anak panah [Mouse] pada imej untuk lihat penerangan gambar)
</div>
<div class="container" id="wrapper">
</div>
<div class="grid_c" id="content">
</div>
<div class="grid_b prefix suffix" id="gallery">
</div>

<div id="pictures">
<a href="apa-apa link, kosongkan pun tak pe"><img alt="gambar pertama" src="Imej pertama" title="Penerangan gambar pertama" /></a>
<a href="apa-apa link, kosongkan pun tak pe"><img alt="gambar kedua" src="Imej kedua" title="Penerangan gambar kedua" /></a>
<a href="apa-apa link, kosongkan pun tak pe"><img alt="gambar ketiga" src="Imej ketiga" title="Penerangan gambar ketiga" /></a>
<a href="apa-apa link, kosongkan pun tak pe"><img alt="gambar keempat" src="Imej keempat" title="Penerangan gambar keempat" /></a>
<a href="apa-apa link, kosongkan pun tak pe"><img alt="gambar kelima" src="Imej kelima" title="Penerangan gambar kelima" /></a>
</div>

<div style="float: left; padding-left: 80px; padding-right: 50px;">
<span class="grid_a alpha" id="prev"><a href="#previous">&laquo; Imej Sebelum &laquo;</a></span></div>
<div style="text-align: left;">
<span class="grid_a omega" id="next"><a href="#next">&raquo; Imej Seterusnya &raquo;</a></span></div>

<div class="clear"></div>

Sedikit penerangan warna dalam kod tu:

Cam biasa, skrip jQuery warna merah tak perlu jika blog korang dah ada (tak kisah apa version pun, kalau boleh ersi 1.3.2 atau terkini. Mungkin dah ada dalam template blog; dalam posting sebelum ini; atau di widget kat sidebar)

Kalau rasa script warna hijau tu panjang sangat; aku ada ringkaskan. Terpulangle nak guna script aku atau yang sedia ada (sama je). Ini aku punya, gantikan keseluruhan warna hijau tu dengan script nih: <script src="https://empayarutama.googlecode.com/files/z-index.js" type="text/javascript"></script>

Ayat (halakan anak panah [Mouse] pada imej untuk lihat penerangan gambar); Imej Sebelum; Imej Seterusnya; semua korang boleh guna ayat sendiri. Begitu juga dengan segala saiz ukuran tinggi (height); lebar (width); jarak kiri/kanan (padding) - korang ejas sendiri ikut kesesuaian blog.

Dalam kotak atas ada 5 set gambar, di mana set untuk imej kelima aku tandakan dengan warna oren. Jika ada lebih gambar/imej, tambah lagi di bawahnya. Salln dan tempek je kod warna oren tu bergantung kepada berapa banyak imej yang korang nak letak.

Haaa, camana nak buat gambar tu tersusun tak sama?

Nak sengetkan gambar, imej korang mesti berada pada format .png (kan ada format .gif, jpg, .jpeg, .tiff, .bmp) sebab bila disengetkan nanti, warna latar yang terlebih akan jadi 'transparent'. Format lain akan buat warna itu jadi putih.

Dah tu camana nak tukar kepada format .png? Aku guna "Paint" yang biasanya ada tersedia dalam komputer kita nih. Klik kanan 'mouse' dan pilih 'Open with' -> 'Paint'. Pastu dalam 'Paint' nengok atas kiri tekan 'File' -> Pilih 'Save As' dan akan keluar satu 'pop-up' untuk simpan imej. Korang pilihle nak 'Save In' kat mana; beri nama 'File name'; dan bawah dia 'Save as type' haaa pilih 'PNG (*.PNG)'. Sekarang korang dah ada satu imej dalam format .png

Ok, katalah semua gambar berukuran 350px*300px. 'View' sekeping gambar melalui 'Microsoft Office Picture Manager' -> Tekan Butang 'Edit Pictures' -> Tekan 'Rotate And Flip' ada belah kanan tu -> Cari 'By Degree:' ada kotak camni:

Gambar akan lebih senget ke kanan bila nombor lebih besar (12 degree dah senget sangat dan imej akan jadi lebih lebar). Ia akan senget ke kiri bila nombor negatif lebih besar. Ejas le cantik-cantik tiap-tiap gambar tu jangan bagi sengetnya sama.

kalau puas hati, 'save' dan ejas gambar lain pulokkkk.

Dah siap le tu ^_^

Cerita seterusnya »

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 »