Opções Do Fx Do Plugin De Ciclo Jquery


Eu tenho uma página com dois slideshows usando o plugin jQuery MaxImage 2.0 (que, por sua vez, usa jQuery Cycle). MaxImage permite que você passe as opções para o plugin de ciclo. O problema que estou tendo é que apenas o último conjunto de opções de ciclo tem efeito. Isso também parece ser o caso com algumas outras opções do MaxImage, incluindo fillElement. Heres my jQuery: e tudo em um jsfiddle - jsfiddle. netseanhawkridgeFNgXe1 - se você excluir a segunda função, você verá o que quero dizer. Perguntou 15 de março às 10: 07 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 auxiliar personalizado do Maximage 2.0 que permite que qualquer elemento na 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 imagens dentro de elementos contendo, e não apenas a janela do navegador. Você apenas 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. Atenção: este exemplo é destinado a usuários experientes. Lembre-se, com FillElement, você pode realizar um esquema de compensação muito facilmente. Basta configurar o seu elemento contendo onde 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 graxa de cotovelo, eles ainda podem ser realizados (e são melhores). O que estou fazendo com o código abaixo é a criação de offsets de cortinas que vivem na frente da apresentação de slides. Eu chamo essas cortinas. Eu fiz isso com o HTML e 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 está redimensionando 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. Nós podemos fazer isso com a opção backgroundSize que é passada para o Maximage. Basta definir 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 offsets apenas 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 criar 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: 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 é 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. Cycle2 Cycle2 é um plugin de apresentação de slides versátil para o jQuery construído em torno da facilidade - de uso. Ele suporta um estilo de inicialização declarativa que permite a personalização completa sem scripts. Simplesmente inclua o plugin, declare seu markup, e Cycle2 faz o resto. Destaques: Suporta todos os navegadores. Declarativo: não há necessidade de scripts. Responsável: controle completamente sua apresentação de slides via css (redimensionar esta página para ver) Personalizável: substituição de opção por slide Extensível: API totalmente personalizável (em uma base de apresentação por slideshow, se desejar) Suporta carregamento de imagem e inicialização atrasada Mais inteligente: suporta carregamento progressivo da imagem Funcionalidade exclusiva para pagers, legendas, sobreposições e controles prevnext Suporte para gesto de deslocamento em dispositivos móveis Transfiguração, deslocamento, shuffle, mosaico e transições de carrossel Deslizantes marcáveis ​​e Muito mais Como funciona É muito simples, mesmo sua avó poderia usá-lo. Vai assim: Inclua jQuery e o plugin Cycle2 em sua página. Declare a marcação da apresentação de slides como mostrado nas inúmeras demonstrações. Sente-se e aproveite a apresentação de slides enquanto toma uma bebida fresca. Precisa de mais detalhes Ok, heres the deal: Cycle2 fornece uma função de plugin chamada ciclo. Essa função é invocada em um elemento de contêiner. Cada imagem no recipiente se torna um slide. As opções controlam como e quando os slides são transitados. Mas ela é o que é. Você não precisa chamar ciclo e passar suas opções. Você declara suas opções como atributos no elemento de apresentação de slides e o Ciclo2 agarra-os a partir daí. O que você diz Você preferiu definir suas opções por meio do script do que na marcação Ok, faça o seu caminho. Você não precisa declarar suas opções na marcação (mas é divertido), você pode invocar o ciclo a partir do seu próprio código e passar suas opções de forma antiquada. Você pode até agarrar o objeto API e injetar sua própria implementação de qualquer um dos métodos da API que você escolher. Utilização responsiva consultas de mídia. Não use consultas de mídia. tanto faz. O Cycle2 não se importa com os plugins do honeybadger de slideshows. A maioria das demos neste site usa desenhos de slides fluidos onde o tamanho da apresentação de slides se ajusta à medida que a janela é redimensionada. Isso é acompanhado por uma regra de estilo simples como essa. Ciclo-apresentação de slides. Suas apresentações de slides podem ser de largura fixa ou largura de fluido, ou podem se adaptar a pontos de interrupção de consulta de mídia. Você decide. As doações são uma ótima maneira de dizer Obrigado, malsup. Eu sei que você quer, então não seja tímido. Todas as doações são muito apreciadas e ajudam a financiar o desenvolvimento futuro. Vá em frente, clique no botão Ocasionalmente, você vê os plugins com um botão de doação, o Ciclo 2 merece cada centavo doado. Cap doff para malsup t. cotKktpyFK5S jquery

Comments