02
FEV

Booklet - Un plugin JQuery pour créer vos EBooks web

Publié le 02/02/11 à 14h14 par Sybio

Booklet est un plugin JQuery qui vous permet de faire des EBooks designs et très configurables.

 

Exemple de Booklet

Pratique, il vous permettra de mettre en place des catalogues ou encore des livres bien sympas sur vos sites !

Les pages se tournent avec fluidité, et le plugin est compatible IE6.

 

Code:

Côte code, il faut bien entendu inclure dans votre page la librairie JQuery, mais aussi le plugin easing pour les animations du livre, et bien entendu, le plugin Booklet lui-même ainsi que son fichier CSS.

Le code HTML est simple, votre livre est représenté par un conteneur auquel vous attribuez un ID ou une class, dans cet exemple il est représenté par l'ID "mybook". A l'intérieur de ce conteneur, vous ajoutez un sous-conteneur de class "b-load": cette dernière permet de simuler un slide. Enfin, ajoutez les blocs qui correspondront à vos pages:

<div id="mybook">
	<div class="b-load">
		<div> 
			<h3>Yay, Page 1!</h3>
		</div>
		<div> 
			<h3>Yay, Page 2!</h3>
		</div>
		<div> 
			<h3>Yay, Page 3!</h3>
		</div>
		<div> 
			<h3>Yay, Page 4!</h3>
		</div>
	</div>
</div>

Pour initialiser l'EBook, appelez la fonction booklet pour votre conteneur:

$('#mybook').booklet();

Vous pouvez également ajouter des options qui se trouvent sur cette page, lors de l'initiation de votre EBook.

Par exemple, pour une vitesse de changement des pages rapide:

$('#mybook').booklet({ speed: 300 });

 

Site Officiel

Démos

Baraguiné par atomestudio le 02/02/11 à 15h31
atomestudio sur La Ferme du Web
très intéressant merci !
Baraguiné par Teenage le 02/02/11 à 17h06
Teenage sur La Ferme du Web
J'avais déjà bidouillé une présentation dans ce style
(http://expositions.operadeparis.fr/ "Roger Pic au travail")
mais en utilisant Columnizer (http://welcome.totheinter.net/columnizer-
jquery-plugin/)
Si on peut greffer l'un sur l'autre ça pourrait être quasiment automatiser tout le processus...
Baraguiné par xam1311 le 09/02/11 à 11h33
xam1311 sur La Ferme du Web
j'aime assez , mais il faut voir la rapidité d'exécution sous IE

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web