Membuat YUI Lightbox Jquery Blogger

Assalamualaikum Wr. Wb

Hai Sobat Blogger, Huft hari ini sedikit membosankan ni bagi saya,, dari pada bosan lebih baik saya share trik aja ni saya dapatkan dari Deejyan.. Langsung aja deh 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>

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

Related Post