Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Tutorial sobre Slider de imagens com plugin JQuery

No description
by

Rene Esteves

on 12 March 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Tutorial sobre Slider de imagens com plugin JQuery

Tutorial sobre Slider de imagens com JQuery INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DE SÃO PAULO Desenvolvimento para WEB I Criar SLIDER de imagens com o plugin CYCLE Caraguatatuba - SP
2012 OBJETIVOS DESTE TUTORIAL Equipe Caio Rodrigo
Luiz Rodrigues Junior
Rene Esteves Apresentação ao JQuery
Curiosidades
Explicar o que é o plugin Cycle2
Ensinar onde encontrar o plugin Cycle2
Ensinar como adicioná-lo a sua página HTML
Criar um exemplo prático
Salvar Imagens
Gerar o HTML
Gerar o CSS
Aplicar o JQuery
Aplicar e manipular o Cycle2
Mostrar diversas funções do Cycle2
Encerramento JQuery JQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML. Ela foi lançada em janeiro de 2006 no BarCamp de Nova York por John Resig. Usada por cerca de 55% dos 10 mil sites mais visitados do mundo, jQuery é a mais popular das bibliotecas JavaScript. O que é o JQuery ? Quando surgiu o JQuery ? Curiosidades Microsoft A Microsoft anunciou planos de incluir o jQuery em suas plataformas, adotando-a inicialmente no Visual Studio6 para uso com o framework AJAX do ASP.NET. Nokia Nokia anunciou planos de incluir o jQuery em suas plataformas, adotando-a inicialmente na sua plataforma Web Run-Time de widgets. MediaWiki A biblioteca jQuery também tem sido usada no MediaWiki desde a versão 1.16.8. Cycle2 - O Plugin O que é o Cycle2 ? Cycle2 é um plugin jQuery para fácil construção de slideshows versáteis. Ele suporta um estilo de inicialização declarativa, que permite a personalização total sem qualquer script. Basta incluir o plugin, declarar a sua marcação, e Cycle2 faz o resto. Suporta todos os navegadores;
Declarativa: nenhum script necessário;
Responsivo: controlar totalmente a sua apresentação via css;
Personalizável;
Extensível: API totalmente personalizável;
Inteligente: suporta o carregamento de imagens e de inicialização atrasada;
Suporte para gesto de arrastar em dispositivos móveis;
Transições fde, scroll, shuffle, tile e carousel;
E muito mais! Destaques: Como funciona o Cycle2 ? É realmente muito simples, até mesmo sua avó poderia usá-lo. Funciona desta forma: Cycle2 oferece uma função de plugin chamado ciclo. Essa função é chamado em um elemento de contêiner. Cada imagem na embalagem torna-se um "slide". Opções de controlar como e quando os slides são transição. Mas aqui o grande lance... você não tem que chamar ciclo e passar as suas opções. Você declarar suas opções como atributos no elemento slideshow e Cycle2 agarra-los de lá. Onde encontrar o Cycle2 Site Oficial Cycle2 possui uma página na internet que contém algumas explicações do seu uso, exemplos, e o download do plugin: http://www.malsup.com/jquery/cycle2/ Application Programming Interface Demos Frequently Asked Questions Downloads Nesta página existe um conjunto de rotinas e padrões estabelecidos pelo Cycle2 para a utilização das suas funcionalidades por aplicativos que não pretendem envolver-se em detalhes da implementação do software, mas apenas usar seus serviços. Esta página é um acrónimo da expressão inglesa Frequently Asked Questions, que significa Perguntas mais frequentes, ou seja, existem as perguntas mais frequentes sobre o Cycle 2 e suas respectivas resposta. http://www.malsup.com/jquery/cycle2/faq/ http://www.malsup.com/jquery/cycle2/demo/ http://www.malsup.com/jquery/cycle2/faq/ http://www.malsup.com/jquery/cycle2/download/ Nesta página os desenvolvedores deixam 26 exemplos completos dos principais efeitos e seus respectivos códigos-fonte, entre os exemplos existem os: Carousel, Shuffle, slides de Twitts e videos do Youtube entre outros. Nesta página conseguimos encontrar vários links para baixar o Cycle2, inclusive a versão development. Como adicioná-lo a sua página HTML Acesse a página do Download Copie todo o código Cole o código Salve como: jquery.cycle2.min.js Adicione o plugin a seu HTML http://www.malsup.com/jquery/cycle2/download/ Acesse o link acima e clique no botão em destaque, que irá abrir uma nova guia cheia de código-fonte. Selecione todo código disponível na página e o copie. Abra um editor de sua preferência e cole o código selecionado. Salve esse arquivo como: jquery.cycle2.min.js, de preferência na pasta js do seu projeto. Agora na seu arquivo HTML você pode fazer a ligação do seu Cycle2 de duas formas, dentro da sua tag HEAD:

Ligação direta ao com o site (Retângulo Verde);
Ligação com o arquivo jquery.cycle2.min.js do seu projeto (Retângulo Amarelo). Vamos criar um SlideShow Passo I Criar uma pasta nomeada Slideshow com as seguintes sub-pastas:

js
css
img Passo II Encontrar e salvar 4 fotos formato .jpg da internet na sua pasta img, com os seguintes nomes:

img1.jpg
img2.jpg
img3.jpg
img4.jpg Passo III Salvar o script do JQuery e o Cycle2 na pasta js, com os seguintes nomes:

jquery.min.js http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js ;

jquery.cycle2.min.js (Já aprendemos como achá-lo). Passo IV Criar as folhas de estilo da página, e salvar na pasta css, com os seguintes nomes:

style.css;
cycle2.css. Códigos CSS cycle2.css style.css Passo V Criar o arquivo index.html na raiz da pasta Slideshow e gerar nosso código, observe a imagem a seguir: index.html Passo VI Agora basta checar nosso slideshow com Cycle2 rodando no navegador, arrastando o arquivo HTML para dentro do navegador. As diversas aplicações do Cycle2 Encerramento Neste momento será apresentada uma série de exemplos do Cycle2, e para você que está acompanhando este tutorial online, infelizmente não poderá acompanhar esta parte. ....... A equipe responsável por este tutorial, agradece a sua atenção e espera que tenha sido bastante proveitoso todo este material. Obrigado
Full transcript