jQuery.JContent - Crear sliders de contenido para nuestra página web: mostrar fotos, imágenes + texto, videos, información dinámica mediante Ajax.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Este plugin gratuito para jQuery, es una excelente opción en aquellos casos que necesitemos colocar en nuestra página web, un slider de contenido para que el usuario pueda ir cambiando automáticamente al presionar un botón. Dentro del slider es posible mostrar cualquier contenido HTML que necesitemos, por ejemplo: Sólo fotos, imágenes + texto, Texto + Videos, etc ..

Los sliders de contenido, son muy prácticos para mostrar mucha información de forma interactiva con el usuario o visitante de nuestra página web, y también muy útil para cargar muchos datos en un área pequeña o con poco espacio. También, es posible utilizarlo para mostrar diapositivas.

Además, los sliders de contenido, es uno de los mejores métodos para dar vida a nuestro sitio web. Con jQuery se puede crear de forma muy fácil todo esto, utilizando controles deslizantes para la navegación de contenido y presentaciones de diapositivas.

En esta página podrás descargar varios ejemplos, algunos de ellos simples, y también otros realizados en Ajax.

EL script no es complicado de instalar y configurar, y requiere pocas líneas de código para ponerlo en funcionamiento. A continuación puedes ver mas información sobre el script.

Mas información sobre el programa.

Indice - Contenido.

  1. Características principales del script.
  2. Posibles usos del slider de contenido.
  3. Ejemplos y vista previa de los sliders.
    1. Slider horizontal y slider vertical.
    2. Slider para mostrar videos.
    3. Sliders con contenido dinámico mediante Ajax.

 

1 - Características principales del script.

  • Dentro de los sliders, es posible mostrar cualquier tipo de contenido HTML.
  • Se pueden insertar múltiples sliders dentro de la misma página web.
  • La función de SlideShow, si se desea se puede configurar para que muestre el contenido de forma automática.
  • Crear sliders horizontales y sliders verticales.
  • Fácil de personalizar la apariencia y otras opciones.
  • Funciona en todos los navegadores web actuales. ( Ver mas abajo la lista )
  • Es completamente gratis y de libre uso ( Es software libre con licencia GPL y MIT)
  • Soporte Ajax. Esto permite cargar de forma dinámica contenido desde archivos XML.
  • Además de contenido HTML, como es texto, fotos, imágenes etc .., soporta la inserción de videos, Flash, Iframes o marcos.

2 - Posibles usos del slider de contenido.

Puede ser muy práctico e ideal para:

  • Mostrar un catálogo de productos con las novedades, ofertas, etc .., cargando una foto o imagen mas un texto descriptivo.
  • Mostrar sólo imágenes y fotos, similar a un pase de diapositivas. Se puede configurar para que se visualice de forma automática sin intervención del usuario, o mediante controles de navegación.
  • Para sitios webs de multimedia. Por ejemplo, para mostrar un conjunto de videos, en un espacio concreto. Por ejemplo, si tienes 5 videos, el usuario podrá ir cambiando en el área de visualización, cual de los videos quiere ver.
  • Para crear una sección de noticias y novedades del sitio.
  • Para mostrar y cargar contenido de forma dinámica mediante el uso e implementación de ajax.
  • Muchas otras.

3.1 - Slider horizontal y slider vertical.

Este ejemplo lo puedes encontrar en la página del autor, y también en el archivo de descarga ( Fichero jcontent-examples.htm).

Como se puede ver en la captura de pantalla, requiere de muy poco código HTML para implementar el slider, sólo requiere la creación de un DIV principal, y dentro de este, otros divs sin ID.

La estructura HTML para la creación de los sliders es la siguiente:

<div id="demo">
<a title="" href="#" class="prev"></a>
<div class="slides">
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
<a title="" href="#" class="next"></a>
</div>

Y en la función jContent, se pueden configurar algunas opciones, por ejemplo la orientación del Slide y la duración del efecto de transición o cambio de contenido.

El código fuente del script de inicialización.

$("div#demo").jContent({orientation: 'vertical',
easing: 'easeOutCirc',
duration: 500});

 

Horizontal.

Vertical.

Nota: En el archivo jcontent-examples.htm, también podrás ver estos ejemplos:

  • Slider automático, es decir que empezará la visualización sin necesidad de que el usuario haga clic en las flechas.
  • Slider continuo, es decir que cuando llegue al último contenido, volverá a mostrarse desde el comienzo.

También es necesario añadir la referencia a los archivos jquery.jcontent.0.6.min.js, jquery.easing.min.1.3.js y jquery-1.5.2.min.js ( Librería jQuery y el archivo del plugin necesario para que funcione Slider). Todos estos archivos se deben definir en la sección HEAD de la página.

También, en la sección HEAD, se definen las funciones que inicializan los sliders. En esas funciones se debe colocar el nombre del DIV principal y las demás opciones de configuración, por ejemplo su orientación y el tiempo de transición.

3.2 - Slider para mostrar videos.

Los sliders de videos, son muy útil para mostrar varios videos en un espacio reducido. El usuario de la página, podrá ir cambiando los videos, presionando las flechas atrás o adelante.

Aquí puedes ver una vista previa o captura de pantalla de los videos dentro del slider.

El funcionamiento y configuración es prácticamente igual que en los Sliders de contenido mostrados anteriormente, salvo que en la función de inicialización ( La que se coloca en la sección HEAD), se deberá añadir algunos otros parámetros extras, por ejemplo definir:

  • La variable Videos en True.
  • Definir el ancho del video
  • Definir el alto del video

Por ejemplo, aquí puedes ver el código fuente del script de inicialización cuando necesitamos mostrar videos dentro del Slider:

Nota: Este, y los demás ejemplos, los puedes ver en la página jcontent-video-example.htm que se incluye en el archivo de descarga.

3.3 - Sliders con contenido dinámico mediante Ajax.

Para mostrar contenido dinámico dentro de los sliders utilizando Ajax, se puede crear un archivo XML con el código fuente de los DIVS que contienen la información.

Para implementar esta opción utilizando ajax, se realiza de la misma forma que en los demás ejemplos, salvo que se añade un parámetro extra en la función de inicialización. Este parámetro se llama XML, y aquí se debe especificar la ruta del fichero XML, por ejemplo:

Código fuente.

Esta es una vista previa de un archivo XML de ejemplo:

 


Requerimientos de instalación y uso.

Requiere : Librería jQuery ( Ya se incluye en el archivo ZIP)

Navegadores web compatibles:

  • Internet explorer 8 y 9, IE7, IE6
  • FireFox 2.0 o superior.
  • Google Chrome.
  • Opera 9 o superior.
  • Safari (Mac) .

Videos tutoriales.

No hay video tutoriales disponibles para este script..

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
Licencia:
Gratis
Versión:
0.6
Idioma:
Inglés
Programa actualizado:


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: