Difference between revisions of "Wavesalon javascript slideshow code"
From John Freier
m |
|||
| Line 2: | Line 2: | ||
<html xmlns="http://www.w3.org/1999/xhtml"> | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
<head> | <head> | ||
| − | + | <title>Slideshow 2!</title> | |
| − | + | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| − | + | <meta name="author" content="Aeron Glemann (http://www.electricprism.com/aeron/)" /> | |
| − | + | <link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" /> | |
| − | + | <script type="text/javascript" src="js/mootools.js"></script> | |
| − | + | <script type="text/javascript" src="js/slideshow.js"></script> | |
| − | + | <script type="text/javascript" src="js/slideshow.kenburns.js"></script> | |
| − | + | <script type="text/javascript"> | |
| − | + | window.addEvent('domready', function(){ | |
| − | + | var data = { | |
| − | + | 'http://wavesalon.biz/wp-content/uploads/2010/10/WS10_597_LR-72-Web900L.jpg': { caption: 'Click to enter.' }, | |
| − | + | 'http://wavesalon.biz/wp-content/uploads/2010/06/WS10_129_LR-72-Web900L.jpg': { caption: 'Click to enter.' }, | |
| − | + | 'http://wavesalon.biz/wp-content/uploads/2010/06/WS10_411_LR-72-Web900L1.jpg': { caption: 'Click to enter.' }, | |
| − | + | 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_423_LR-72-Web900L1.jpg': { caption: 'Click to enter.' }, | |
| − | + | 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_256_LR-72-Web900L1.jpg': { caption: 'Click to enter.' }, | |
| − | + | 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_366_LR-72-Web900L1.jpg': { caption: 'Click to enter.' }, | |
| − | + | 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_179_LR-72-Web900L1.jpg': { caption: 'Click to enter.' }, | |
| − | + | 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_190_LR-72-Web900L.jpg': { caption: 'Click to enter.' }, | |
| − | + | 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_267_LR-72-Web900L.jpg': { caption: 'Click to enter.' }, | |
| − | + | 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_039_LR-72-Web900L.jpg': { caption: 'Click to enter.' }, | |
| − | + | 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_160_LR-72-Web900L.jpg': { caption: 'Click to enter.' }, | |
| − | + | 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_015_LR-72-Web900L.jpg': { caption: 'Click to enter.' } | |
| − | + | }; | |
| − | + | var myShow = new Slideshow.KenBurns('show', data, { captions: true, controller: false, delay: 3000, duration: 1000, height: 500, width: 600 }); | |
| − | + | ||
| − | + | $('show').addEvent('click', function(){ | |
| − | + | window.location='http://www.google.com'; | |
| − | + | }); | |
| − | + | ||
| − | + | $('show').addEvent('mouseenter', function(){ | |
| − | + | document.body.style.cursor='pointer' | |
| − | + | }); | |
| − | + | ||
| − | + | $('show').addEvent('mouseleave', function(){ | |
| − | + | document.body.style.cursor='auto' | |
| − | + | }); | |
| − | + | ||
| − | + | }); | |
| − | + | ||
| − | + | </script> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</head> | </head> | ||
<body> | <body> | ||
| − | + | <div id="show" class="slideshow"> | |
| − | + | <img src="images/1.jpg" alt="Volcano Asención in Ometepe, Nicaragua." /> | |
| − | + | </div> | |
</body> | </body> | ||
</html> | </html> | ||
Revision as of 13:10, 8 March 2011
<!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"> <head> <title>Slideshow 2!</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="Aeron Glemann (http://www.electricprism.com/aeron/)" /> <link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" /> <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/slideshow.js"></script> <script type="text/javascript" src="js/slideshow.kenburns.js"></script> <script type="text/javascript"> window.addEvent('domready', function(){ var data = { 'http://wavesalon.biz/wp-content/uploads/2010/10/WS10_597_LR-72-Web900L.jpg': { caption: 'Click to enter.' }, 'http://wavesalon.biz/wp-content/uploads/2010/06/WS10_129_LR-72-Web900L.jpg': { caption: 'Click to enter.' }, 'http://wavesalon.biz/wp-content/uploads/2010/06/WS10_411_LR-72-Web900L1.jpg': { caption: 'Click to enter.' }, 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_423_LR-72-Web900L1.jpg': { caption: 'Click to enter.' }, 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_256_LR-72-Web900L1.jpg': { caption: 'Click to enter.' }, 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_366_LR-72-Web900L1.jpg': { caption: 'Click to enter.' }, 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_179_LR-72-Web900L1.jpg': { caption: 'Click to enter.' }, 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_190_LR-72-Web900L.jpg': { caption: 'Click to enter.' }, 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_267_LR-72-Web900L.jpg': { caption: 'Click to enter.' }, 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_039_LR-72-Web900L.jpg': { caption: 'Click to enter.' }, 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_160_LR-72-Web900L.jpg': { caption: 'Click to enter.' }, 'http://wavesalon.biz/wp-content/uploads/2010/07/WS10_015_LR-72-Web900L.jpg': { caption: 'Click to enter.' } }; var myShow = new Slideshow.KenBurns('show', data, { captions: true, controller: false, delay: 3000, duration: 1000, height: 500, width: 600 });
$('show').addEvent('click', function(){
window.location='http://www.google.com';
});
$('show').addEvent('mouseenter', function(){
document.body.style.cursor='pointer'
});
$('show').addEvent('mouseleave', function(){
document.body.style.cursor='auto'
});
});
</script>
</head>
<body>
</body> </html>
