Problemas en ver un Flipbook (jquery) en ventana ajax

[fhederico]

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