Categoria: Efeitos.
A biblioteca jQuery fornece várias técnicas para adicionar animação a uma página da web. Isso inclui animações simples e padrão que são usadas com frequência e a capacidade de criar efeitos personalizados sofisticados.
Execute uma animação personalizada de um conjunto de propriedades CSS.
.clearQueue ()
Remova da fila todos os itens que ainda não foram executados.
Defina um temporizador para atrasar a execução de itens subseqüentes na fila.
Execute a próxima função na fila para os elementos correspondentes.
Exibe os elementos correspondentes, desbotando-os para opacos.
Oculte os elementos correspondentes, tornando-os transparentes.
Ajuste a opacidade dos elementos correspondentes.
.fadeToggle ()
Exiba ou oculte os elementos correspondentes animando sua opacidade.
Pare a animação em execução no momento, remova todas as animações na fila e conclua todas as animações dos elementos correspondentes.
Ocultar os elementos correspondentes.
jQuery. fx. interval.
A taxa (em milissegundos) na qual as animações são disparadas.
jQuery. fx. off.
Desative globalmente todas as animações.
jQuery. speed.
Cria um objeto contendo um conjunto de propriedades prontas para serem usadas na definição de animações personalizadas.
Mostrar ou manipular a fila de funções a serem executadas nos elementos correspondentes.
Exibe os elementos correspondentes.
Exibe os elementos correspondentes com um movimento deslizante.
.slideToggle ()
Exibe ou oculta os elementos correspondentes com um movimento deslizante.
Esconda os elementos combinados com um movimento deslizante.
Pare a animação atualmente em execução nos elementos correspondentes.
& lsaquo; & lsaquo; Cycle homejQuery Cycle Plugin - Demonstrações para iniciantes.
Baixe o Plugin de Ciclo.
1 - Defina sua marcação e estilos.
Todos os exemplos nesta página usam as seguintes marcações e CSS:
2 - Escolha um efeito.
Você pode escolher entre qualquer um dos seguintes efeitos nomeados: blindX blindY blindZ cover curtainX curtainY desvanece fadeZoom growX growY scrollUp scrollDown scrollLeft scrollRight scrollHorz scrollVert shuffle slideX slideY toss turnUp turnDown turnLeft turnDireita descobre zunido zoom Você especifica o nome do efeito passando uma string para o método de ciclo ou usando um objeto de opções e definindo a propriedade fx para o nome do efeito desejado.
3 - Escolha os valores de velocidade e tempo limite.
Em seguida, você pode optar por valores de velocidade e tempo limite para controlar com que velocidade e com que frequência as transições de slide ocorrem. A opção de velocidade define o número de milissegundos necessários para fazer a transição de um slide para o seguinte. A opção de tempo limite especifica quantos milissegundos irão decorrer entre o início de cada transição.
4 - Escolha Outras Opções.
Existem muitas outras opções para escolher. Dois que você pode achar útil são pausados e aleatórios. A opção de pausa faz com que a apresentação de slides pause quando o mouse passa sobre o slide. A opção aleatória faz com que os slides sejam mostrados em ordem aleatória, em vez de sequenciais.
Coisas a ter em mente.
- Regras CSS! Ao criar suas apresentações de slides, lembre-se de que os efeitos de animação funcionam melhor quando o contêiner e o slide têm uma caixa fixa.
- Lembre-se de que todo elemento filho do contêiner se torna um slide!
Opções de fx do slideshow jQuery
Obter via App Store Leia este post em nosso aplicativo!
jQuery Cycle: Como alterar o efeito de transição em uma apresentação de slides em execução.
Eu estou usando o antes: opção do plugin jQuery Cycle para determinar se o usuário está se movendo para a esquerda ou para a direita através do slideshow, e eu gostaria de animar adequadamente (scrollLeft, scrollRight).
Infelizmente, não consigo encontrar como alterar as opções do plugin (o efeito de transição) enquanto ele está em execução.
Parece que este é o efeito que você deseja: jsfiddle / zvVcD /
Se for esse o caso, você só precisa usar o efeito "scrollHorz" e, em seguida, definir os gatilhos anterior e seguinte, assim:
Aqui está a abordagem mais geral:
Você pode alterar o scrollLeft e o scrollRight para o que quiser. Observe que estou usando as classes. prev,.next e. cycler para o botão anterior, botão next e recipiente cycler, respectivamente.
Opções de fx do slideshow jQuery
Obter via App Store Leia este post em nosso aplicativo!
Plugin de jQuery ciclo, velocidade de apresentação de slides.
Eu tenho esta apresentação de slides jQuery do plugin JQuery Cycle.
Tem sido ajustado um pouco, mas eu queria saber se alguém sabia como fazê-lo ir mais rápido ou mais devagar? ajustar a velocidade, eu olhei para um tutorial dele no site da ficha, mas não funcionou.
Isso leva 1 segundo para desaparecer, em intervalos de 8 segundos.
Atualize seu código para o seguinte, você tem que passar opções para o comando cycle:
Você pode atualizar a variável de velocidade (ele usa ms), você tem várias outras opções que você pode usar, eu gosto de usar esta referência de opção de ciclo de jquery.
Diapo.
e você pode decidir o tempo de transição de qualquer slide.
Nesse caso, você pode ver um vídeo do Vimeo e uma tabela de preços.
Introdução.
Olá. Primeiro de tudo, desculpe-me pelo meu mau inglês, segundo, desculpe-me se você vai encontrar alguns bugs no slideshow Diapo.
Slideshow Diapo é um projeto de código aberto. Você pode sugerir alterações ou melhorias, se quiser. Você pode baixá-lo e usá-lo gratuitamente, você também pode incluí-lo em seus projetos e vendê-lo como parte de um trabalho maior (neste caso, por favor, considere uma doação).
Slideshow Diapo é testado em novos navegadores, mas eu tentei torná-lo compatível com as versões antigas do Internet Explorer também (8 e 7). Mas eu não acho que vou gastar muitas horas para melhorar esse recurso, desculpe.
Slideshow Diapo requer jQuery 1.4 + e outros plugins jQuery são necessários se você quiser usar algumas funcionalidades: jQuery Easing (gsgd. co. uk/sandbox/jquery/easing/), jQuery HoverIntent (cherne / brian / recursos / jquery. hoverIntent. html), jQuery Mobile (jquerymobile /, mas nem todos os plugins). Esses plugins estão incluídos no zip que você pode baixar na parte inferior desta página.
Slideshow Diapo é o primeiro plugin jQuery que eu desenvolvo a partir do zero e eu distribuo de graça, então seja gentil.
Opções
Você também pode usar mais de um efeito: 'curtainTopLeft, mosaic, bottomLeftTopRight'
Download, suporte e doações. se você quiser.
Slideshow Diapo é um plugin de código aberto e você pode usá-lo gratuitamente. Mas se você quiser me ajudar a melhorá-lo, mantê-lo atualizado, etc., considere uma doação gratuita ou compre algo em meu portfólio no ThemeForest.
Compre uma cerveja, um café ou um sorvete para minha filha. Decida o valor que você preferir.
Compre algo.
Compre minhas obras: aqui estão meus portfólios no Themeforest e no CodeCanyon.
Se você quiser, pode me contratar no manu no pixedelic dot com (inclua alguns detalhes sobre o seu projeto e não peça suporte neste endereço)
Você pode visitar o Grupo Diapo do Google e fazer sua pergunta lá (postar um link que mostre o seu problema) ou postar uma dica ou o que você quiser. com moderação.
Câmara de uma apresentação de slides jQuery livre com muitos efeitos, transições, layout adaptável, fácil de personalizar, usando tela e pronto móvel.
por Pixedelic.
Eu fiz o slideshow da câmera de graça.
Eu desenvolvi para um dos meus projetos e decidi compartilhá-lo.
Se você gosta de você pode retribuir de várias maneiras, como você pode ver.
se você gosta de câmera.
se você gosta de câmera.
Compre um dos meus temas no ThemeForest ou me contrate para adaptar este plugin.
Se você gosta de slideshow de câmera, ou se você usou para fins comerciais, por favor considere uma doação via Paypal ou cartão de crédito.
se você gosta de câmera.
Você pode me comprar uma cerveja ou um sorvete para minha filha via Paypal.
Introdução, onde eu falo sobre o slideshow da câmera.
E peço desculpas pelo meu mau inglês.
OLÁ . Primeiro de tudo, desculpe-me pelo meu Inglês ruim, segundo me desculpe se você vai encontrar alguns bugs no slideshow da câmera. Eu o desenvolvi de graça, então não é fácil encontrar tempo para trabalhar nele. Se você quiser me ajudar com uma doação eu vou gostar :-)
Slideshow de câmera é um projeto de código aberto, baseado em slideshow Diapo (pixedelic / plugins / diapo, não mais suportado, desculpe), mas melhorou muito. Você pode sugerir alterações ou melhorias, se quiser. Você pode baixá-lo e usá-lo gratuitamente, você também pode incluí-lo em seus projetos e vendê-lo como parte de um trabalho maior (neste caso, por favor, considere uma doação).
Slideshow de câmera (como Diapo) é testado em novos navegadores, mas eu tentei torná-lo compatível com as versões antigas do Internet Explorer também (8 e 7). Mas eu não acho que vou gastar muitas horas para melhorar esse recurso, desculpe.
Slideshow de câmera requer jQuery 1.4+ e outros plugins jQuery são necessários se você quiser usar algumas funcionalidades: jQuery Easing (visite a página do projeto) e uma versão personalizada do jQuery Mobile (visite a página do projeto) para usar a câmera com dispositivos móveis. Esses plugins estão incluídos no zip que você pode baixar na parte inferior desta página.
Uso, como incluir a câmera em seus projetos.
E todos os métodos.
Essa é a estrutura básica para fazer o Camera funcionar:
Basta colocar esse código em sua página HTML e a apresentação de slides básica estará pronta para uso. Veja as outras demonstrações para criar slideshows mais complexos.
Para novatos do jQuery: depois de baixar e descompactar o Camera, você pode ver alguns arquivos na pasta chamada Exemplos incluídos no zip: lá eu forneci alguns exemplos de slideshow da câmera.
Como você pode ver nos próprios exemplos, antes do plugin da câmera, você deve chamar o jQuery na cabeça do seu documento: sem o jQuery, a apresentação de slides não funciona.
Então você deve chamar o plugin jQuery Easing e o plugin jQuery Mobile. Depois disso, você deve chamar o plug-in Camera e inicializar a câmera de função com o método simplesmente jQuery ('YOUR_TARGET'). Camera ();
Não se esqueça de ligar também para & quot; camera. css & quot; . Ao editar este arquivo CSS, você pode criar sua própria capa pessoal, é claro. Mas a câmera já fornece algumas skins. Tem 33 cores diferentes para os ícones. Para usá-los, basta adicionar uma dessas classes ao elemento de destino (se você não usar nenhuma dessas classes, a cor dos ícones será petróleo / grafite):
camera_amber_skin | camera_ash_skin | camera_azure_skin | camera_beige_skin | camera_black_skin | camera_blue_skin | camera_brown_skin | camera_burgundy_skin | camera_charcoal_skin | camera_chocolate_skin | camera_coffee_skin | camera_cyan_skin | camera_fuchsia_skin | camera_gold_skin | camera_green_skin | camera_grey_skin | camera_indigo_skin | camera_khaki_skin | camera_lime_skin | camera_magenta_skin | camera_maroon_skin | camera_orange_skin | camera_olive_skin | camera_pink_skin | camera_pistachio_skin | camera_pink_skin | camera_red_skin | camera_tangerine_skin | camera_turquoise_skin | camera_violet_skin | camera_white_skin | camera_yellow_skin.
Esta é a principal função para iniciar sua apresentação de slides. Dê uma olhada nas opções para obter informações mais detalhadas sobre como definir a apresentação de slides.
Você pode usar os métodos públicos abaixo para interromper a apresentação de slides, por exemplo, ao abrir uma caixa de luz. Eles simplesmente adicionam ou removem uma classe ao elemento de destino.
Opções e retornos de chamada também.
Para personalizar quase tudo.
Desde a Camera 1.3.0 você pode obter o índice do controle deslizante atual usando os retornos de chamada desta maneira:
Com o método acima, você pode obter o índice do slide que será exibido após o efeito de transição.
Com o método acima, você pode obter o índice do slide no final do efeito de transição.
Apis, classes e atributos de dados HTML5.
Para manipular quase tudo.
Um simples slide.
Esta é a "anatomia simples" de um slide:
Você pode adicionar uma legenda ao slide, basta colocar um div com a classe & quot; camera_caption & quot; no div acima:
Adicionando mais uma classe ao & quot; camera_caption & quot; div você pode decidir o efeito da legenda. As classes possíveis são: "moveFromLeft", "moveFomRight", "moveFromTop", "moveFromBottom", "fadeIn", "fadeFromLeft", "fadeFromRight", "fadeFromTop", & quot; fadeFromBottom & quot;
Elementos HTML.
Você também pode colocar alguns elementos HTML em seus slides. Estes elementos devem ser envolvidos em um div com posição: absoluto e eles podem ser incluídos no efeito de transição também:
Um elemento HTML pode ter uma classe & quot; fadeIn & quot; : neste caso, será exibido com um efeito de desvanecimento. Ao adicionar a classe & quot; camera_effected & quot; para o div, ele será incluído no efeito de transição (mas preste atenção, isso pode tornar a transição lenta).
Para incluir um vídeo em sua apresentação de slides, você deve colocar um iframe em um de seus slides:
Como você pode ver, eu configurei a largura e a altura do iframe para 100%, de modo que ele altere seu tamanho de acordo com o tamanho dos slideshows (quero dizer, o iframe, o vídeo no iframe manterá sua proporção).
Os iframes não podem ser incluídos no efeito de transição, portanto, você pode usar uma captura de tela do iframe como imagem para o seu slide. Por padrão, eles são exibidos após a transição, mas você pode optar por exibi-los somente depois de clicar na imagem do próprio slide. Basta adicionar ao div (o slide) o atributo data-video = "hide" (veja abaixo os atributos de dados).
O & quot; dados - & quot; atributos.
O URL da imagem no slide é adicionado usando o atributo de dados HTML5. Isso permite carregar a imagem somente quando a apresentação de slides a chama e não (método de carregamento lento).
Ao usar o atributo de dados HTML5, você pode adicionar muitas propriedades ao seu slide, que sobrescrevem as gerais. Por exemplo, o URL das miniaturas:
ou um alinhamento específico para apenas um slide:
Aqui abaixo, você pode ver todos os outros dados "& quot; & quot; possibilidades.
alinhamento de dados, "topLeft", "topCenter", "topRight", "centerLeft", "centre", "centerRight", "bottomLeft", "bottomCenter", "bottomRight", "bottomRight", "bottomLeft", "bottomCenter", "bottomRight" e "bottomRight". aliviando os dados para a lista completa jqueryui / demos / effect / easing. html data-mobileEasing o efeito de atenuação para dispositivos móveis apenas dados-fx "aleatório", "simpleFade", "curtainTopLeft", "curtainTopRight", & quot; curtainTopRight & quot ;, & quot; curtainTopLeft & quot ;, curtainTopRight & quot ;, & quot; ; curtainBottomLeft "," curtainBottomRight "," curtainSliceLeft "," curtainSliceRight "," blindCurtainTopLeft "," blindCurtainTopRight "," blindCurtainBottomLeft "," blindCurtainBottomRight "," blindCurtainSliceBottom "," blindCurtainSliceTop ", & quot; blindCurtainSliceBottom", "blindCurtainSliceTop", & quot; "stampede", "mosaic", "mosaicReverse", "mosaicRandom", "mosaicSpiral", "mosaicSpiralReverse", "topLeftBottomRight", "bottomRightTopLeft", "bottomLeftTopRight", & quot; bottomLeftTopRight & quot; link de dados a URL para onde você vai clicando no seu retrato de dados do slide & quot; true & quot ;, & quot; falso & quot ;. Selecione & quot; true & quot; se você não quiser que suas imagens sejam recortadas data-slideOn "próximo", "anterior", "aleatório": decida se o efeito de transição será aplicado ao atual (anterior) ou ao próximo slide-src o URL da imagem da segmentação de dados do slide & quot; _blank & quot ;, & quot; _new & quot ;, & quot; _parent & quot; & quot; _self & quot ;, & quot; _top & quot ;, os valores de destino dos dados do atributo de link de dados da miniatura do slide (se o valor da opção 'miniatura' for true) data-time os milissegundos entre o fim do efeito deslizante e o início do nex um data-transPeriod o comprimento do efeito deslizante em milissegundos de dados - video = "ocultar" & quot; ocultar & quot; é o valor único possível. Se você usar este atributo de dados, significa que você está usando um vídeo em sua apresentação de slides. Os vídeos na câmera podem ser exibidos somente após a transição. Ao adicionar este atributo de dados, você deve clicar na imagem para exibir o vídeo, caso contrário, o vídeo será exibido automaticamente após a transição. Mais informações estão disponíveis nas páginas de demonstração.
Download, suporte, contatos, changelog.
E se você quiser doações.
Suporte para mim
Se você quer apoiar meu trabalho, pode comprar algo da minha página ThemeForest: ThemeForest, eu realmente aprecio.
Você também pode compartilhar esta página ou me seguir no Dribbble, Twitter, Facebook, Forrst etc.
Apoio para você.
Se você precisar de suporte ou se quiser denunciar um erro ou solicitar uma implementação, a única maneira é participar do grupo do Google Show de slides da câmera: groups. google/group/camera-slideshow.
Se você quiser, pode me contratar no manu em pixedelic dot com (inclua alguns detalhes sobre o seu projeto e não peça suporte neste endereço). Não use este endereço para pedir suporte por favor.
Para baixar este arquivo basta digitar a doação que você deseja fazer. Se você não quer doar nada, apenas digite 0. Em seguida, clique em & quot; Fazer o download & quot;
Para baixar este arquivo basta digitar a doação que você deseja fazer. Se você não quer doar nada, apenas digite 0. Em seguida, clique em & quot; Fazer o download & quot;
Para baixar este arquivo basta digitar a doação que você deseja fazer. Se você não quer doar nada, apenas digite 0. Em seguida, clique em & quot; Fazer o download & quot;
Adicionado o evento pageshow.
Corrigido um problema com iframes v.1.3.1 - 2012.05.28 Corrigido um problema com o modo retrato v.1.3.0 - 2012.05.23 Alterou o comportamento de alguns retornos de chamada e adicionou a classe & quot; cameranext & quot; (leia a documentação sobre os retornos de chamada) v.1.2.0 - 2012.05.04 Mudou o modo de carregamento lento v.1.1.2 - 2012.04.29 Corrigido alguns problemas com a versão antiga do IE.
Adicionado um arquivo de demonstração com uma função PHP para criar slideshow ordenado aleatoriamente v.1.1.0 - 2012.04.21 Corrigido um problema com o carregador de imagens no IE8 (graças a Aquila)
Mudou a demonstração em tela cheia para resolver um problema com o IE7. Eu odeio o IE :-) v.1.0.8 - 2012.04.05 Corrigido um problema com o carregador de imagens no IE v.1.0.6 - 2012.03.24 Removido cameraPlay função.
Usou cameraPause e cameraResume em vez de cameraStop e cameraPlay.
Agora cameraStop é usado para bloquear (destruir) o temporizador da apresentação de slides (você não pode continuar depois disso)
Corrigido um problema com links.
Corrigido um problema com as legendas (obrigado a @sattes v.1.0.5 - 2012.03.13 Adicionado callback onStartTransition v.1.0.4 - 2012.03.08 Corrigido um erro com as legendas v.1.0.3 - 2012.02.23 Feito algum muda de acordo com a versão do WP e corrigiu um bug do método cameraResume v.1.0.2 - 2012.02.18 Adicionado a opção 'minHeight' v.1.0.1 - 2012.02.18 Corrigido um problema com o IE8- v.1.0.0 - 2012.02. 17 Primeiro lançamento.
Obter via App Store Leia este post em nosso aplicativo!
Plugin de jQuery ciclo, velocidade de apresentação de slides.
Eu tenho esta apresentação de slides jQuery do plugin JQuery Cycle.
Tem sido ajustado um pouco, mas eu queria saber se alguém sabia como fazê-lo ir mais rápido ou mais devagar? ajustar a velocidade, eu olhei para um tutorial dele no site da ficha, mas não funcionou.
Isso leva 1 segundo para desaparecer, em intervalos de 8 segundos.
Atualize seu código para o seguinte, você tem que passar opções para o comando cycle:
Você pode atualizar a variável de velocidade (ele usa ms), você tem várias outras opções que você pode usar, eu gosto de usar esta referência de opção de ciclo de jquery.
Diapo.
e você pode decidir o tempo de transição de qualquer slide.
Nesse caso, você pode ver um vídeo do Vimeo e uma tabela de preços.
Introdução.
Olá. Primeiro de tudo, desculpe-me pelo meu mau inglês, segundo, desculpe-me se você vai encontrar alguns bugs no slideshow Diapo.
Slideshow Diapo é um projeto de código aberto. Você pode sugerir alterações ou melhorias, se quiser. Você pode baixá-lo e usá-lo gratuitamente, você também pode incluí-lo em seus projetos e vendê-lo como parte de um trabalho maior (neste caso, por favor, considere uma doação).
Slideshow Diapo é testado em novos navegadores, mas eu tentei torná-lo compatível com as versões antigas do Internet Explorer também (8 e 7). Mas eu não acho que vou gastar muitas horas para melhorar esse recurso, desculpe.
Slideshow Diapo requer jQuery 1.4 + e outros plugins jQuery são necessários se você quiser usar algumas funcionalidades: jQuery Easing (gsgd. co. uk/sandbox/jquery/easing/), jQuery HoverIntent (cherne / brian / recursos / jquery. hoverIntent. html), jQuery Mobile (jquerymobile /, mas nem todos os plugins). Esses plugins estão incluídos no zip que você pode baixar na parte inferior desta página.
Slideshow Diapo é o primeiro plugin jQuery que eu desenvolvo a partir do zero e eu distribuo de graça, então seja gentil.
Opções
Você também pode usar mais de um efeito: 'curtainTopLeft, mosaic, bottomLeftTopRight'
Download, suporte e doações. se você quiser.
Slideshow Diapo é um plugin de código aberto e você pode usá-lo gratuitamente. Mas se você quiser me ajudar a melhorá-lo, mantê-lo atualizado, etc., considere uma doação gratuita ou compre algo em meu portfólio no ThemeForest.
Compre uma cerveja, um café ou um sorvete para minha filha. Decida o valor que você preferir.
Compre algo.
Compre minhas obras: aqui estão meus portfólios no Themeforest e no CodeCanyon.
Se você quiser, pode me contratar no manu no pixedelic dot com (inclua alguns detalhes sobre o seu projeto e não peça suporte neste endereço)
Você pode visitar o Grupo Diapo do Google e fazer sua pergunta lá (postar um link que mostre o seu problema) ou postar uma dica ou o que você quiser. com moderação.
Câmara de uma apresentação de slides jQuery livre com muitos efeitos, transições, layout adaptável, fácil de personalizar, usando tela e pronto móvel.
por Pixedelic.
Eu fiz o slideshow da câmera de graça.
Eu desenvolvi para um dos meus projetos e decidi compartilhá-lo.
Se você gosta de você pode retribuir de várias maneiras, como você pode ver.
se você gosta de câmera.
se você gosta de câmera.
Compre um dos meus temas no ThemeForest ou me contrate para adaptar este plugin.
Se você gosta de slideshow de câmera, ou se você usou para fins comerciais, por favor considere uma doação via Paypal ou cartão de crédito.
se você gosta de câmera.
Você pode me comprar uma cerveja ou um sorvete para minha filha via Paypal.
Introdução, onde eu falo sobre o slideshow da câmera.
E peço desculpas pelo meu mau inglês.
OLÁ . Primeiro de tudo, desculpe-me pelo meu Inglês ruim, segundo me desculpe se você vai encontrar alguns bugs no slideshow da câmera. Eu o desenvolvi de graça, então não é fácil encontrar tempo para trabalhar nele. Se você quiser me ajudar com uma doação eu vou gostar :-)
Slideshow de câmera é um projeto de código aberto, baseado em slideshow Diapo (pixedelic / plugins / diapo, não mais suportado, desculpe), mas melhorou muito. Você pode sugerir alterações ou melhorias, se quiser. Você pode baixá-lo e usá-lo gratuitamente, você também pode incluí-lo em seus projetos e vendê-lo como parte de um trabalho maior (neste caso, por favor, considere uma doação).
Slideshow de câmera (como Diapo) é testado em novos navegadores, mas eu tentei torná-lo compatível com as versões antigas do Internet Explorer também (8 e 7). Mas eu não acho que vou gastar muitas horas para melhorar esse recurso, desculpe.
Slideshow de câmera requer jQuery 1.4+ e outros plugins jQuery são necessários se você quiser usar algumas funcionalidades: jQuery Easing (visite a página do projeto) e uma versão personalizada do jQuery Mobile (visite a página do projeto) para usar a câmera com dispositivos móveis. Esses plugins estão incluídos no zip que você pode baixar na parte inferior desta página.
Uso, como incluir a câmera em seus projetos.
E todos os métodos.
Essa é a estrutura básica para fazer o Camera funcionar:
Basta colocar esse código em sua página HTML e a apresentação de slides básica estará pronta para uso. Veja as outras demonstrações para criar slideshows mais complexos.
Para novatos do jQuery: depois de baixar e descompactar o Camera, você pode ver alguns arquivos na pasta chamada Exemplos incluídos no zip: lá eu forneci alguns exemplos de slideshow da câmera.
Como você pode ver nos próprios exemplos, antes do plugin da câmera, você deve chamar o jQuery na cabeça do seu documento: sem o jQuery, a apresentação de slides não funciona.
Então você deve chamar o plugin jQuery Easing e o plugin jQuery Mobile. Depois disso, você deve chamar o plug-in Camera e inicializar a câmera de função com o método simplesmente jQuery ('YOUR_TARGET'). Camera ();
Não se esqueça de ligar também para & quot; camera. css & quot; . Ao editar este arquivo CSS, você pode criar sua própria capa pessoal, é claro. Mas a câmera já fornece algumas skins. Tem 33 cores diferentes para os ícones. Para usá-los, basta adicionar uma dessas classes ao elemento de destino (se você não usar nenhuma dessas classes, a cor dos ícones será petróleo / grafite):
camera_amber_skin | camera_ash_skin | camera_azure_skin | camera_beige_skin | camera_black_skin | camera_blue_skin | camera_brown_skin | camera_burgundy_skin | camera_charcoal_skin | camera_chocolate_skin | camera_coffee_skin | camera_cyan_skin | camera_fuchsia_skin | camera_gold_skin | camera_green_skin | camera_grey_skin | camera_indigo_skin | camera_khaki_skin | camera_lime_skin | camera_magenta_skin | camera_maroon_skin | camera_orange_skin | camera_olive_skin | camera_pink_skin | camera_pistachio_skin | camera_pink_skin | camera_red_skin | camera_tangerine_skin | camera_turquoise_skin | camera_violet_skin | camera_white_skin | camera_yellow_skin.
Esta é a principal função para iniciar sua apresentação de slides. Dê uma olhada nas opções para obter informações mais detalhadas sobre como definir a apresentação de slides.
Você pode usar os métodos públicos abaixo para interromper a apresentação de slides, por exemplo, ao abrir uma caixa de luz. Eles simplesmente adicionam ou removem uma classe ao elemento de destino.
Opções e retornos de chamada também.
Para personalizar quase tudo.
Desde a Camera 1.3.0 você pode obter o índice do controle deslizante atual usando os retornos de chamada desta maneira:
Com o método acima, você pode obter o índice do slide que será exibido após o efeito de transição.
Com o método acima, você pode obter o índice do slide no final do efeito de transição.
Apis, classes e atributos de dados HTML5.
Para manipular quase tudo.
Um simples slide.
Esta é a "anatomia simples" de um slide:
Você pode adicionar uma legenda ao slide, basta colocar um div com a classe & quot; camera_caption & quot; no div acima:
Adicionando mais uma classe ao & quot; camera_caption & quot; div você pode decidir o efeito da legenda. As classes possíveis são: "moveFromLeft", "moveFomRight", "moveFromTop", "moveFromBottom", "fadeIn", "fadeFromLeft", "fadeFromRight", "fadeFromTop", & quot; fadeFromBottom & quot;
Elementos HTML.
Você também pode colocar alguns elementos HTML em seus slides. Estes elementos devem ser envolvidos em um div com posição: absoluto e eles podem ser incluídos no efeito de transição também:
Um elemento HTML pode ter uma classe & quot; fadeIn & quot; : neste caso, será exibido com um efeito de desvanecimento. Ao adicionar a classe & quot; camera_effected & quot; para o div, ele será incluído no efeito de transição (mas preste atenção, isso pode tornar a transição lenta).
Para incluir um vídeo em sua apresentação de slides, você deve colocar um iframe em um de seus slides:
Como você pode ver, eu configurei a largura e a altura do iframe para 100%, de modo que ele altere seu tamanho de acordo com o tamanho dos slideshows (quero dizer, o iframe, o vídeo no iframe manterá sua proporção).
Os iframes não podem ser incluídos no efeito de transição, portanto, você pode usar uma captura de tela do iframe como imagem para o seu slide. Por padrão, eles são exibidos após a transição, mas você pode optar por exibi-los somente depois de clicar na imagem do próprio slide. Basta adicionar ao div (o slide) o atributo data-video = "hide" (veja abaixo os atributos de dados).
O & quot; dados - & quot; atributos.
O URL da imagem no slide é adicionado usando o atributo de dados HTML5. Isso permite carregar a imagem somente quando a apresentação de slides a chama e não (método de carregamento lento).
Ao usar o atributo de dados HTML5, você pode adicionar muitas propriedades ao seu slide, que sobrescrevem as gerais. Por exemplo, o URL das miniaturas:
ou um alinhamento específico para apenas um slide:
Aqui abaixo, você pode ver todos os outros dados "& quot; & quot; possibilidades.
alinhamento de dados, "topLeft", "topCenter", "topRight", "centerLeft", "centre", "centerRight", "bottomLeft", "bottomCenter", "bottomRight", "bottomRight", "bottomLeft", "bottomCenter", "bottomRight" e "bottomRight". aliviando os dados para a lista completa jqueryui / demos / effect / easing. html data-mobileEasing o efeito de atenuação para dispositivos móveis apenas dados-fx "aleatório", "simpleFade", "curtainTopLeft", "curtainTopRight", & quot; curtainTopRight & quot ;, & quot; curtainTopLeft & quot ;, curtainTopRight & quot ;, & quot; ; curtainBottomLeft "," curtainBottomRight "," curtainSliceLeft "," curtainSliceRight "," blindCurtainTopLeft "," blindCurtainTopRight "," blindCurtainBottomLeft "," blindCurtainBottomRight "," blindCurtainSliceBottom "," blindCurtainSliceTop ", & quot; blindCurtainSliceBottom", "blindCurtainSliceTop", & quot; "stampede", "mosaic", "mosaicReverse", "mosaicRandom", "mosaicSpiral", "mosaicSpiralReverse", "topLeftBottomRight", "bottomRightTopLeft", "bottomLeftTopRight", & quot; bottomLeftTopRight & quot; link de dados a URL para onde você vai clicando no seu retrato de dados do slide & quot; true & quot ;, & quot; falso & quot ;. Selecione & quot; true & quot; se você não quiser que suas imagens sejam recortadas data-slideOn "próximo", "anterior", "aleatório": decida se o efeito de transição será aplicado ao atual (anterior) ou ao próximo slide-src o URL da imagem da segmentação de dados do slide & quot; _blank & quot ;, & quot; _new & quot ;, & quot; _parent & quot; & quot; _self & quot ;, & quot; _top & quot ;, os valores de destino dos dados do atributo de link de dados da miniatura do slide (se o valor da opção 'miniatura' for true) data-time os milissegundos entre o fim do efeito deslizante e o início do nex um data-transPeriod o comprimento do efeito deslizante em milissegundos de dados - video = "ocultar" & quot; ocultar & quot; é o valor único possível. Se você usar este atributo de dados, significa que você está usando um vídeo em sua apresentação de slides. Os vídeos na câmera podem ser exibidos somente após a transição. Ao adicionar este atributo de dados, você deve clicar na imagem para exibir o vídeo, caso contrário, o vídeo será exibido automaticamente após a transição. Mais informações estão disponíveis nas páginas de demonstração.
Download, suporte, contatos, changelog.
E se você quiser doações.
Suporte para mim
Se você quer apoiar meu trabalho, pode comprar algo da minha página ThemeForest: ThemeForest, eu realmente aprecio.
Você também pode compartilhar esta página ou me seguir no Dribbble, Twitter, Facebook, Forrst etc.
Apoio para você.
Se você precisar de suporte ou se quiser denunciar um erro ou solicitar uma implementação, a única maneira é participar do grupo do Google Show de slides da câmera: groups. google/group/camera-slideshow.
Se você quiser, pode me contratar no manu em pixedelic dot com (inclua alguns detalhes sobre o seu projeto e não peça suporte neste endereço). Não use este endereço para pedir suporte por favor.
Para baixar este arquivo basta digitar a doação que você deseja fazer. Se você não quer doar nada, apenas digite 0. Em seguida, clique em & quot; Fazer o download & quot;
Para baixar este arquivo basta digitar a doação que você deseja fazer. Se você não quer doar nada, apenas digite 0. Em seguida, clique em & quot; Fazer o download & quot;
Para baixar este arquivo basta digitar a doação que você deseja fazer. Se você não quer doar nada, apenas digite 0. Em seguida, clique em & quot; Fazer o download & quot;
Adicionado o evento pageshow.
Corrigido um problema com iframes v.1.3.1 - 2012.05.28 Corrigido um problema com o modo retrato v.1.3.0 - 2012.05.23 Alterou o comportamento de alguns retornos de chamada e adicionou a classe & quot; cameranext & quot; (leia a documentação sobre os retornos de chamada) v.1.2.0 - 2012.05.04 Mudou o modo de carregamento lento v.1.1.2 - 2012.04.29 Corrigido alguns problemas com a versão antiga do IE.
Adicionado um arquivo de demonstração com uma função PHP para criar slideshow ordenado aleatoriamente v.1.1.0 - 2012.04.21 Corrigido um problema com o carregador de imagens no IE8 (graças a Aquila)
Mudou a demonstração em tela cheia para resolver um problema com o IE7. Eu odeio o IE :-) v.1.0.8 - 2012.04.05 Corrigido um problema com o carregador de imagens no IE v.1.0.6 - 2012.03.24 Removido cameraPlay função.
Usou cameraPause e cameraResume em vez de cameraStop e cameraPlay.
Agora cameraStop é usado para bloquear (destruir) o temporizador da apresentação de slides (você não pode continuar depois disso)
Corrigido um problema com links.
Corrigido um problema com as legendas (obrigado a @sattes v.1.0.5 - 2012.03.13 Adicionado callback onStartTransition v.1.0.4 - 2012.03.08 Corrigido um erro com as legendas v.1.0.3 - 2012.02.23 Feito algum muda de acordo com a versão do WP e corrigiu um bug do método cameraResume v.1.0.2 - 2012.02.18 Adicionado a opção 'minHeight' v.1.0.1 - 2012.02.18 Corrigido um problema com o IE8- v.1.0.0 - 2012.02. 17 Primeiro lançamento.
No comments:
Post a Comment