Slide Show F5 es un slider responsive basado en capas, que permite poder combinar imágenes, textos, videos (Youtube, Vimeo o HTML5), backgrounds y html personalizado. Permite personalizar el tiempo de visualización, el tipo y tiempo de transición (animación) tanto de cada slide como de cada capa.

Combinando la gran cantidad de opciones disponibles en este slider se pueden diseñar fantásticas presentaciones que hagan mucho más atractiva nuestra web y al permitir el sistema de capas su enlace personalizado a cualquier url podemos enlazarlo a cualquier red social, web, artículo, carro de compra, etc… que nos permita destacar y facilitar el acceso a cualquier contenido.

LICENSE

Slide Show F5 es gratis, y liberado bajo la GNU General Public License. La definición de esta licencia como se indica en la Wikipedia es:

La GNU General Public License (GNU GPL or GPL) es la licencia más utilizado software libre, lo que garantiza a los usuarios finales (personas, organizaciones, empresas) las libertades para ejecutar, estudiar, compartir (copia), y modificar el software . Software que permite a estos derechos se llama el software libre y, si el software es copyleft, requiere esos derechos que deben conservarse

CARACTERÍSTICAS

  • Hasta 40 elementos entre slide y capas

  • Imágenes como background del slider (pudiendo establecer un margen vertical o horizontal o animar la imagen personalizando la velocidad o el sentido del movimiento) o de cada uno de los slide o como capa de slide

  • Background color del slider (pudiendo establecer un margen vertical o horizontal) o de cada uno de los slide o como capa de slide

  • Videos Youtube, Vimeo o HTML5 como elemento de cada slide o como capa de slide

  • Texto como capa de slide (pudiendo establecer el tipo de fuente para todo el slider o para cada capa)

  • Html como slide o como capa de slide

  • Enlace url en cada slide o en cada capa

  • Tiempo de visibilidad, tipo de transición y el tiempo de duración de la transición. Pudiendo establecerlas tanto para el slider en su conjunto, como para cada slide o para cada capa

  • Mostrar indicadores de slide y flechas de navegación (pudiendo seleccionar entre distintos colores)

  • Transición manual o automática

  • Dirección de movimiento entre los slide

  • Forzar que el el slider tenga el tamaño de pantalla o que el ancho del slider sea el ancho de pantalla

  • Establecer un ancho y un alto que sirva de proporción para los distintos tipos de pantalla (no aplicable a slider a pantalla completa)

  • Mostrar una precarga del slider

  • Opacidad del slider, cada slide o cada capa de slide

  • Establecer ancho y alto de cada capa en % del slider (en imágenes o videos sólo ancho, el alto es proporcional)

  • Establecer la posición vertical u horizontal exacta en % del slider o predefinida (arriba, abajo, centrada verticalmente, izquierda, derecha, centrada horizontalmente)

  • Establecer a los videos una imagen previa (en Youtube y Vimeo además se puede seleccionar la imagen por defecto que establece Youtube o Vimeo al video), autoplay, autoplay-one y también que al finalizar fuerce el cambio de slide

INSTALACIÓN

Para instalar el modulo Slide Show F5 es necesario tener instalado Joomla 3 o superior.

Lo primero es descargar la última versión del modulo Slide Show F5 de la página web de Joomla F5.

Hay dos formas de instalar el modulo Slide Show F5 en Joomla 3.

Subir un archivo comprimido:

  • Es la forma más sencilla de instalación y lo primero es descargar la última versión del modulo Slide Show F5 de la página web de Template F5 en formato zip.

  • Desde el backend (administrador) del sitio web de Joomla nos vamos al menú Extensiones -> Gestor de Extensiones

  • En la pestaña de subir paquete hacemos click en el botón Examinar y seleccionamos el paquete de instalación (modulo en zip) de nuestro ordenador local.

  • Hacemos click en el botón Subir e instalar.

  • Una vez instalado habrá que publicar un modulo (explicamos más adelante)

instalarmodulo

Instalar desde un directorio:

  • Descargamos la última versión del modulo Slide Show F5

  • Descomprimimos el archivo en nuestro ordenador

  • Transferimos los archivos mediante FTP a una carpeta del Hosting (lo ideal es que sea /tmp) 

  • Desde el backend (administrador) del sitio web de Joomla nos vamos al menú Extensiones -> Gestor de Extensiones

  • En la pestaña Instalar desde un directorio especificamos la ruta a esa carpeta

  • Hacemos click en el botón Instalar.

  • Una vez instalado habrá que publicar un modulo (explicamos más adelante)

intalaciondirectorio

CREAR SLIDER

Una vez instalado el modulo Slide Show F5 podemos crear nuestro slider en el menú del backend (administrador), en Extensiones -> Gestor de Modulos

