you are right, this is a bit over my head too. I don't know anything about js.
here's the code from his site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en:us'>
<head>
<title>Feaux Lightbox Effect | ThinkVitamin.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="developer" content="Dustin Diaz" />
<style type='text/css' media='all'>
<!--
@import"css/styles.css";
#doc {
position:relative;
}
#overlay {
display:none;
position:absolute;
opacity:0.6;
filter:alpha(opacity=60);
z-index:999;
top:0;
left:0;
background:#000;
}
#lightbox {
display:none;
position:absolute;
z-index:1000;
text-align:center;
top:200px;
}
#lightbox img {
border:2px solid #fff;
cursor:pointer;
background:#000;
padding:2px;
margin:0 auto;
display:block;
}
#doc a img {
border:2px solid #fff;
padding:2px;
background:#000;
}
-->
</style>
<script type="text/javascript" src="js/yahoo.js"></script>
<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript" src="js/dom.js"></script>
<script type="text/javascript">
<!--
YAHOO.example = function() {
var $D = YAHOO.util.Dom;
var $E = YAHOO.util.Event;
var $ = $D.get;
return {
init : function() {
var overlay = document.createElement('div');
overlay.id = 'overlay';
var lightbox = document.createElement('div');
lightbox.id = 'lightbox';
overlay.style.width = $D.getViewportWidth()+'px';
overlay.style.height = $D.getViewportHeight()+'px';
document.getElementsByTagName('body')[0].appendChild(overlay);
document.getElementsByTagName('body')[0].appendChild(lightbox);
var lightboxes = $D.getElementsByClassName('lightbox','a','doc');
$E.on(lightboxes, 'click', this.lightbox);
$E.on(lightbox, 'click', this.close);
},
lightbox : function(e) {
var target = $E.getTarget(e, true);
if ( target.tagName.toLowerCase() == 'img' ) {
var img = target.parentNode.getAttribute('rel');
$('overlay').style.display = 'block';
$('lightbox').innerHTML = '<img src="'+img+'" alt="" />';
$('lightbox').style.display = 'block';
}
$E.stopEvent(e);
},
close : function() {
$('overlay').style.display = '';
$('lightbox').style.display = '';
}
};
}();
YAHOO.util.Event.onAvailable('doc', YAHOO.example.init, YAHOO.example, true);
//-->
</script>
</head>
<body>
<div id='doc'>
<h1>Feaux Lightbox Effect | ThinkVitamin.com Demo</h1>
<p>You probably heard of that lightbox gallery thing. Well, this kind of achieves that. Just click on the image.</p>
<a class='lightbox' href="http://www.flickr.com/photos/polvero/84703582/" title="Photo Sharing" rel="http://static.flickr.com/37/84703582_74c142698f_o.jpg"><img src="http://static.flickr.com/37/84703582_74c142698f_m.jpg" width="240" height="127" alt="My 2005 Chevy Silverado LT." /></a></p>
</div>
</body>
</html>
here's his image code:
<a class='lightbox' href="http://www.flickr.com/photos/polvero/84703582/" title="Photo Sharing" rel="http://static.flickr.com/37/84703582_74c142698f_o.jpg"><img src="http://static.flickr.com/37/84703582_74c142698f_m.jpg" width="240" height="127" alt="My 2005 Chevy Silverado LT." /></a>
unfortunatly I think you have to get the js:
<script type="text/javascript" src="js/yahoo.js"></script>
<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript" src="js/dom.js"></script>
<script type="text/javascript">
to make it work. because i do see some js there but it's still referencing others. and everything else above is all styling. I don't know what else to say.... sorry.[&o]
<edit>check out the other link I prodived there has the js to download and a better tutorial<edit>
