Pamir Gambar Guna Skrip Lightbox |Tutorial Blogger Blogspot

Sekiranya blog anda adalah blog yang banyak menyiarkan gambar-gambar atau imej-imej, membuka gambar-gambar dengan teknik lightbox image viewer ini amat sesuai untuk menjimatkan ruangan.

Tunggu sehingga blog selesai loading sepenuhnya klik pada gambar thumbnail berikut:

1. Semua gambar-gambar asal yang berukuran besar dari dalam komputer sendiri buat jadikan berukuran thumbnail dulu. Simpan kedua-dua ukuran asal dan ukuran thumbnail dalam komputer sendiri. Ikut panduan Menjadikan Gambar Berukuran Thumbnail Online.

2. Klik mouse sebelah kanan pada gambar overlay.png di bawah dan klik Save Image As untuk simpan gambar ini dalam komputer sendiri. Kemudian hoskan gambar ini dalam Photobucket atau Flikr atau Picasa atau lain-lain hos dan catatkan alamat URL pautannya:

2.1 Imej latar belakang overlay.png:

3. Salin, simpan dan hoskan kedua-dua gambar loading.gif dan close.gif berikut dengan cara yang sama, catatkan alamat URL pautannya:

3.1 Imej pembuka Loading.gif:

3.2 Imej penutup Close.gif:

4. Salin dan buka kod CSS berikut menggunakan program Notepad. Paste masukkan alamat URL pautan gambar overlay.png di para 2 di atas ke dalam kod #overlay{ background-image: url( ... ) warna merah yang ditunjukkan berikut:

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(alamat-URL-gambar-overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

4.1 Paste masukkan kod lightbox.css ini dalam kod template blog, (pastikan alamat URL pautan gambar overlay.png telah betul dimasukkan di kedua-dua tempatnya). Dalam papan pemuka Blogger pilih Design dan Edit HTML. Tik tandakan kotak Expand Widget Templates, kemudian telusur dalam kod template cari kod </head>. Copy dan paste masukkan kod lightbox.css di atas satu baris sebelum ]]></b:skin> seperti berikut:

5. Salin dan buka fail lightbox.js berikut dengan menggunakan program Notepad. Paste masukkan alamat URL pautan kedua-dua gambar loading.gif dan gambar close.gif di para 3 di atas di tempat warna merah yang ditunjukkan seperti di bawah:

/*
Lightbox JS: Fullsize Image Overlays
by Lokesh Dhakar - http://www.huddletogether.com

For more information on this script, visit:
http://huddletogether.com/projects/lightbox/

Script featured on Dynamic Drive code library Jan 24th, 06':
http://www.dynamicdrive.com

Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
(basically, do anything you want, just leave my name and link)

Table of Contents
-----------------
Configuration

Functions
- getPageScroll()
- getPageSize()
- pause()
- getKey()
- listenKey()
- showLightbox()
- hideLightbox()
- initLightbox()
- addLoadEvent()

Function Calls
- addLoadEvent(initLightbox)

*/

//
// Configuration
//

// If you would like to use a custom loading image or close button reference them in the next two lines.
var loadingImage = 'loading.gif';
var closeButton = 'close.gif';

//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

var yScroll;

if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}

arrayPageScroll = new Array('',yScroll)
return arrayPageScroll;
}

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}

//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
//
function pause(numberMillis) {
var now = new Date();
var exitTime = now.getTime() numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime)
return;
}
}

//
// getKey(key)
// Gets keycode. If 'x' is pressed then it hides the lightbox.
//

function getKey(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
key = String.fromCharCode(keycode).toLowerCase();

if(key == 'x'){ hideLightbox(); }
}

//
// listenKey()
//
function listenKey () { document.onkeypress = getKey; }

//
// showLightbox()
// Preloads images. Pleaces new image in lightbox then centers and displays.
//
function showLightbox(objLink)
{
// prep objects
var objOverlay = document.getElementById('overlay');
var objLightbox = document.getElementById('lightbox');
var objCaption = document.getElementById('lightboxCaption');
var objImage = document.getElementById('lightboxImage');
var objLoadingImage = document.getElementById('loadingImage');
var objLightboxDetails = document.getElementById('lightboxDetails');

var arrayPageSize = getPageSize();
var arrayPageScroll = getPageScroll();

// center loadingImage if it exists
if (objLoadingImage) {
objLoadingImage.style.top = (arrayPageScroll[1] ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) 'px');
objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) 'px');
objLoadingImage.style.display = 'block';
}

// set height of Overlay to take up whole page and show
objOverlay.style.height = (arrayPageSize[1] 'px');
objOverlay.style.display = 'block';

// preload image
imgPreload = new Image();

