-1
I am implementing a flipbook in which you need to load the sheets dynamically, so I am using Ajax. When I implement the flipbook in a static way it works perfectly. And I can also call all images by Ajax on a test page, in which n is being implemented flipbook. My problem is: when I pass the ajax images to my flipbook, it only appears the first image and loses the function of gives the Turn of the next page. That is, turn the leaf to the next.
//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>