Lsaquolsaquo home jQuery Cycle Plugin Confira Cycle2. O mais recente na linha do ciclo de slideshows. O jQuery Cycle Plugin é um plugin de apresentação de slides que suporta muitos tipos diferentes de efeitos de transição. Ele suporta pausar-em-hover, auto-stop, auto-fit, antes de reencaminhamentos, disparadores de cliques e muito mais. Ele também suporta, mas não requer, o Easing Plugin. Como funciona O plugin fornece um método chamado ciclo que é invocado em um elemento de contêiner. Cada elemento secundário do recipiente torna-se um slide. As opções controlam como e quando os slides são transitados. ScrollRight (clique) As imagens são usadas nestas demonstrações porque elas parecem legais, mas as apresentações de slides não se limitam a imagens. Você pode usar qualquer elemento que desejar. Procurar efeitos Use a página do Navegador de efeitos para visualizar os efeitos disponíveis. Veja Mais Demonstrações e Exemplos O Plug-in de Ciclo oferece muitas opções para personalizar sua apresentação de slides. Os valores da opção padrão podem ser substituídos passando um objeto de opção para o método do ciclo, usando metadados no elemento do contêiner ou redefinindo os valores em seu próprio código. Para obter mais informações sobre as opções, consulte a página de Referência de opções. Agradecimentos Agradecimentos especiais a Torsten Baldes. Matt Oakes e Ben Sterling pelas muitas idéias que me começaram a escrever Ciclo em 2007. Esta demo explica como é fácil usar as opções de jQuery Cycle, bem como algumas das melhores do Maximage 2.0. Você pode ver como as funções de retorno de chamada são usadas, bem como velocidade, fx, tempo limite, paginação e realmente qualquer outra opção do ciclo jQuery. Esta demo também usa a função de ajuda personalizada do Maximage 2.0 que permite que qualquer elemento da apresentação de slides seja maximizado, como as imagens de fundo nos slides. Neste caso, maximizamos um vídeo HTML5 em nossa apresentação de slides, bem como um vídeo do Youtube. Eu queria uma maneira de mostrar como Maximage2 permite que você maximize as imagens dentro de elementos contendo, e não apenas a janela do navegador. Você simplesmente passa um seletor para a opção Maximus2s fillElement e você é bom para ir. Ele também usa um fx diferente do jQuery Cycle para mostrar o quão fácil isso é. O backgroundSize Maximage2 pode ser uma string (cobrir ou conter) para determinar como a imagem preenche o recipiente. A tampa enche todos os espaços disponíveis com a imagem enquanto contém maximiza a imagem dentro do espaço, mas não excede o espaço. Estes serão os dois cenários mais comuns, mas é muito possível que alguém precise de alguma funcionalidade diferente. Bem Maximuse2 permite que você escreva sua própria função aqui e este é um exemplo de como isso é feito. Cuidado: Este exemplo é destinado a usuários experientes. Lembre-se, com o FillElement, você pode realizar um esquema de compensação muito facilmente. Basta configurar o seu elemento contendo onde você deseja que as imagens sejam exibidas. Como a primeira regra do Maximage 2.0 é tentar manter as mãos desligadas e fora do seu caminho, o suporte incorporado para offsets foi descartado com a versão 2.0. Isso não significa que eles não são possíveis. Com uma pequena gordura no coto, eles ainda podem ser realizados (e são melhores). O que estou fazendo com o código abaixo é criar compensações de cortinas que vivem na frente da apresentação de slides. Eu chamo essas cortinas. Eu fiz isso com o HTML e o CSS abaixo para deslocamentos de 100px nas bordas superior, direita, inferior e esquerda da tela. Uma vez que tenhamos nossas cortinas, a apresentação de slides ainda é redimensionada para a janela completa e queremos que ele maximize dentro da área visível. Nosso tamanho de janela menos nossas compensações. Por esse motivo, você precisa personalizar a função que redimensiona a janela. Podemos fazer isso com a opção backgroundSize que é passada para o Maximage. Basta configurar o seu verticalOffset e horizontalOffset no backgroundSize (exemplo JS abaixo) para dimensionar suas imagens de slides na área visível. Para que as imagens contidas dentro dos deslocamentos simplesmente troquem com base na altura, com base em regras de largura na função backgroundSize como esta: Maximage2 pode ser usado como uma ferramenta para tornar quase qualquer coisa um elemento de fundo em tela cheia muito facilmente. Este exemplo mostra como ele pode ser usado para criar um vídeo HTML5 de fundo. NOTA: os recuos de vídeo HTML5 para IE7 amp IE8 atualmente não preenchem a tela dentro de uma apresentação de slides. Estou trabalhando nisso atualmente, mas se isso é importante para você, use outra apresentação de slides por enquanto e verifique as atualizações, pois isso provou ser mais complexo do que o esperado.
No comments:
Post a Comment