Siccome sto evitando come la peste di usare flash nei miei progetti, ho cercato su google alternative, ovviamente come al solito l'alternativa è stata Jquery...
LINK FLIPBOOK
Inizialmente non funzionava su IE9 ma poi ho risolto, rimane solo il problema con IE8..ho letto che jquery (come css3) non è compatibile con la maggior parte dei lavori fatti in jq.
Il nuovo turn.js (versione 4 e compatibile con IE8) è disponibile solo a pagamento.Qualcuno ha usato o ha una soluzione a problemi di retrocompatibilità con turn.js?
Posto un pò di codice:
codice:<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../../turn.min.js"></script> <style type="text/css"> body{ width: 100%; text-align: center; /*centra orizzontalmente per IE ma non altri browser*/ background-color:#fff } #wrapper{ width: 1024px; /*valore d'esempio*/ position: absolute; left:0px; /*permette di posizionare con proprieta left e margin*/ /*l'angolo destro di wrapper sara al 50% della larghezza della finestra del browser*/ margin-left: -12px; /*meno metà di width per postare wrapper verso la sinistra e centrarlo*/ } </style> <style type="text/css"> #magazine{ width:1124px; height: 768px; text-align:center } #magazine .turn-page{ background-color:#fff; background-size:100% 100%; text-align:center } </style> </head> <body class="normal" id="body"> <div id="wrapper"> <div id="magazine" style="align:center;position:fixed;" > <div style="background-image:url(pages/01.jpg);"></div> <div style="background-image:url(pages/02.jpg);"></div> <div style="background-image:url(pages/03.jpg);"></div> <div style="background-image:url(pages/04.jpg);"></div> <div style="background-image:url(pages/05.jpg);"></div> <div style="background-image:url(pages/06.jpg);"></div> <div style="background-image:url(pages/07.jpg);"></div> <div style="background-image:url(pages/08.jpg);"></div> <div style="background-image:url(pages/09.jpg);"></div> <div style="background-image:url(pages/010.jpg);"></div> <div style="background-image:url(pages/011.jpg);"></div> <div style="background-image:url(pages/012.jpg);"></div> <div style="background-image:url(pages/013.jpg);"></div> <div style="background-image:url(pages/014.jpg);"></div> <div style="background-image:url(pages/015.jpg);"></div> <div style="background-image:url(pages/016.jpg);"></div> <div style="background-image:url(pages/017.jpg);"></div> <div style="background-image:url(pages/018.jpg);"></div> <div style="background-image:url(pages/019.jpg);"></div> <div style="background-image:url(pages/020.jpg);"></div> <div style="background-image:url(pages/021.jpg);"></div> <div style="background-image:url(pages/022.jpg);"></div> <div style="background-image:url(pages/023.jpg);"></div> </div> <div style="background: #fff; position:fixed; overflow: hidden; width:608px; height: 25px; left:2px; top:0px; z-index: 100;"> </div><div style="background: #fff; position:fixed; overflow: hidden; width:608px; height: 25px; left:609px; top:0px; z-index: 100;"> </div> <script type="text/javascript"> $("#magazine").bind("zooming", function(event, newZoomValue, currentZoomValue) { alert("New zoom: "+currentZoomValue); }); var zoom = $("#magazine").turn("zoom"); alert("Current zoom: "+zoom); // Reduce the size in half of the flipbook $("#magazine").turn("zoom", 0.5);</script> <script> $(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>
Rispondi quotando