imgPreload.onload=function(){
objImage.src = objLink.href;

// center lightbox and make sure that the top and left values are not negative
// and the image placed outside the viewport
var lightboxTop = arrayPageScroll[1] ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);

objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop "px";
objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft "px";

objLightboxDetails.style.width = imgPreload.width 'px';

if(objLink.getAttribute('title')){
objCaption.style.display = 'block';
//objCaption.style.width = imgPreload.width 'px';
objCaption.innerHTML = objLink.getAttribute('title');
} else {
objCaption.style.display = 'none';
}

// A small pause between the image loading and displaying is required with IE,
// this prevents the previous image displaying for a short burst causing flicker.
if (navigator.appVersion.indexOf("MSIE")!=-1){
pause(250);
}

if (objLoadingImage) { objLoadingImage.style.display = 'none'; }
objLightbox.style.display = 'block';

// After image is loaded, update the overlay height as the new image might have
// increased the overall page height.
arrayPageSize = getPageSize();
objOverlay.style.height = (arrayPageSize[1] 'px');

// Check for 'x' keypress
listenKey();

return false;
}

imgPreload.src = objLink.href;

}

//
// hideLightbox()
//
function hideLightbox()
{
// get objects
objOverlay = document.getElementById('overlay');
objLightbox = document.getElementById('lightbox');

// hide lightbox and overlay
objOverlay.style.display = 'none';
objLightbox.style.display = 'none';

// disable keypress listener
document.onkeypress = '';
}

//
// initLightbox()
// Function runs on window load, going through link tags looking for rel="lightbox".
// These links receive onclick events that enable the lightbox display for their targets.
// The function also inserts html markup at the top of the page which will be used as a
// container for the overlay pattern and the inline image.
//
function initLightbox()
{

if (!document.getElementsByTagName){ return; }
var anchors = document.getElementsByTagName("a");

// loop through all anchor tags
for (var i=0; i<anchors.length; i ){
var anchor = anchors[i];

if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
anchor.onclick = function () {showLightbox(this); return false;}
}
}

// the rest of this code inserts html at the top of the page that looks like this:
//
// <div id="overlay">
// <a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a>
// </div>
// <div id="lightbox">
// <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image">
// <img id="closeButton" />
// <img id="lightboxImage" />
// </a>
// <div id="lightboxDetails">
// <div id="lightboxCaption"></div>
// <div id="keyboardMsg"></div>
// </div>
// </div>

var objBody = document.getElementsByTagName("body").item(0);

// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
var objOverlay = document.createElement("div");
objOverlay.setAttribute('id','overlay');
objOverlay.onclick = function () {hideLightbox(); return false;}
objOverlay.style.display = 'none';
objOverlay.style.position = 'absolute';
objOverlay.style.top = '0';
objOverlay.style.left = '0';
objOverlay.style.zIndex = '90';
objOverlay.style.width = '100%';
objBody.insertBefore(objOverlay, objBody.firstChild);

var arrayPageSize = getPageSize();
var arrayPageScroll = getPageScroll();

// preload and create loader image
var imgPreloader = new Image();

// if loader image found, create link to hide lightbox and create loadingimage
imgPreloader.onload=function(){

var objLoadingImageLink = document.createElement("a");
objLoadingImageLink.setAttribute('href','#');
objLoadingImageLink.onclick = function () {hideLightbox(); return false;}
objOverlay.appendChild(objLoadingImageLink);

var objLoadingImage = document.createElement("img");
objLoadingImage.src = loadingImage;
objLoadingImage.setAttribute('id','loadingImage');
objLoadingImage.style.position = 'absolute';
objLoadingImage.style.zIndex = '150';
objLoadingImageLink.appendChild(objLoadingImage);

imgPreloader.onload=function(){}; // clear onLoad, as IE will flip out w/animated gifs

return false;
}

imgPreloader.src = loadingImage;

// create lightbox div, same note about styles as above
var objLightbox = document.createElement("div");
objLightbox.setAttribute('id','lightbox');
objLightbox.style.display = 'none';
objLightbox.style.position = 'absolute';
objLightbox.style.zIndex = '100';
objBody.insertBefore(objLightbox, objOverlay.nextSibling);

// create link
var objLink = document.createElement("a");
objLink.setAttribute('href','#');
objLink.setAttribute('title','Click to close');
objLink.onclick = function () {hideLightbox(); return false;}
objLightbox.appendChild(objLink);

// preload and create close button image
var imgPreloadCloseButton = new Image();

// if close button image found,
imgPreloadCloseButton.onload=function(){

var objCloseButton = document.createElement("img");
objCloseButton.src = closeButton;
objCloseButton.setAttribute('id','closeButton');
objCloseButton.style.position = 'absolute';
objCloseButton.style.zIndex = '200';
objLink.appendChild(objCloseButton);

return false;
}

