jQuery jCarousel Script

• Abril 25, 2024

jQuery ha hecho que agregar imágenes a sitios web sea una tarea fácil. Hay muchas secuencias de comandos jQuery lanzadas bajo las licencias MIT y / o GPL. La mayoría de estos son scripts plug-and-play (plug-in) que no requieren ningún conocimiento de programación para usar en su sitio web o instalar en el sitio de su cliente. Es posible que desee considerar agregar scripts jQuery a sus servicios de diseño.

Uno de esos guiones jQuery de Jan Sorgalla es jCarousel. Este complemento puede tener muchas aplicaciones para gráficos y texto. La función principal del script es desplazar el contenido horizontal o verticalmente. El contenido puede ser estático o cargado dinámicamente a través de Ajax, JavaScript, PHP o Flickr. Por supuesto, esta segunda opción requiere familiaridad con estos idiomas. jCarousel también funciona con Thickbox 3 para que una imagen de gran tamaño se abra en Thickbox cuando se hace clic en la imagen en miniatura en el carrusel.

La mayor parte del código para el script está referenciado en la sección Head de la página web. Necesitará la biblioteca jQuery y el código fuente jCarousel y los archivos de hoja de estilo. Lo bueno de este complemento es que CSS puede "pelarlo" para que tenga muchas miradas. El contenido a ser desplazado por el script se coloca en el cuerpo de la página web en una lista básica de UL.

Tiene varias opciones para configurar el script, incluida la adición de animación personalizada y suavizado. Puede funcionar con desplazamiento automático o botones de navegación. Otra buena característica es que el ancho del carrusel cambia de tamaño automáticamente para adaptarse a la ventana del navegador. Puede configurarse para mostrar más o menos imágenes según el tamaño del navegador o configurarse para tener un número determinado de imágenes con un espacio flexible entre las imágenes según sea necesario. Puede tener más de un carrusel en una página y darles a cada uno un aspecto diferente.

La integración con la secuencia de fotos de Flickr y la API de Flickr es una buena característica que no se ve en la mayoría de los scripts. Se ha probado que funciona en varios navegadores, incluido el conocido Internet Explorer 6.

Tal vez se pregunte por qué usaría esto en lugar de una simple animación gif que puede crear en Photoshop. La razón principal es la facilidad de actualizar el carrusel una vez que está instalado. Es más fácil cambiar el contenido de la lista UL que crear un nuevo gif cada vez que necesite presentar un conjunto diferente de imágenes.

//sorgalla.com/projects/jcarousel/

Instrucciones De Vídeo: jQuery Tutorial #6 - Building a jQuery Image Slider (Abril 2024).