<!DOCTYPE html>
<html>
<head>
<title>Basic LightFace Test</title>
<style>
@import "../Assets/lightface.css";
</style>
<link rel="stylesheet" href="../Assets/LightFace.css" />
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools.js"></script>
<script src="../Source/LightFace.js"></script>
<script src="../Source/LightFace.js"></script>
<script src="../Source/LightFace.IFrame.js"></script>
<script src="../Source/LightFace.Image.js"></script>
<script src="../Source/LightFace.Request.js"></script>
<script>
window.addEvent('domready',function(){
var index = 0;
var images = [
'worldcup-post-tx3.jpg',
'http://davidwalsh.name/dw-content/slideshow/cricci1.jpg',
'http://davidwalsh.name/dw-content/slideshow/cricci2.jpg',
'http://davidwalsh.name/dw-content/slideshow/cricci3.jpg',
'http://davidwalsh.name/dw-content/slideshow/cricci4.jpg',
'http://davidwalsh.name/dw-content/slideshow/cricci5.jpg'
];
light = new LightFace.Image({
title: 'Image ' + (index + 1),
fadeDuration: 100,
//fadeDelay: 400,
keys: {
left: function() {
if(index!= 0) this.load(images[--index],'Image ' + (index + 1));
},
right: function() {
if(index != images.length-1) this.load(images[++index],'Image ' + (index + 1));
},
esc: function() {
this.close();
}
}
});
document.id('start').addEvent('click',function() {
load = light.load(images[0],'Colegio Santander').open();
});
});
</script>
</head>
<body>
<h3>Galleemo</h3>
<p>
Click the button below to launch it and make it happen.
</p>
<button id="start" onclick="saludar()">Start Show</button>
</body>
</html>