Requisitos: Html y css (aunque sea un poco), no es necesario js, ya que solo estaremos copiando código y en ningún momento modificaremos los archivos originales .js
Este scrip lo encontré en una pagina alemana, pero como esta en ingles bien explicado decidí ponerlo a disposición de todos los que están buscando algo parecido.
La idea seria poner una conjunto de imágenes que vayan rotando a determinado tiempo, con un enlace cada una, o un grupo de enlaces de texto con efecto. Para eso debemos agregar un scrip en donde tengamos el hoverall_header (o en un subdirectorio del template), y ademas tenemos que llamarlo desde el header del template.
Para empezar debemos subir un par de javascrip y todas las imágenes que queremos utilizar (pero eso lo explicare al final)
Ahora abrimos el hoverall_header de nuestro template (funciona con cualquier html, asi que da lo mismo si es phpBB 2 o 3), y agregamos esto.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.innerfade.js"></script>
<script type="text/javascript" src="jquery.innerfade.js"></script>
Con lo que llamaremos al javascrip que subimos a nuestro directorio elegido (si lo pusieron en un subdirectorio deben modificar el path para que apunte correctamente a los dos .js).
Por ejemplo, si suben esos 2 archivos a un directorio llamado javascrp dentro de su template, el código seria el siguiente:
<script type="text/javascript" src="javascrp/jquery.js"></script>
<script type="text/javascript" src="javascrp/jquery.innerfade.js"></script>
<script type="text/javascript" src="javascrp/jquery.innerfade.js"></script>
Ok?
Ahora, mas abajo (o ahí mismo) agregan esto:
<script type="text/javascript">
$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});
$('ul#portfolio').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '220px'
});
$('.fade').innerfade({
speed: 1000,
timeout: 6000,
type: 'random_start',
containerheight: '1.5em'
});
$('.adi').innerfade({
speed: 'slow',
timeout: 5000,
type: 'random',
containerheight: '150px'
});
});
</script>
$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});
$('ul#portfolio').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '220px'
});
$('.fade').innerfade({
speed: 1000,
timeout: 6000,
type: 'random_start',
containerheight: '1.5em'
});
$('.adi').innerfade({
speed: 'slow',
timeout: 5000,
type: 'random',
containerheight: '150px'
});
});
</script>
Acá agregaron varias cosas, aunque están bastante claras tratare de explicarlas un poco.
Para empezar fíjense que hay una llave para cada etiqueta o clase a la que le vamos a aplicar el scrip, esa etiqueta debe estar en el css correspondiente.
animationtype: Es el tipo de la animación (fade o slide)
speed: Es la velocidad en milisegundos que dura una imagen (1000 milisegundos = 1 seg)
timeout: Es el tiempo entre imágenes, también esta en milisegundos
type: Hay 3 tipos, (sequence, random o random_start)
containerheight: Como su nombre lo indica, es la altura del elemento contenedor (aca tiene que tener especial cuidado con el css y las etiquetas que engloben al css, deberían dale el suficiente espacio, pero eso ya lo tienen que tener en cuenta cuando deciden donde van a poner el slideshow)
runningclass: Esta clase es para aplicar reglas especiales de css al slideshow
Ahora, cada vez que agreguen una etiqueta con id = news se le aplicara este grupo de propiedades
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
Con cada lista ul con la siguiente id = portfolio se le aplicaran las siguientes propiedades
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '220px'
timeout: 5000,
type: 'sequence',
containerheight: '220px'
Y así sucesivamente, como ya se estarán dando cuenta, no necesitan poner todas las etiquetas para tener un banner, así que solo agreguen las etiquetas que necesiten.
Ok, eso con respecto al header, ahora tenemos que ir al body del html. Lo único que tiene que hacer, es agregar una etiqueta contenedora, con los nombres que pusimos en el scrip mas arriba.
Por ejemplo, si queremos agregar un banner, usaremos la etiqueta portfolio de esta manera.
<ul id="portfolio">
<li>
<a href="enlace de la primera imagen"><img src="imagen/imagen1.gif" alt="descripción imagen 1" /></a>
</li>
<li>
<a href="enlace de la segunda imagen"><img src="imagen/imagen2.gif" alt="descripción imagen 2" /></a>
</li>
<li>
<a href="enlace de la tercera imagen"><img src="imagen/imagen3.gif" alt="descripción imagen 3" /></a>
</li>
</ul>
<li>
<a href="enlace de la primera imagen"><img src="imagen/imagen1.gif" alt="descripción imagen 1" /></a>
</li>
<li>
<a href="enlace de la segunda imagen"><img src="imagen/imagen2.gif" alt="descripción imagen 2" /></a>
</li>
<li>
<a href="enlace de la tercera imagen"><img src="imagen/imagen3.gif" alt="descripción imagen 3" /></a>
</li>
</ul>
El subdirectorio imagen, lo puse como ejemplo, pero ponen el nombre del directorio que usen, poner ejemplo si subieron 4 imágenes (pxt1, pxt2, pxt3 y pxt4 )a un directorio llamado misimagenes, el enlace quedaría así (también tiene que tener en cuenta el formato de la imagen, no vayan a poner gif cuando suben jpgs)
<img src="misimagenes/pxt1.gif" alt="descripción imagen pxt1" />
<img src="misimagenes/pxt2.gif" alt="descripción imagen pxt2" />
<img src="misimagenes/pxt3.gif" alt="descripción imagen pxt3" />
<img src="misimagenes/pxt2.gif" alt="descripción imagen pxt2" />
<img src="misimagenes/pxt3.gif" alt="descripción imagen pxt3" />
etc.
La cantidad de cosas que pueden hacer con este scrip la tiene en la pagina original.
Innerfade
Ahí están los ejemplos de cada cosa bien explicado.
Lo único que necesitan es subir los 2 archivos del scrip, que les adjunto al final de este mensaje, y por supuesto todas las imágenes que quieran usar en su banner, enlace, etc.
