Introdução Todas as demonstrações nesta página, e quase todas as demonstrações neste site, requerem código zero. As apresentações de diapositivos são totalmente orientadas por marcação. Tudo o que é necessário é incluir o jQuery eo plugin Cycle2 usando tags de script como esta: Default Slideshow A maneira mais simples absoluta de começar com o Cycle2 é usar marcação como esta: cycle-slideshow é um classname especial que diz Cycle2 para auto-initialize A apresentação de diapositivos quando a página é carregada. O resultado é visto abaixo: Configuração Opções As opções são definidas usando os atributos do ciclo de dados. O exemplo abaixo mostra o padrão fx. Pause-on-hover. E as opções de velocidade sendo substituídas. Apresentação de diapositivos manual O exemplo seguinte mostra como ter uma apresentação de diapositivos manual definindo a opção de tempo limite como zero. E também mostra como ligar os controles prev e next. Para obter mais informações sobre os controles prevnext, consulte o PrevNext demo. lsaquolsaquo home jQuery Cycle Plugin Confira Cycle2. O mais recente da linha Ciclo de slideshows. O jQuery Cycle Plugin é um plugin de slides que suporta muitos tipos diferentes de efeitos de transição. Ele suporta pause-on-hover, auto-stop, auto-fit, antes de callbacks, disparadores de clique e muito mais. Também suporta, mas não requer, o Plugin de Facilidade. Como Funciona O plugin fornece um método chamado cycle que é invocado em um elemento container. Cada elemento filho do recipiente torna-se um slide. As opções controlam como e quando os slides são transferidos. ScrollRight (clique) As imagens são usadas nestas demos porque elas parecem legais, mas as apresentações de slides não se limitam a imagens. Você pode usar qualquer elemento que você deseja. Visualizar Efeitos Use a página Navegador de Efeitos para visualizar os efeitos disponíveis. Veja Mais Demonstrações e Exemplos O Plugin de Ciclo oferece muitas opções para personalizar sua apresentação de slides. Os valores de opção padrão podem ser substituídos passando um objeto de opção para o método cycle, usando metadados no elemento container ou redefinindo os valores em seu próprio código. Para obter mais informações sobre opções, consulte a página Referência de opções. Agradecimentos Agradecimentos especiais a Torsten Baldes. Matt Oakes e Ben Sterling para as muitas idéias que me começou a escrever Ciclo em 2007. Esta demonstração explica como é fácil usar opções de Ciclo jQuery, bem como alguns dos melhores do Maximage 2.0. Você pode ver como as funções de retorno de chamada são usadas, bem como a velocidade, fx, tempo limite, paginação e realmente qualquer outra opção de ciclo jQuery. Esta demonstração também usa a função auxiliar personalizada do Maximage 2.0 que permite que qualquer elemento na apresentação de slides seja maximizado como as imagens de plano 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 maximizar imagens dentro de elementos que contêm também, não apenas a janela do navegador. Basta passar um seletor para a opção FillElement Maximage2s e você está pronto para ir. Ele também usa um fx diferente do jQuery Cycle para mostrar como é fácil. O backgroundSize Maximage2 pode ser uma string (cover ou contain) para determinar como a imagem preenche o contêiner. Capa preenche 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 Maximage2 permite que você escreva sua própria função aqui e este é um exemplo de como isso é feito. Cuidado: Este exemplo destina-se a usuários especializados. Lembre-se, com FillElement você pode muitas vezes realizar um esquema de compensação muito facilmente. Basta definir o elemento que contém onde você deseja que as imagens sejam exibidas. Como a primeira regra do Maximage 2.0 é tentar manter as mãos fora e fora do seu caminho, o suporte incorporado para offsets foi descartado com a versão 2.0. Isso não significa que eles arent possível. Com um pouco de graxa de cotovelo eles ainda podem ser realizados (e são melhores). O que estou fazendo com o código abaixo é criar cortinas offsets que vivem na frente da apresentação de slides. Eu chamo essas cortinas. Eu fiz isso com o HTML e CSS abaixo para 100px deslocamentos na parte superior, direita, inferior e bordas esquerdas da tela. Uma vez que temos nossas cortinas para cima, o slideshow ainda está redimensionando para a janela cheia e queremos tê-lo maximizar dentro da área visível. Nosso tamanho de janela menos nossas compensações. Por esta razão você tem que personalizar a função que redimensiona a janela. Podemos fazer isso com a opção backgroundSize que é passada para Maximage. Basta definir o verticalOffset e horizontalOffset em backgroundSize (exemplo JS abaixo) para dimensionar suas imagens de slideshow dentro da área visível. Para ter imagens contidas dentro dos deslocamentos apenas troque o baseado na altura, baseado nas réguas da largura na função do backgroundSize como esta: Maximage2 pode ser usado como uma ferramenta para fazer quase qualquer coisa um elemento de fundo fullscreen muito fàcilmente. Este exemplo mostra como ele pode ser usado para criar um vídeo HTML5 em segundo plano. NOTA: as restrições 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 for importante para você, por favor, use outra apresentação de slides de momento e verifique se há atualizações, pois isso se mostrou mais complexo do que o esperado.
No comments:
Post a Comment