estou implementando um flipbook no qual precisa carregar as folhas dinamicamente, por isso estou usando Ajax. Quando implemento o flipbook de forma estática ele funciona perfeitamente. E também consigo chamar todas as imagens por Ajax em uma página de teste, no qual n está sendo implementado o flipbook. Meu problema é: quando passo as imagens por ajax para meu flipbook, ele só aparece a primeira imagem e perde a função de dá o Turn da proxima página. Ou seja, virar a folha para a próxima.
//FUNÇÃO AJAX DE BUSCA DE DADOS, FUNCIONA PERFEITAMENTE NOS TESTES SEM O FLIPBOOK
$(document).ready(function(){
$.ajax({
type:'post', //Definimos o método HTTP usado
dataType: 'json', //Definimos o tipo de retorno
url: 'getDados.php',//Definindo o arquivo onde serão buscados os dados
success: function(dados){
for(var i=0;dados.length>i;i++){
//Adicionando registros retornados na tabela
//$('#teste').append('<div><h6>'+dados[i].id+'</h6></div>');
var pegaCaminho = (dados[i].imagem);
var cod = ("admin/wa/album/uploads/"+pegaCaminho);
console.log(cod);
$("#book1").append("<img src="+cod+"><br/>");
}
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>teste</title>
<link rel="stylesheet" href="estiloCat.css">
</head>
<body>
<div class="t">
<div class="tc rel">
<div class="book" id="book">
<div id="book1" class="page"></div>
<!--
FORMA ESTÁTICA FUNCIONANDO PERFEITAMENTE
<div class="page"><img src="admin/wa/album/uploads/57bcc23dda6fda88f9d170e1dabad157.jpg" alt="" /></div>
<div class="page"><img src="admin/wa/album/uploads/78ee5649cba9156527a341f21606c1d3.jpg" alt="" /></div>
<div class="page"><img src="admin/wa/album/uploads/81d4311068bd4d7c8b98907da3d228ff.jpg" alt="" /></div>
<div class="page"><img src="admin/wa/album/uploads/8f4eece9104556dd4b76e5bdc1d24524.jpg" alt="" /></div>
<div class="page"><img src="admin/wa/album/uploads/d53615ca484f7a8e3515fd9622779fd4.jpg" alt="" /></div>
<div class="page"><img src="admin/wa/album/uploads/d2bae50bd2a640cce26494ecc0d8c5d7.jpg" alt="" /></div>-->
</div>
</div>
</div>
<script src="jquery.js"></script>
<script src="ajax.js"></script>
<script src="turn.js"></script>
<-- IMPLEMENTAÇÃO DO FLIPBOOK USANDO TURNJS -->
<script type="text/javascript">
(function () {
'use strict';
var module = {
ratio: 1.38,
init: function (id) {
var me = this;
// se o navegador mais antigo, em seguida, não execute javascript
if (document.addEventListener) {
this.el = document.getElementById(id);
this.resize();
this.plugins();
//[responsividade] no redimensionamento da janela, atualize o tamanho do plug-in
window.addEventListener('resize', function (e) {
var size = me.resize();
$(me.el).turn('size', size.width, size.height);
});
}
},
resize: function () {
// redefine a largura e a altura para os padrões css
this.el.style.width = '';
this.el.style.height = '';
var width = this.el.clientWidth,
height = Math.round(width / this.ratio),
padded = Math.round(document.body.clientHeight * 0.9);
// se a altura for muito grande para a janela, diminua
if (height > padded) {
height = padded;
width = Math.round(height * this.ratio);
}
// definir a largura e a altura correspondentes a proporção
this.el.style.width = width + 'px';
this.el.style.height = height + 'px';
return {
width: width,
height: height
};
},
plugins: function () {
// executar o plugin
$(this.el).turn({
gradients: true,
acceleration: true
});
// ocultar
document.body.className = 'hide-overflow';
}
};
module.init('book');
}());
</script>
</body>
</html>