|
| |
|
|
kigo
Posts: 6
Joined: 11/10/2004
Status: offline
 |
RE: experiments in Java script.... - 7/10/2006 8:19:43
hey cool thanks
kigo
|
|
|
|
curious monkey
Posts: 555
Joined: 4/28/2006
From: The lower handle of US
Status: offline
|
RE: experiments in Java script.... - 7/10/2006 12:36:52
here you go larry
light box
_____________________________
I have a ringing in my head and no one to help me answer it
| |
|
|
|
Larry M.
Posts: 2850
Joined: 2/20/2003
From: Greenville, South Carolina, USA
Status: offline
|
RE: experiments in Java script.... - 7/10/2006 14:48:14
Curious Monkey,
This may be over my head, but with a little help I might be able to get through it.
Would you mind looking at the Light Box source code then letting me know where (using a different font color) to subsitute my own photo? The png requirement may be a deal buster in any case since I'm using jpeg and gif images.
<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>
Thanks in advance!
_____________________________
Larry M.
Reality is the leading cause of stress among those few in touch with it
| |
|
|
|
curious monkey
Posts: 555
Joined: 4/28/2006
From: The lower handle of US
Status: offline
|
RE: experiments in Java script.... - 7/10/2006 15:40:02
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.
<edit>check out the other link I prodived there has the js to download and a better tutorial<edit>
_____________________________
I have a ringing in my head and no one to help me answer it
| |
|
|
|
Larry M.
Posts: 2850
Joined: 2/20/2003
From: Greenville, South Carolina, USA
Status: offline
|
RE: experiments in Java script.... - 7/10/2006 19:19:48
Curious Monkey,
I was able to get a .js script Ad Rotator to work across several pages managing a hundred or so animated banners a couple of years ago. As I remember, however, the parent .js file was located in the root of the web, not on every page in the head section as with Light Box.
I probably won't have time to fiddle with this, but sincerely appreciate your attempt to help in any case.
< Message edited by Larry M. -- 7/10/2006 19:25:03 >
_____________________________
Larry M.
Reality is the leading cause of stress among those few in touch with it
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
