Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

Poner un slideshow como baner (a revisar)

PHP, HTML, CSS, JS, jQuery, etc.
Avatar de Usuario
viktor
Ex Staff
Mensajes: 432
Registrado: 10 Dic 2004, 00:42
Género:
Edad: 43

Poner un slideshow como baner (a revisar)

#1

Mensaje por viktor »

Aclaración, este javascrip esta en revisión, cuando alguien del equipo termine de darle el ok, quitaremos este mensaje y lo pondremos como seguro, por el momento, pueden experimentar con el mismo, pero con cuidado

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.

Código: Seleccionar todo

<script type="text/javascript" src="jquery.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:

Código: Seleccionar todo

<script type="text/javascript" src="javascrp/jquery.js"></script>
<script type="text/javascript" src="javascrp/jquery.innerfade.js"></script>		
Ok?

Ahora, mas abajo (o ahí mismo) agregan esto:

Código: Seleccionar todo

<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>
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

Código: Seleccionar todo

animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
Con cada lista ul con la siguiente id = portfolio se le aplicaran las siguientes propiedades

Código: Seleccionar todo

speed: 1000,
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.

Código: Seleccionar todo

<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>
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)

Código: Seleccionar todo

<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" />
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.


Antes de nada, lee las Normas de phpBB-Es, y el siempre útil Foro de guías sobre phpBB 3.
Consulta la Documentación de phpBB 2 y phpBB 3 y sus correspondientes FAQS de ayuda.
Administra, modifica, actualiza tu foro con el listado de Guías de nuestra Biblioteca.
Quizás tu duda esté resuelta, y todos ahorremos tiempo.
Si es sobre cómo Crear una Consulta SQL ya lo tienes explicado en el enlace.
En general, se recomienda Buscar antes de preguntar para no repetir preguntas y dudas resueltas.
Sólo tendrás Soporte si facilitas los datos correspondientes y si respetas completamente el Copyright de phpBB.
NOTA: No damos Soporte a los foros integrados en Nuke y derivados del mismo. Infórmate AQUÍ.


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
ThE KuKa
Administrador
Mensajes: 9536
Registrado: 04 Ene 2004, 19:27
Género:
Edad: 46

Re: Poner un slideshow como baner (a revisar)

#2

Mensaje por ThE KuKa »

A ver si este fin de semana hago "pruebas" Viktor :wink:

📌 Raul [ThE KuKa] en phpBB 📌
✅ Jr. Extension Validator - Jr. Styles Validator - Style Customisations - Translator - International Support Team
✅

Si te gustan mis estilos, traducciones, etc. y quieres mostrar algo de aprecio, no dudes en hacer una donación Imagen
:flag_es: phpBB España - En línea desde 2003 :heart:




Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Volver a “🆘 Recursos Webmaster”