Hola de nuevo, para aquellos que me habéis pedido por mensaje privado un pase de diapositivas o también llamado “Slideshow” que es como habitualmente lo encontraréis por la red, aquí os dejo uno fácil, sencillo y ajustable a la medida que queráis para vuestra web.
Empezamos:
Un Slideshow consta de 4 archivos:
1.- Una carpeta donde se guardarán las imágenes a mostrar y con el tamaño que queráis. La creamos y metemos las fotos dentro. La llamaremos imagenes. Todas las fotos tienen que tener el mismo tamaño. Yo utilizo un programa muy sencillo para ajustar tamaños “Pixresizer”, pero podéis hacerlo con cualquier otro programa, Photopaint, etc, etc.
2.- Un archivo en formato CSS (hoja de estilo). Este archivo es donde hay que indicar el tamaño de las fotos que hemos metido en la carpeta imágenes.
3.- Un archivo en formato JS (javascript). Este archivo marca los tiempos para cada foto, fundidos, etc. y que por supuesto podréis modificar dependiendo de vuestros gustos.
4.- Por último el código que hace que todo funcione. Este código los meteremos como siempre, creamos un cuadrado, botón derecho sobre él, propiedades web, marcador de lugar (Body) y pegamos el código dentro.
Ahora vamos con lo importante, ¿qué hacemos con el resto?, pues metemos la carpeta de las imagenes, el archivo CSS y el archivo JS en la raíz de nuestra web, es decir, junto a la carpeta index_htm_files y resto de archivos que forman nuestra web a medida que vamos exportando. Lo arrastramos ahí y listo. Nuestro Slideshow o pase de dispositivas ya está preparado.
Bien, os dejo los códigos de los 3 archivos para que todo funcione.
Este primer código lo pegaréis en el cuadrado que tenéis que crear.
<!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" xml:lang="en">
<head>
<link rel="stylesheet" href='slideshow1.css' type="text/css" />
<script type="text/javascript" src="primerslide.js"></script>
<title>Slideshow Demo</title>
</head>
<body>
<div id="rotator">
<img src="imagenes/1.jpg">
<img src="imagenes/2.jpg">
<img src="imagenes/3.jpg">
<img src="imagenes/4.jpg">
<img src="imagenes/5.jpg">
</div>
</body>
</html>
El segundo código corresponde al archivo CSS (hoja de estilo). Lo copiáis en un archivo de texto mismo y lo guardáis como slideshow1.css. Copia desde el asterisco hasta la última llave.
*
{
margin: 0;
padding: 0;
}
#rotator
{
overflow: hidden;
margin: 0px auto 10px;
position: relative;
width: 450px;
height: 303px;
#rotator img
{
border: 0;
width: 450px;
height: 303px;
}
p
{
text-align: center;
}
Por útimo el tercer código y que corresponde al archivo JS (javascript). Lo copiáis en un archivo de texto también y lo guardáis como primerslide.js. Copia hasta la última llave.
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init()
{
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow1.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,5000);
}
function so_xfade()
{
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0)
{
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,5000);
}
else
{
imgs[current].style.display = 'none';
setTimeout(so_xfade,80);
}
function setOpacity(obj)
{
if(obj.xOpacity>.99)
{
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
Eso es todo.
El tamaño que he puesto para las fotos y que verás en el código del archivo CSS es de 450 X 303, por supuesto puedes modificarlo a tu gusto y tienes que hacerlo en los dos sitios que aparece ese tamaño dentro de ese código.
Vuestros archivos deberían haber quedado así...
Espero que se haya entendido todo. Por último, deciros que este Slideshow no tiene botonera para poder parar la foto o darle hacia adelante o hacia atrás. El resultado sería este…
http://www.greenparrotscantabria.es/quienes_somos.htm
También hice otro Slideshow en esa misma web algo diferente y que si que tiene botonera. Este contiene algo más de código que el que os he dejado.
http://www.greenparrotscantabria.es/instalaciones.htm
Un saludo.
Toño.