No post de hoje vou mostrar pra vocês um forma bem legal de se criar flip books utilizando jquery e o plugin turn.js. Para quem não sabe, flip book é aquele efeito que simula um livro, revista ou catálogo e no qual é possível ir folheando as páginas de forma bem real.
Ao término desse tutorial teremos criado algo semelhante à esse. (Clique Aqui). E para construirmos nossa revista virtual, devemos baixar o jquery e o turn.js.
Antes de iniciar, vamos criar 4 imagens, todas em tamanho 400/533 pixels. Cada uma dessas imagens será uma página na revista. Crie um diretório img e salve as imagens dentro dele.
Vamos implementar o arquivo index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Criando um flip book com JQuery (www.rafaelwendel.com)</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript" src="turn.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $('#magazine').turn(); }); </script> <style type="text/css"> #magazine{ width: 800px; height: 533px; } #magazine .turn-page{ width: 400px; height: 533px; background-color: #ccc; } </style> </head> <body> <h2>Criando um flip book com JQuery (www.rafaelwendel.com)</h2> <div id="magazine"> <div><img src="img/imagem1.jpg" /></div> <div><img src="img/imagem2.jpg" /></div> <div><img src="img/imagem3.jpg" /></div> <div><img src="img/imagem4.jpg" /></div> </div> </body> </html> |
Para definir uma div do documento como sendo flip é simples. Basta chamar a função turn (linha 10). Na estilização a largura eu defino o dobro da largura da imagem (para a revista aberta). E a altura é a mesma da imagem, pois se trata de cada página. Na classe turn-page coloco exatamente as dimensões das imagens.
Para passar a página, basta ir no canto inferior direito e arrastar com o mouse.
Para visualizar o exemplo, clique aqui.
Para baixar os arquivos do exemplo, clique aqui.
Site oficial do turn.js, clique aqui.
Qualquer dúvida, é só comentar.
Abs!
Siga-me no twitter: @rafaelwendel
Rafael Wendel Pinheiro
É formado em Sistemas de Informação, pós-graduado em Sistemas de Banco de Dados e mestre em Educação com foco em Tecnologias Sociocomunitárias. Trabalha como professor de ensino técnico e tecnológico no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo ministrando disciplinas nas áreas de programação, banco de dados, desenvolvimento de projetos e engenharia de software.
Muuuuito bom!
Muito bom o seu tutorial, gostei bastante do efeito!
Valeu Paulo Vitor
Abs
ola tudo bem?
muito legal esse post porém não funcionou no ie 10, será que tem solução?
Obrigado
Gostei muito deste seu post, pena que não funcione no internet explorer, infelizmente terei que tirar da minha lista para desenvolvimento, justamente por este browse tão ruim.
Fala Rafael!
Cara…no Chrome também zoa todo!!!
Tá certo isso? Em qual navegador ele funciona legal?
Abraços!
Olá André,
Acabo de testar aqui no FF, Chrome e IE. Nos dois primeiros funcionou perfeitamente. Apenas no IE que está bugado. Para mais informações visite a página do plugin(http://www.turnjs.com/)
Abs
cara gostei demais do seu tuto.. já conhecia esse plugin, mas gostaria de saber como faz para centralizar as img no centro assim q abri o livro. tipo até vi o comando lá “autoCenter” mas n consigo de maneira nenhuma centralizar o book. ele ta do jeito do seu e eu queria centralizar quando abrir, estilo do exemplo do site original… tem como?
deste já agradeço
cara, dê uma olhada nesse tutorial
http://tutorialzine.com/2012/03/instagram-magazine-php-jquery/
Abs
cara valeu mesmo… Era basicamente isso q eu estava precisando, agora vou tentar implementar isso no site q to desenvolvendo. mto obrigado mesmo!
Cara show de bola este efeito ,,,,mas estou com uma duvida como pegar isto pelo banco de dados se só funciona dentro das divs
Olá Marcio,
Nao entendi muito bem o que você quis dizer.
O que está querendo pegar no banco de dados?
O caminho das imagens?
Abs
Rafael Wendel Pinheiro já consegui deu certo ficou muito bom valeu pelo post..
só seria bom ter mais informação das funções..se vc tiver mais informação deste será otimo
Rafael,
Excelente post! Você sabe como podemos carregar pdf e se é possivel alternar as páginas de um pdf disponibilizando um unico arquivo?
Sds
Olá Carlos,
Até onde sei, não é possível gerar o conteudo a partir de um pdf.
Dê uma olhada no site oficial: http://www.turnjs.com/
Abs!
Olá amigo Chrome versao anterior funcionava perfeitamente mais com a atualização atual nao esta funcionando nem por reza braba o js simplismente nao funciona desde ja agradeço…
Olá, Rafael.
Pode em tirar uma dúvida? O efeito está funcionando corretamente, mas eu gostaria de colocar o texto nestas imagens, tirando elas do banco, como eu iria fazer neste caso? Já que pelo que eu vi ele trabalho com as imagens da div e não o seu conteúdo.
Desde já agradeço.
Abraços.
Kelvin Matheus
Olá Rafael !
Gostaria de saber se é possível a partir desse flipbook, fazer com que o usuário escreva dentro da pagina, por exemplo cada pagina um texto . Isso é possível ?
Obrigado 🙂
tem como criar tamanhos dinâmicos no turn js? ou seja utilizar minha aplicação tanto para IPAD, IPOD, WINDOWS em varias resoluções de tela? se souber me responda por gentileza…
Ótimo tutorial, só estou com uma dúvida, como eu faço para colocar um zoom como tem em alguns exemplos no site oficial?
Cara seu tutorial é ótimo.
Vc teria algum exemplo de como acrescentar zoom e uma galeria das imagens que compõem o book ?
Muito bom seu artigo cara, pq se eu colocar uma outra imagem dentro da div ela não pega efeito? ja que a função esta pra div inteira e não pra cada uma?
parou de funcionar… 🙁
Muito bom.
Pena que para mim só funcionou no Mozilla.
Cara, eu tinha conseguido o turn,js pela internet (nao sei qual site), e até um tempo atrás funcionava perfeitamente em todos os browser, mas meu cliente esses dias me falou que tinha parado no chrome, e agora que fui analisar, realmente, ja testei em outros computadores, mas em todos o efeito flip nao funciona mais, será que foi alguma atualização do chrome que fez isso?
Enfim, vou ser obrigado a achar alguma solução maniaca gambiarresca para resolver isso, se vc estiver sabendo de alguma coisa, me manda um email pf. VLw, abrçss
posso usar essa biblioteca em usao Comercial? tipo para clientes meu ? seria apenas para visualização de catalogo de produtos. tenho duvidas sobre licença
Olá Rafael,
Muito bacana seu tutorial. Mas infelizmente ele não funciona de forma alguma no Chrome e nem no IE (o que era de se esperar). Mas o estranho é que o demo do site oficial funciona em todos os navegadores. Porque isso?
abração
bom dia! amigo ótimo trabalho mais eu testei no Mozilla firefox funcionou perfeitamente, mas no chromo e IE não está funcionando, como podemos ajeitar isso.
Pessoal,
Escrevi esse post já há algum tempo. Quando o fiz testei apenas no Firefox e funcionou. Nem me preocupei em testar nos outros.
No site oficial (http://www.turnjs.com/) ele fala quais são as compatibilidades com relação aos navegadores. Pelo menos os mais famosos estão inclusos.
Tentem atualizar os arquivos para os mais recentes. Ou dêem uma olhada na documentação no site oficial.
Abs!
Não funciona mais?
abs!
Olá gente, passei pelo mesmo problema de não funcionar no Chrome e acabei de descobrir que basta usar o turn.js no lugar do turn.min.js. Para mim funcionou perfeitamente!!!
Gostaria de saber se posso usar essa biblioteca para catalogo de produtos de cleintes meu no site deles. Não entendi muito bem o tipo de licença.
Olá Luciano,
Segundo o site oficial, o Turn.js está sob a licença BSD. Nesse caso, eu não vejo problema algum em você utilizá-lo para seus catálogos.
Abs!