Membuat YUI Lightbox Jquery Blogger

Cara Menambahkan YUI Lightbox Ke Blogger
Ada 2 cara untuk menambahkannya .
Cara 1 :
1. Sekarang Pergi ke Desain> Edit HTML.

2. Sekarang mencari tag </ head> dan paste kode berikut hanya atas / Sebelum itu.

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/YUI%20lightbox/container.css" />
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/dragdrop-min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/container-min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/Lightbox.js"></script>

Cara ke 2 :
1. Pergi ke Halaman Post / Anda ingin menambahkan YUI Lightbox dan kemudian pergi ke tab Edit HTML.

2. Sekarang salin kode dari bawah dan paste di sana.

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/YUI%20lightbox/container.css" />
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/dragdrop-min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/container-min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/Lightbox.js"></script>

Cara Posting YUI Lightbox ke Postingan:
1. Sekarang untuk menambahkan gambar ke dalam YUI Lightbox, Pertama menambahkan foto

<img src="1-th.jpg" id="photo1"/>

Dalam hal ini, silakan membuat catatan dari tag id dan ini adalah versi lebih kecil dari link image.Sekarang itu dengan lightbox menggunakan kode berikut.

<script type="text/javascript">
init = function(){

var dataSource = {
photo1:{url:"1.jpg", title: 'Rocks'}, /*This is the larger image*/

};
var lightbox = new YAHOO.com.thecodecentral.Lightbox({
imageBase:'js/lightbox',
dataSource: dataSource
});
}
YAHOO.util.Event.on(window, 'load', init);
</script>

Contoh Kode Gambarnya Lihat dibawah ini

<script type="text/javascript">
init = function(){
/**
* Format:
* Image_ID : {url : 'point_to_original_image', title: 'optional title'}
*/
var dataSource = {
photo1:{url:"http://test.thecodecentral.com/demos/lightboxrev/photos/1.jpg", title: 'Rocks'},
photo2:{url:"http://test.thecodecentral.com/demos/lightboxrev/photos/2.jpg"},
photo3:{url:"http://test.thecodecentral.com/demos/lightboxrev/photos/3.jpg", title: 'Untitled'},
photo4:{url:"http://test.thecodecentral.com/demos/lightboxrev/photos/4.jpg", title: 'Iceberg'},
photo5:{url:"http://test.thecodecentral.com/demos/lightboxrev/photos/5.jpg", title: 'Unknown Place'},
photo6:{url:"http://test.thecodecentral.com/demos/lightboxrev/photos/6.jpg", title: 'Iceberg 2'}
};
/**
* imageBase: tell lightbox where to find images need to render the ui
* this usual located in the same folder as the Lightbox.js
* dataSource: a JavaScript object contains a list of images that
we are going to attach the lightbox to
*/
var lightbox = new YAHOO.com.thecodecentral.Lightbox({
imageBase:'js/lightbox',
dataSource: dataSource
});
}
YAHOO.util.Event.on(window, 'load', init);
</script>