-1

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>

1 Resposta 1

0

Veja que em sua implementação estática o componente espera uma <div class="page"> para cada imagem, já na sua construção via ajax, você está colocando todas as imagens dentro de uma úinca <div>...

$("#book").append(`<div class="page"><img src="${cod}"></div>`);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .