jQuery jCarousel Script

• Pode 17, 2024

O jQuery tornou fácil adicionar imagens a sites. Existem muitos scripts jQuery lançados sob as licenças MIT e / ou GPL. A maioria destes são scripts plug-and-play (plug-in) que não exigem nenhum conhecimento de programação para usar no seu site ou instalar no site do cliente. Você pode considerar adicionar scripts jQuery aos seus serviços de design.

Um desses scripts jQuery de Jan Sorgalla é o jCarousel. Este plug-in pode ter muitos aplicativos para gráficos e texto. A principal função do script é rolar o conteúdo na horizontal ou na vertical. O conteúdo pode ser estático ou carregado dinamicamente via Ajax, JavaScript, PHP ou Flickr. Obviamente, essa segunda opção requer familiaridade com esses idiomas. O jCarousel também funciona com o Thickbox 3, para que uma imagem de tamanho grande se abra no Thickbox quando a imagem em miniatura é clicada no carrossel.

A maior parte do código do script é referenciada na seção Head da página da web. Você precisará da biblioteca jQuery e do código-fonte jCarousel e arquivos da folha de estilo. O que é legal nesse plug-in é que ele pode ser "esfolado" pelo CSS para ter muitos looks. O conteúdo a ser rolado pelo script é colocado no corpo da página da Web em uma lista básica da UL.

Você tem várias opções para configurar o script, incluindo a adição e animação personalizadas. Pode funcionar com rolagem automática ou botões de navegação. Outro recurso interessante é que a largura do carrossel é redimensionada automaticamente para caber na janela do navegador. Ele pode ser configurado para mostrar mais ou menos imagens, dependendo do tamanho do navegador ou configurado para ter um número definido de imagens com espaçamento flexível entre as imagens, conforme necessário. Você pode ter mais de um carrossel em uma página e dar a cada um deles uma aparência diferente.

A integração com o fluxo de fotos do Flickr e a API do Flickr é um recurso interessante, não visto na maioria dos scripts. Foi testado para funcionar em vários navegadores, incluindo o notório Internet Explorer 6.

Você pode estar se perguntando por que você usaria isso em vez de uma animação gif simples que você pode criar no Photoshop. O principal motivo é a facilidade de atualizar o carrossel após a instalação. É mais fácil alternar o conteúdo da lista UL do que criar um novo gif toda vez que você precisar exibir um conjunto diferente de imagens.

//sorgalla.com/projects/jcarousel/

Instruções De Vídeo: jQuery Tutorial #6 - Building a jQuery Image Slider (Pode 2024).