Hacemos click en el botón de nuevo, se nos abrirá una pantalla y tendremos que hacer click en el nombre de nuestro modulo Slide Show F5

Se nos abrirá la pantalla para empezar a crear nuestro slider

crearslider

Pestaña Modulo:

  • Título debemos de poner el título que deseemos.

  • Mostrar el título: seleccionamos si queremos mostrarlo o no

  • Posición seleccionamos una posición para nuestro slider

Pestaña Basic:

  • Ancho del Slider en px: este dato junto con el siguiente (alto del slider) sirven para establecer una proporción y poder ajustar el ancho y el alto en diferentes tamaños de pantallas

  • Alto del Slider en px: este dato junto con el anterior (ancho del slider) sirven para establecer una proporción y poder ajustar el ancho y el alto en diferentes tamaños de pantallas

  • Porcentaje del div contenedor (ancho en %): porcentaje del ancho del div que contiene al modulo que deseamos que ocupe el slider. No introducir símbolo de tanto por ciento (%) al asignarle un valor

  • Transición Automática: seleccionamos si queremos que la transición sea automática o solo manual (click en las flechas)

  • Dirección del cambio de Slide: sentido del movimiento (derecha, izquierda) del cambio de slide

  • Tipo de transición entre Slides: seleccionamos el tipo de transición entre los slides. También podemos seleccionar individualmente el tipo de transición en cada cambio de slide seleccionando el tipo de transición en el primer elemento del slide

  • Tiempo de transición entre Slides: seleccionamos el tiempo que tarda en realizarse la transición en los cambios de slide. También puedes seleccionar individualmente el tiempo de transición de cada cambio de slide en el primer elemento del slide

  • Tiempo de visibilidad del Slide: introducimos el tiempo en que será visible cada slide (el tiempo entre cambio y cambio de slide). También podemos seleccionar individualmente el tiempo de visibilidad del slide en el primer elemento del slide

  • Forzar ancho de pantalla: seleccionamos si deseamos forzar que el slider ocupe todo el ancho de la pantalla

  • Forzar pantalla completa: seleccionamos si deseamos forzar que el slider ocupe el ancho y el alto de la pantalla desde arriba (top:0)

  • Mostrar flechas de navegación entre Slides: seleccionamos si queremos mostrar las flechas de navegación entre slides

  • Flechas de navegación entre Slides fijas: seleccionamos si deseamos mostrar los indicadores de cambio de Slide Fijos

  • Tipos de indicadores de flecha: seleccionamos el tipo de indicador de flecha para el cambio de slide que deseemos

  • Color de las flechas de navegación:  seleccionamos el color de las flechas de navegación entre slides

  • Mostrar flecha de continuación lectura de página: seleccionamos si deseamos mostrar la flecha de continuación de lectura de la página (si hemos forzado pantalla completa). Nos lleva al final del modulo para continuar la lectura de la página

  • Animación flecha de navegación continuación de página: seleccionamos si queremos animar la flecha de continuación de lectura de la página (si hemos seleccionado mostrar la flecha de continuación lectura de página

  • Mostrar indicadores de Slide: seleccionamos si deseamos mostrar los indicadores de la posición de slide

  • Opacidad del Slider: seleccionamos la opacidad del slider

  • Margen horizontal del Slider en %: asignamos un margen a los slide, para darle una separación horizontal (izquierda y derecha) al slider. No introducir símbolo de tanto por ciento (%) al asignarle un valor

  • Margen vertical del Slider en %: asignamos un margen, para darle una separación vertical (arriba y abajo) al slider. No introducir símbolo de tanto por ciento (%) al asignarle un valor

  • Color de fondo del slider: podemos dar un color (backgroundcolor) al fondo del modulo. Si seleccionamos también una imagen de fondo entonces no actuará este color

  • Imagen de fondo del slider: podemos poner una imagen al fondo del modulo. Si hemos seleccionado también un color de fondo, esta imagen sustituirá al color del fondo

  • Animar imagen de fondo: seleccionamos si queremos animar la imagen del fondo (si hemos seleccionado una imagen de fondo)

  • Velocidad de animación del fondo (px/ms): seleccionamos la velocidad de animación de la imagen del fondo (se desplazara un pixel en los milisegundos que selecciones)

  • Tipo de fuente: seleccionamos un tipo de fuente que suelen disponer casi todos los dispositivos. También puedes seleccionar el tipo de fuente individualmente en cada capa de cada slide

  • Tipo de fuente de google: Si tu template es de Joomla F5 puedes introducir un tipo de fuente de google. También puedes seleccionar el tipo de fuente individualmente en cada capa de cada slide

  • Mostrar precarga: seleccionamos si queremos o no que aparezca una imagen de precarga

  • Mostrar línea de tiempo: seleccionamos si queremos mostrar la línea del tiempo de visibilidad de cada slid

  • Color de línea de tiempo: seleccionamos el color de la línea de tiempo

  • Altura de línea de tiempo : seleccionamos la altura de la línea de tiempo

pestanabasic

Pestaña Crear Slide

Crear Slide: al hacer click en el botón Crear Slide nos mostrará el encabezado del slide que vamos a crear y el encabezado y los fields básicos de la primera capa (layer). Seleccionando en el field Tipo de Layer el tipo de capa que queremos introducir se nos mostrarán los fields específicos del tipo de capa que hayamos seleccionado.

botoncrearslide

Fields que muestran todas las capas

  • Nombre del Layer: introducimos el nombre de la capa que queremos que se muestre cuando guardemos dicha capa. Por defecto aparecerá la palabra Layer seguido del número de capa que corresponda

  • Tipo de Layer: seleccionamos el tipo de capa que queremos introducir. Si es la primera capa no mostrará el tipo de texto, ya que esta primera capa ocupara el 100% del ancho y el alto del slider, en el tipo imagen se ampliará o disminuirá el tamaño de esta (si fuera necesario) y la centrará para ocupar todo el espacio y en el caso del tipo video mostrará todo el ancho del slider y el alto será proporcional

Fieds específicos de la primera capa

  • Nombre del Slide: introducimos el nombre del slide que queremos que se muestre cuando guardemos dicho slide. Por defecto aparecerá la palabra Slide seguido del número del slide que corresponda

  • Tiempo hasta el siguiente Slide en milisegundos: introducimos el tiempo en milisegundos que se visualizará este slide. En caso de dejarlo en blanco se aplicará el tiempo establecido en la pestaña Basic para todos los slide. Introducir sólo el valor numérico del tiempo

  • Tipo de Transición para este Slide: introducimos el tipo de transición con el que se realizará entre este slide y el siguiente. En caso de dejarlo en blanco se aplicará el tipo de transición establecido en la pestaña Basic para todos los slide

  • Tiempo de duración de la transición: seleccionamos el tiempo que tarda en realizarse la transición entre este slide y el siguiente. En caso de dejarlo en blanco se aplicará el tiempo establecido en la pestaña Basic para todos los slide

Fields específicos de las siguientes capas:

  • Ancho en %: Introducimos el ancho en tanto por cierto (en relación al ancho del slider) que ocupara la capa. No introducir símbolo de tanto por ciento (%) al asignarle un valor 

  • Alto en %: Introducimos el alto en tanto por cierto (en relación al alto del slider) que ocupara la capa. No introducir símbolo de tanto por ciento (%) al asignarle un valor

  • Opacidad: Introducimos la opacidad que queremos que tenga el background (por defecto 100%)

  • Insertar enlace. URL: http://www.: Introducimos la dirección URL con la que queremos enlazar el background del slide

  • Posición vertical: seleccionamos alguna de las posiciones verticales predeterminadas, que nos facilitan posicionar la capa

  • Posición desde arriba en %: introducimos el valor en tanto por ciento (en relación al alto del slider) de la distancia que queremos haya entre la posición superior del slider (top: 0 del slider) al borde superior de la capa. No introducir símbolo de tanto por ciento (%) al asignarle un valor 

  • Posición horizontal %: seleccionamos alguna de las posiciones horizotales predeterminadas, que nos facilitan posicionar la capa

  • Posición desde la izquierda en %: introducimos el valor en tanto por ciento (en relación al ancho del slider) de la distancia que queremos haya entre la posición izquierda del slider (left: 0 del slider) al borde izquierdo de la capa. No introducir símbolo de tanto por ciento (%) al asignarle un valor

  • Tiempo después de Slide en milisegundos: introducimos el tiempo que tiene que transcurrir entre que se muestre el slide al que pertenece la capa y la aparición de esta

  • Tiempo de visibilidad del elemento en milisegundos: Introducimos el tiempo que estará visible la capa

  • Transición de entrada: seleccionamos el tipo de transición para mostrar la capa

  • Tiempo de transición en milisegundos: introducimos el tiempo que tarda en mostrarse la capa

  • Transición salida: seleccionamos el tipo de transición para ocultar la capa

  • Tiempo de transición en milisegundos: introducimos el tiempo que tarda en ocultarse la capa

Fields específicos de tipo Background

  • Background: Introducimos el color que deseamos que tenga el background (por defecto negro)

tipobackground

Fields específicos de tipo Imagen

Seleccionar Imagen: seleccionamos la imagen que queremos incluir en la capa pulsando sobre el botón Select y se nos abre una ventana donde podemos seleccionar el directorio de nuestro hosting en el desplegable Directorio, subir una imagen desde nuestro dispositivo local seleccionando la imagen que deseemos incluir pulsando el botón Elegir archivo y una vez seleccionado pulsamos el botón Iniciar subida. También podemos introducir la dirección de la imagen en el input URL de la imagen. Una vez hayamos completado la selección de la imagen o la inclusión de una URL pulsamos el botón Insertar.

tipoimagen

Fields específicos de tipo texto

Texto: incluimos el texto que queremos que aparezca en la capa

Tipo de fuente: seleccionamos un tipo de fuente que suelen disponer casi todos los dispositivos. También podemos seleccionar el tipo de fuente por defecto para todas las capas en la pestaña Basic

Tipo de fuente de google: si tu template es de Joomla F5 puedes introducir un tipo de fuente de google. También puedes seleccionar el tipo de fuente por defecto para todas las capas en la pestaña Basic

Tamaño del texto para PC (tablet y mobil automático) en px:  introducimos el tamaño del texto aproximado teniendo como referencia una pantalla de tipo PC. Este tamaño tendrá en cuenta para ajustarse a los distintos tipos de pantalla el tamaño de esta y el tamaño del div contenedor en el que se incluya, cuyo ancho y alto debemos introducir en los siguientes fields. Introducir solo el valor del tamaño del texto

Ancho en %: introducimos el ancho del div contenedor del texto. No introducir símbolo de tanto por ciento (%) al asignarle un valor

Alto en %: introducimos el alto del div contenedor del texto. No introducir símbolo de tanto por ciento (%) al asignarle un valor

Alineación del texto: seleccionamos la alineación del texto

Color de texto: seleccionamos el color del texto

tipotexto

Fields específicos de tipo video

Seleccionar fuente del video: seleccionamos la fuente de la que vamos a incluir el video (youtube, vimeo o HTML5)

Código del Video (Youtube o Vimeo) o Url (video mp4 para html5): introducimos el código del video de youtube, vimeo o URL del video de HTML5. Si es un video de Youtube el código a seleccionar se encuentra en la dirección URL del video a partir de “v=“ por ejemplo si la dirección fuera https://www.youtube.com/watch?v=kK1Z1RlPw el código seríá  kK1Z1RIPw. Si es un video de Vimeo sería los últimos números de la dirección URL por ejemplo si la dirección fuera https://vimeo.com/16584628 el código sería 16584628.

Imagen previa video: seleccionamos si queremos incluir una imagen previa al video en los videos, podemos incluir una imagen personalizada (que seleccionamos en el siguiente field) y si el video es  de Youtube o Vimeo podemos seleccionar la imagen por defecto que establece Youtube o Vimeo al video. 

Seleccionar imagen del video: seleccionamos la imagen que queremos previa del video (previamente debemos haber seleccionado imagen personalizada en el field anterior) pulsando sobre el botón Select y se nos abre una ventana donde podemos seleccionar el directorio de nuestro hosting en el desplegable Directorio, subir una imagen desde nuestro dispositivo local seleccionando la imagen que deseemos incluir pulsando el botón Elegir archivo y una vez seleccionado pulsamos el botón Iniciar subida. También podemos introducir la dirección de la imagen en el input URL de la imagen. Una vez hayamos completado la selección de la imagen o la inclusión de una URL pulsamos el botón Insertar.

Ancho en % del Slide (el alto será el proporcional): introducimos el ancho del video, el alto será proporcional con la proporción por defecto a la que seleccionemos en el field siguiente. No introducir símbolo de tanto por ciento (%) al asignarle un valor

Proporción del video: seleccionamos la proporción que tendrá el video y que se aplicará en relación al ancho introducido en el field anterior

Autoplay: seleccionamos si queremos que al cargar el video, este se visualice directamente (no se aplicará si hemos seleccionado incluir imagen previa), también podemos seleccionar que el autoplay sólo se realice la primera vez que se cargue el video

Después de terminar: seleccionamos si queremos que el cuando finalice la visualización del video se visualice el siguiente slide o que permanezcamos en el mismo del video

Controles video (no actúa en Vimeo): seleccionamos si queremos mostrar u ocultar los controles de video. En Vimeo no se podrán ocultar

tipovideo

Fields específicos de tipo Html

Html: incluimos el html que queremos que incluir en la capa

Ancho en %: introducimos el ancho del div contenedor del html. No introducir símbolo de tanto por ciento (%) al asignarle un valor

Alto en %: introducimos el alto del div contenedor del html. No introducir símbolo de tanto por ciento (%) al asignarle un valor

tipohtml