Membuat YUI Lightbox Jquery Blogger

YUI Lightbox menyediakan kelas yang sangat berguna untuk membuat kotak dialog modal dengan masking latar belakang
Script ini dapat digunakan sebagai galeri foto layar penuh. 
Script ini telah diuji di IE 6, Firefox 2.0.0.4, Netscape 8.1, Mozilla 1.7 dan Opera 9.21, yang diciptakan tanpa hack apapun. Fitur lain yang panas adalah bahwa orang dapat dengan mudah membuat drag & drop lightbox tanpa upaya tambahan.

             

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> 

2. Sekarang simpan Post / Page.
Description: Membuat YUI Lightbox Jquery Blogger