Flipbook avec Jquery

Voici un flipbook jquery, pour nos tablettes c’est pratique et facile à mettre en oeuvre, et c’est complétement SEF, puisque vos images sont intégrées dans le code html directement, pour ceux qui seraient intéressés par une intégration du flipbook, j’ai mis le code dans la suite de l’article :


flipbook

Voir le flipbook

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>book-jquery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/layout.css"/>

<script language="javascript" src="js/jquery.js"></script>
<script language="javascript" src="js/common.js"></script>
<script language="javascript" src="js/ajax.js"></script>
</head>

<body>
<div id="dMain">
<div id="dTopContainer">

<div id="dOverlay" style="background:url('') no-repeat;">
<div id="dContent">
<script language="javascript" src="js/bookflip.js"></script>

<div id="dBookContainer">
<div id="dBook" style="position:relative">
<div id="dBookFlipOverlayIconLeft" style="position:absolute; z-index:10; top:236px; left:14px; visibility: hidden" onMouseOver="toggleOverlayIcon('Left',true);" onMouseOut="toggleOverlayIcon('Left',false);"> <a href="javascript:goprev();"><img src="imgs/book-arrow-left.png" /></a> </div>
<div id="dBookFlipOverlayIconRight" style="position:absolute; z-index:10; top:236px; left:742px; visibility: hidden" onMouseOver="toggleOverlayIcon('Right',true);" onMouseOut="toggleOverlayIcon('Right',false);"> <a href="javascript:gonext();"><img src="imgs/book-arrow-right.png" /></a> </div>
<div id="dBookImage">
<div id="myBook" style="display:none;">
<div></div>
<div style="background:url('imgs/01.jpg')"></div>
<div style="background:url('imgs/02.jpg')"></div>
<div style="background:url('imgs/03.jpg')"></div>
<div style="background:url('imgs/04.jpg')"></div>
<div style="background:url('imgs/05.jpg')"></div>
<div style="background:url('imgs/06.jpg')"></div>
<div style="background:url('imgs/07.jpg')"></div>
<div style="background:url('imgs/08.jpg')"></div>


</div>
</div>
<hr/>

<script type="text/javascript">

var myPageW=400;
var myPageH=472;

var pageBorderWidth=0;
var pageBorderColor="#000000";
var pageBorderStyle="solid";
var pSpeed=20;
var pSound=false;

var showBinder=false;
var binderImage = "dummy.gif";
var binderWidth = 0;
var numPixelsToMove = 20;
var selectNavigation=false;

var useOverlayIcon=true;

allowPageClick=true;
doIncrementalAutoFlip = false;

ini();
autoFlip(2);

</script>
<script language="javascript">
window.setTimeout('gonext()', autoflip_delay);
</script>

</body>
</html>


Laissez un commentaire