Problemas en ver un Flipbook (jquery) en ventana ajax

darkceci · #1 (**permalink**) 13/08/2013, 15:35

Hola a todos..!!
Tengo un problema que no puedo resolver desde hace dias, he probado aqui y alla desde diferentes maneras pero no puedo dar con la solucion.

Hice un "flipbook" (una cartilla de menu para una casa de te) esta realizada en jquery, el problema es cuando quiero que se vea desde una ventana "flotante", es decir en un html hay un link que cuando cliqueo quiero que se abra una ventana "flotante" (que realice con ajax) y que alli se vea esta cartilla de menu (flipbook). El problema es que el link abre la ventana "flotante" pero esta carga solo el div con los estilos de css pero no carga el flipbook, es decir que no pude llamar a la funcion de jquery.

Me han dicho que el javascript cargado con ajax no se ejecuta, simplemente es cargado como texto.. asi que nose como resolver esto, tal vez tenga que renunciar a la ventana ajax..

Desde ya si alguien tiene alguna pista, o algo mas que pueda probar agaradecida..!
Saludos

fhederico · #2 (**permalink**) 14/08/2013, 10:13

Hola,

Recuerda que cuando cargas un archivo por AJAX, y deseas que este ejecute ciertas funciones Jquery, debes agregarselas a dicho archivo, no se si me explico.

De todas formas si no pones tu codigo no podemos ayudarte mucho mas.

Saludos

darkceci · #3 (**permalink**) 14/08/2013, 13:30

Cita:

Iniciado por fhederico

Hola,

Recuerda que cuando cargas un archivo por AJAX, y deseas que este ejecute ciertas funciones Jquery, debes agregarselas a dicho archivo, no se si me explico.

De todas formas si no pones tu codigo no podemos ayudarte mucho mas.

Saludos

Hola fhederico, muchas gracias..!
Aqui pego el codigo..

IRE POR PARTES:
PRIMERO el html que corresponde al FlipBook (jquery)
LUEGO el html que corresponde al AJAX (ventana flotante)

LO QUE NO INCLUI: son los archivos js que llaman desde el AJAX, porque es muy largo, pero de ser necesario los cargo.

desde ya gracias... !

/*---------FLIPBOOK en JQUERY---- (html que corresponde al Flipbook (jQuery) que quiero que cargue en la ventana Ajax ventana flotante-) -----*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/blasten/turn.js/master/turn.min.js"></script>
<script type="text/javascript">
$(window).ready(function() {
$('#magazine').turn({
display: 'double',
acceleration: true,
gradients: !$.isTouch,
elevation:50,
when: {
turned: function(e, page) {
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
});
});

$(window).bind('keydown', function(e){
if (e.keyCode==37)
$('#magazine').turn('previous');
else if (e.keyCode==39)
$('#magazine').turn('next');
});
</script>

<style type="text/css">
body{
background:#fff;
}
#magazine{
width:850px;
height:568px;
-moz-box-shadow: 3px 3px 4px #111;
-webkit-box-shadow: 3px 3px 4px #111;
box-shadow: 3px 3px 4px #111;
/* IE 8 */
-ms-filter: "progidXImageTransform.Microsoft.Shadow(Strength=4 , Direction=135, Color='#111111')";
/* IE 5.5 - 7 */
filter: progidXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');

padding:0px; border:0px;

}
#magazine .turn-page{
background-color:#ccc;
background-size:100% 100%;

}

.shadow {
-moz-box-shadow: 3px 3px 4px #111;
-webkit-box-shadow: 3px 3px 4px #111;
box-shadow: 3px 3px 4px #111;
/* IE 8 */
-ms-filter: "progidXImageTransform.Microsoft.Shadow(Strength=4 , Direction=135, Color='#111111')";
/* IE 5.5 - 7 */
filter: progidXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');
}

.shadow1 {
width:460px;
height:560px;
-moz-box-shadow: 3px 3px 4px #111;
-webkit-box-shadow: 3px 3px 4px #111;
box-shadow: 3px 3px 4px #111;
/* IE 8 */
-ms-filter: "progidXImageTransform.Microsoft.Shadow(Strength=4 , Direction=135, Color='#111111')";
/* IE 5.5 - 7 */ filter: progidXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');
}

</style>
</head>

<body>
<div id="magazine">
<div style="background-image:url(images/02.jpg); padding:0px; border:0px; "></div>
<div style="background-image:url(images/03.jpg); padding:0px; border:0px;"></div>
<div style="background-image:url(images/04.jpg); padding:0px; border:0px;"></div>
<div style="background-image:url(images/05.jpg); padding:0px; border:0px;"></div>

</div>

</body>
</html>

/*----------------------FIN FLIPBOOK en JQUERY ------------------------*/

/*-------AJAX------- html donde está el Ajax desde donde quiero que cargue el Flipbook (jQuery)--PEGO PARTE DEL CODIGO---------------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>La Casa de Té</title>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" xhref="style.css" mce_href="style.css" type="text/css" media="screen" />
</head>

<body>
<a href="menu_te2.html" rel="lightbox_text">CLICK AQUI PARA VER CARTA DE TES</a>
</body>
</html>

/*----------------FIN AJAX------------------------*/

fhederico · #4 (**permalink**) 15/08/2013, 13:23

Hola,

Ufff... despues de 2 horas logre sacarlo, hombre... vaya dolor de cabeza que me dio.

Bueno, vamos por parte, debes descargar estas librerias

Turn (la que tienes no funciona bien)

Código:

https://github.com/blasten/turn.js

FacyBox (nos permitira abrir una pagina en una ventana como popUp)

Código:

http://www.ajaxshake.com/demo/ES/801/2e384fd6/lightbox-jquery-con-estilo-facebook-facybox.html

Antes que se me olvide, "FacyBox", no funciona correctamente con una version de JQuery mayor a 1.9, asi que deberas ocupar una menor obviamente xD

Ahora vamos con el codigo.

Una vez que descargues los archivos que te indique deberas copiarlos segun te detallo aqui

Código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- JS FacyBox --->
<script src="js/facybox.js" type="text/javascript"></script>
<!-- CSS FacyBox --->
<link href="css/facybox.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="css/faceplant.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="css/facybox_urls.css" media="screen" rel="stylesheet" type="text/css"/>


<script type="text/javascript">

    $(document).ready(function()
    {
        //Prepara todos los link 
         $('a[rel*=facybox]').facybox({
            // noAutoload: true
          });
        
       //Cuando hagamos click, cargara el archivo "pruebas.html"
        $("#imgLW a").on("click", function(event)
        {
            //Cancelamos que redireccione el link
            event.preventDefault();
            
            //Cargamos el archivo y le damos un stilo CSS
            jQuery.facybox({ ajax: 'pruebas.html' }, 'my-groovy-style'); 
        });
    });
</script>

En nuestro body

Código:

 <div id="imgLW">        
        <a href="#" rel="facybox.bolder">CLICK AQUI PARA VER CARTA DE TES</a>
    </div>

Entonces, cuando haga click en el enlace que esta en el div "imgLW", cargara la pagina pruebas.html

Lo unico que cambie en tu pagina "FLIPBOOK", fue la llamada al JS turn, ya que como lo descargamos debemos ocupar el que tenemos ahora y le puse un ready en vez de tu funcion window

Código:

<script type="text/javascript" src="js/turn.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#magazine').turn({
        display: 'double',
        acceleration: true,
        gradients: !$.isTouch,
        elevation:50,
        when: {
            turned: function(e, page) {
            /*console.log('Current view: ', $(this).turn('view'));*/
            }
        }
    });
});>

Saludos