|
code updated 12-18-06
Litrato means photo or picture in Filipino; which is also the name of my script I use on my site to show my pictures.. It's my own implementation of the lightbox script.which is not as sophisticated as lightbox but it is still functional never the less. I wrote it because I was curious how the lightbox script worked and I wanted to try and make my own just for educational purposes.
For those who are interested and want to build their own I contribute my work to you and hope it helps. So here it is.
litrato.js
This is the gist of the script, you must call litrato.init() when the page loads to initialize the http object for our AJAX goodness. The AJAX routine is handled by litrato.php which is also responsible for the presentation of the image. The script also makes 2 <div> tags which is styled using litrato.css to give it that lightbox fill to it
var litrato = {
http: null,
image: null,
isActive: false,
imgId: "ViewPhoto",
bgId: "PhotoBG",
makeObject: function() {
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
return request;
},
init: function() {
litrato.http = litrato.makeObject()
},
facade: function(make) {
var opacity = 85;
var height = (typeof( document.documentElement.scrollHeight ) == 'number' ) ? document.documentElement.scrollHeight : document.body.scrollHeight;
height += 150; //to fix the height bug
if (make) {
if (!document.getElementById(litrato.bgId)) {
var fadebg = document.createElement('div');
fadebg.id = litrato.bgId;
document.body.appendChild(fadebg);
var bgObj = document.getElementById(litrato.bgId);
bgObj.style.height = height + "px";
bgObj.style.opacity = '.' + opacity;
bgObj.style.filter = "alpha(opacity:" + opacity + ")";
}
} else {
document.body.removeChild(document.getElementById(litrato.bgId));
}
},
render: function() {
if (litrato.http.readyState == 4) {
if (litrato.http.status == 200) {
//display the photo
var response = litrato.http.responseText.split("|");
document.getElementById(litrato.imgId).innerHTML = "<h2>LOADING IMAGE</h2>";
//check if the image is cached
if (litrato.image.complete) document.getElementById(litrato.imgId).innerHTML = response[0];
else { //else load it
litrato.image.onload = function(e) {
document.getElementById(litrato.imgId).innerHTML = response[0];
}
}
litrato.image = null;
} else {
alert("Request has timed out.");
}
litrato.isActive = false;
}
},
show: function(file) {
if (!litrato.http) {
alert("Error initializing XMLHttpRequest!");
return false;
}
if (litrato.isActive) {
alert("Still proccessing your previous request; please wait untill the process finishes");
} else {
litrato.close(); //make sure everything is clean
litrato.isActive = true;
litrato.image = new Image(); //preload the image
litrato.image.src = file;
//create the div element
if (!document.getElementById(litrato.imgId)) {
var photobox = document.createElement('div');
photobox.id = litrato.imgId;
document.body.appendChild(photobox);
}
litrato.facade(true);
file = file.replace(new RegExp('/',"g"),'~');
litrato.http.open('get', 'litrato.php?page=photo&l='+file);
litrato.http.onreadystatechange = litrato.render;
litrato.http.send(null);
window.location = "#canvas";
}
},
close: function() {
if (document.getElementById(litrato.imgId)) {
document.body.removeChild(document.getElementById(litrato.imgId));
litrato.facade(false);
}
}
};
litrato.php
This file parses the info sent by litrato.js and returns the corresponding output in HTM;. if you want to format how the image is presented do it here.
if ($_REQUEST['l'] == "") { header ("Location: error.php?404"); }
$file = ereg_replace("~", "/", $_REQUEST['l']);
if (!file_exists($file)) { header ("Location: error.php?404"); }
$title = substr($file, strrpos($file, "/")+1, strlen($file));
$title = ereg_replace("_", " ", $title);
$title = substr($title, 0, strpos($title, "."));
list($x, $y) = getimagesize($file);
echo "<h4>click on the photo to hide it</h4><a href="javascript:litrato.close();"><img src="$file" alt="$_REQUEST[i]" id="GalleryPhoto" width="$x" height="$y" /></a><br />n<h2>$title</h2>";
litrato.css
Finally the CSS file; this code is responsible for the opaque black background and the image borders and what not. the elements are created by the litrato.js file.
#ViewPhoto {
float: left;
position: absolute;
top: 0;
left: 0;
text-align: center;
z-index: 2001;
padding-top: 20px;
width: 100%;
color: #000;
}
#ViewPhoto img {
background: #FFF;
border: 1px #333 solid;
padding: 5px;
}
#ViewPhoto h2, #ViewPhoto h4 {
font-weight: normal;
margin: 0;
padding: 5px;
color: #FFF;
}
#PhotoBG {
float: left;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
background: #000;
z-index: 2000;
}
Notes
To load an image you use a normal A tag calling the litrato.show('path') function and specifying the path in the function arguements like so:
<a href="javascript:litrato.show('somepath/photo.jpg');">ClickMe</a>
There you have it! As far as I know the script works well on DOM ready browsers; if you find any bugs lemme know.
|
