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>