imgPreloadCloseButton.src = closeButton;

// create image
var objImage = document.createElement("img");
objImage.setAttribute('id','lightboxImage');
objLink.appendChild(objImage);

// create details div, a container for the caption and keyboard message
var objLightboxDetails = document.createElement("div");
objLightboxDetails.setAttribute('id','lightboxDetails');
objLightbox.appendChild(objLightboxDetails);

// create caption
var objCaption = document.createElement("div");
objCaption.setAttribute('id','lightboxCaption');
objCaption.style.display = 'none';
objLightboxDetails.appendChild(objCaption);

// create keyboard message
var objKeyboardMsg = document.createElement("div");
objKeyboardMsg.setAttribute('id','keyboardMsg');
objKeyboardMsg.innerHTML = 'press <kbd>x</kbd> to close';
objLightboxDetails.appendChild(objKeyboardMsg);

}

//
// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
// Function found at Simon Willison's weblog - http://simon.incutio.com/
//
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}

addLoadEvent(initLightbox); // run initLightbox onLoad

5.1 Setelah masukkan alamat URL pautan kedua-dua gambar loading.gif dan gambar close.gif di atas, simpan (save) fail ini dan namakan dia sebagai lightbox.js.

5.2 Hoskan fail lightbox.js ini dalam Google Sites. Ikut panduan Hos Fail Javascript di Google Sites. Atau hoskan fail ini dalam mana-mana file hosting yang boleh menyimpan fail javascript. Catatkan alamat URL pautan kepada fail ini.

5.3 Sebagai contoh, alamat URL pautan dari Google Sites yang digunakan dalam panduan ini adalah:

http://sites.google.com/site/binawebpercuma/home/kumpulanfail/lightbox.js

6. Salin dan buka skrip berikut menggunakan program Notepad. Masukkan alamat URL pautan fail lightbox.js di atas pada tempat warna merah berikut:

6.1 Setelah itu masukkan skrip ini dalam kod template blog anda sebelum kod </head>:

7. Cara menyediakan gambar dalam pos blog.

7.1 Kembali dan dapatkan alamat URL pautan gambar asal ukuran besar dan gambar ukuran thumbnail seperti panduan di para 1.

7.2 Salin dan buka kod di bawah menggunakan program Notepad. Masukkan alamat URL pautan gambar asal ukuran besar dalam href="..." dan alamat URL pautan gambar ukuran thumbnail dalam src="...." seperti berikut:

7.3 Satu kod untuk setiap satu gambar. Ulang proses di para 7.2 untuk gambar-gambar lain yang akan dimasukkan dalam pos blog.

7.4 Contoh kod bagi satu daripada gambar yang digunakan dalam panduan ini. Gambar dihoskan dalam ImageShack:

7.5 Contoh kod dalam panduan ini bagaimana tiga dari gambar-gambar ini disusun dalam satu baris:

<span style="float: left; padding-left: 25px;"><a href="http://img190.imageshack.us/img190/484/500hrspaintusingmspaint.jpg" rel="lightbox"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUKPFfWKdTQJNXyW5zL-J1yXodlB9fNRJOyhAushR3luYTFW5pmm_5SfdsU5M75KNXDP64_v0MXcvpJvvfbaAeM2G2hRDcHuj5uhkdT6LsuTmM_1jlYhEDo5rUlrcjOC85Tob9AIC9j26-/s320/500hr+thumbnail.jpg" style="height: 75px; width: 100px;" /></a></span>

<span style="float: left; padding-left: 3px;"><a href="http://img35.imageshack.us/img35/5994/afghanbandeamirbamiyan.jpg" rel="lightbox"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp9bxvsHWrSPy1JXTqlnxygZVS8zIRL-r_MkCPhNm4igKdlR7abAxMgGBtEkt23EIdxjSQ6IS2xyYLKIcVsz6MO9BLN4SpGNInUGImFpup7JIBDjs7pwcHFkuzHfXVPGv5ZbveE68Nktif/s320/Afghan+1+thumbnail.jpg" style="height: 75px; width: 100px;" /></a></span>

<span style="float: left; padding-left: 3px;"><a href="http://img35.imageshack.us/img35/9964/afghandashtelaili.jpg" rel="lightbox"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Q1PiuYjnFHIvhDOIhRL6OgpVqpbwnp-BkW4g7L93bFiGIthdT_E22W8A_Ga95USrXG6rvQnHLbXITC3hqaYTOec0tXqmzkPlBpj4CgDCFRkqBvxz03m0Pm28yrZt4NfQqeSde3IORIRT/s320/afghan+2+%20thumbnail.jpg" style="height: 75px; width: 100px;" /></a></span>

<div style="clear: both;"></div>

Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-testblog.blogspot.com/.

Salam hormat dari

Tutorial Blogger Blogspot