CSS Arcvive

Tampilkan postingan dengan label jQuery JavaScript Library. Tampilkan semua postingan
Tampilkan postingan dengan label jQuery JavaScript Library. Tampilkan semua postingan

Kamis, 17 Januari 2013

Background SlideShow with [ Facebook Album ]

Diposting oleh di 15.00 · 0 komentar
Fb-Aing.blogspot.com ( Fb Aing bLogspot )



It's a small wonder that many jQuery plugins were developed with the intention of easily introducing pretty slideshows to display and rotate series of images. However, almost none of these slideshow plugins utilize the idea of rotating CSS backgrounds. :)




Waiting for page to finish loading..



Sample htm file: SlideShow.htm
JS file: AlbumSlideShow.js
CSS: CSSslideshow.txt

How to load:

<style type="text/css">
#block-all{
 display:none;
 position:fixed;
 width:100%;
 height:100%;
 top:0;
 left:0;
}
/*
see full css on file..
*/
</style>

<script type="text/javascript">
//daftar id album modeidFbAlbum manual split by coma

var idFbAlbum='270532219718335,274027116045434'; 

var idYgPunyaAlbum='AingCreations.Page'; 
//kalo manual yang di pake idFbAlbum
var modeidFbAlbum='auto'; //load auto semua album dari idYgPunyaAlbum

var toketYgPunyaAlbum=''; //perlu kalo album pribadi bukan page

//kalo idYgPunyaAlbum=='' sama idFbAlbum=='' yang dipake dftrSledSow

var dftrSledSow=[
"http://misal.nya/gambar.jpg",
"http://misal.nya/gambar.jpg" //masukan daftar URL gambar secara manual
]; 

var jedaSledSow=30000;
var urutanSledSow='random';
var defaultSizeGambarSlideShow='auto';
var repeatGambarSlideShow='repeat';
var posisiGambarSlideShow='center center';
var tampilinStatusLodingSledSow='hooh';

$.ajax({url:'http://template-aing.googlecode.com/files/AlbumSlideShow.js',dataType:'script',cache:true});
</script>

I am always receptive to any thoughts/suggestions you might have, so have words with me in the comments.

Label:

jQuery: Write Less, Do More (SLideToggLe)

Diposting oleh di 02.27 · 0 komentar




jQuery itu JavaScript Library cara cepat dan singkat yang menjadikan alur document HTML menjadi lebih sederhana, penanganan event, membuat animasi, dan interaksi Ajax untuk pengembangan web yang cepat. jQuery didesain buat ngerubah cara lo nulis Javascript.


Pastinya jQuery ini gak bakalan jalan kalo kita belom nge-load Library-nya. Kalo gak mau atau males hosting Library sendiri, kita bisa pake punya orang :D, misal punya google kaya dibawah ini.

<script src='"http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>





Sample 1

Click --> slideToggle('slow')


Sample 2

Click --> show('slow')








www.google.co.id/search?q=belajar+jQuery
Label:

jQuery: Facebook Visitor Notification

Diposting oleh di 02.13 · 0 komentar


How it works

Visitor Notification ini memanfaatkan wall facebook page untuk menyimpan data pengunjung dan menggunakan facebook graph API untuk membaca data dari wall page.

Data pengunjung yang disimpan disini atara lain:
✩ Facebook ID pengunjung
✩ URL halaman yang dikunjungi
✩ Judul halaman yang dikunjungi
✩ Jenis browser yang digunakan pengunjung

Untuk Facebook ID pengunjung kita dapet dari Facebook Connect tentunya, jadi kalo kita gak pasang facebook connect di blog, percuma jadinya, karena kita gak tau siapa sipengunjung ini.



Cara Pasang

Pastiin Library jQuery sama Plugin jQuery Ui berikut udah ada dibagian <head>.
Kalo belom ada, silahkan pasang tepat diatas tag </head> dari template blog.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

Terus bikin Widget HTML/Javascript baru dibagian paling bawah Layout Blog dan isi kira-kira kaya gini:


Yang diatas itu baru CSS pendukungnya aja,,


Sekarang tinggal nambahin baris berikut setelah CSS yang di atas tadi

<script type="text/javascript">
  $.ajax({url:'http://aing-creations-template.googlecode.com/files/notipAing.js',dataType:'script',cache:true,success:function(){
    blognotip.bikinNotip();
  }});
</script>

Save Widget HTML/Javascript yang lo bikin barusan dan lihat hasilnya.



Kalo pengunjung di blog elo gak kecatet dinotif ini, berarti blog elo belom ada connect facebooknya atau gak ada variable idUserYgLogin nya. Silahkan baca-baca di How to Connect Facebook with Blog.



Menggunakan Wall Facebook Page sendiri

Biar Notif visitor kita gak campur-campur sama visitor blog orang, silahkan bikin 2 facebook page sendiri dan ambil access tokennya. Kita pake 2 page karena yang satu buat nyimpen data visitor, yang satu lagi buat nyimpen data event seperti menekan tombol like atau berkomentar pada facebook plugin.

Tinggal ganti aja script nya jadi kaya gini..

<script type="text/javascript">
  $.ajax({url:'http://aing-creations-template.googlecode.com/files/notipAing.js',dataType:'script',cache:true,success:function(){
    window.visrecGue='26613742xxxxxxx|AAACqnvXzYOcxxxxxx';
    window.evrecGue='104181253xxxxxxx|AAACqnvXzYOcBxxxxxx';
    blognotip.bikinNotip();
  }});
</script>

Cara dapetin Access token Facebook Page:

Gunakan ID Aplikasi yang bisa memberikan Offline access permission agar access token tidak expire. Misalnya Nokia (49340319393) atau Experia (104018109673165).

Application ID:
Check this App Update status Insert token Get Token

Atau langsung tekan tombol Insert token kalo emang udah punya.




Kalo ada yang kurang jelas, komen aja dibawah, siapa tau ada temen-temen yang lain yang bisa bantu :D

wk kabooooooooooooorrrrrrrrr.... XD


Label:
Langganan: Postingan (Atom)

Comment