mLivre

Plugin jQuery, télécharger : version 2.0 (zip)

Demonstration

mLivre est un plugin jQuery, proposant un flipbook javascript pour que vos visiteurs puissent feuilleter vos images comme un magazine ou un livre

Illustrations : Laure Phelipon
<div id="demo1">
  <img src="celestin/couverture.jpg" width="650" height="325" />
  <img src="celestin/illustration2.jpg" width="650" height="325" />
  <img src="celestin/illustration7.jpg" width="650" height="325" />
  <img src="celestin/illustration10.jpg" width="650" height="325" />
  <img src="celestin/illustration13.jpg" width="650" height="325" />
  <img src="celestin/4couverture.jpg" width="650" height="325" />
</div>
<script type="text/javascript">
  $('#demo1').mLivre({
    width:650,
    height:325
  });
</script>

Options

dossier : Dossier contenant les deux images utilisées par le plugin Par défaut "mLivre/". Voir exemple

Illustrations : Laure Phelipon
<div id="demoLivreOption1">
  [...]
</div>
<script type="text/javascript">
  $('#demoLivreOption1').mLivre({
    width:650,
    height:325,
    dossier:'http://www.le-pret-a-surfer.com/mLivre/fichier/'
  });
</script>

pageDefault : Première page affichée (int) Par défaut 0. Voir exemple
Attention : la première page est numérotée 0

Illustrations : Laure Phelipon
<div id="demoLivreOption1">
  [...]
</div>
<script type="text/javascript">
  $('#demoLivreOption1').mLivre({
    width:650,
    height:325,
    pageDefault:2
  });
</script>

over : Activer l'animation au survole de la souris (boolean) Par défaut true. Voir exemple

Illustrations : Laure Phelipon
<div id="demoLivreOption2">
  [...]
</div>
<script type="text/javascript">
  $('#demoLivreOption1').mLivre({
    width:650,
    height:325,
    over:false
  });
</script>
Illustrations : Laure Phelipon
<div id="demoLivreOption3b">
  [...]
</div>
<script type="text/javascript">
  $('#demoLivreOption1').mLivre({
    width:650,
    height:325,
    over:false
  });
</script>
width : Largeur du livre (int)
height : Hauteur du livre (int) Par défaut 150.
Supression de width et height, taille responsive

Événements

eventLoad : Fonction lancée après le chargement du livre - Function():html div Par défaut null. Voir exemple

Illustrations : Laure Phelipon
<div id="demoLivreEvent1">
  [...]
</div>
<script type="text/javascript">
  $('#demoLivreEvent1').mLivre({
    width:650,
    height:325,
    eventLoad:function() {
      $('#demoLivreEvent1Sortie').html('Livre chargé : '+String(this));
    }

  });
</script>

eventOpen : Fonction lancée à chaque changement de page - Function(page:int):html div Par défaut null. Voir exemple
Attention : la première page est numérotée 0

Illustrations : Laure Phelipon
Div livre :
Page :
<div id="demoLivreEvent2">
  [...]
</div>
<script type="text/javascript">
  $('#demoLivreEvent2').mLivre({
    width:650,
    height:325,
    eventOpen:function(page) {
      $('#demoLivreEvent2SortieDiv').html(String(this));
      $('#demoLivreEvent2SortiePage').html(String(page));
    }

  });
</script>

Methodes

page Voir exemple
Passer à la page demandée

1 2 3 4 5 6
Illustrations : Laure Phelipon
<div id="demoLivreEvent1">
  [...]
</div>
<div style="text-align:center">
  <a href="javascript:$('#demoLivreMethode1').mLivre('page',0)">1</a>
  <a href="javascript:$('#demoLivreMethode1').mLivre('page',1)">2</a>
  <a href="javascript:$('#demoLivreMethode1').mLivre('page',2)">3</a>
  <a href="javascript:$('#demoLivreMethode1').mLivre('page',3)">4</a>
  <a href="javascript:$('#demoLivreMethode1').mLivre('page',4)">5</a>
  <a href="javascript:$('#demoLivreMethode1').mLivre('page',5)">6</a>
</div>
<script type="text/javascript">
  $('#demoLivreMethode1').mLivre({
    width:650,
    height:325
  });
</script>

suivant Voir exemple
Passer à la page suivante

Suivant
Illustrations : Laure Phelipon
<div id="demoLivreEvent2">
  [...]
</div>
<div style="text-align:center">
  <a href="javascript:$('#demoLivreMethode2').mLivre('suivant')">Suivant</a>
</div>
<script type="text/javascript">
  $('#demoLivreMethode2').mLivre({
    width:650,
    height:325
  });
</script>

precedent Voir exemple
Passer à la page précédente

Précédent
Illustrations : Laure Phelipon
<div id="demoLivreEvent3">
  [...]
</div>
<div style="text-align:center">
  <a href="javascript:$('#demoLivreMethode3').mLivre('precedent')">Suivant</a>
</div>
<script type="text/javascript">
  $('#demoLivreMethode3').mLivre({
    width:650,
    height:325
  });
</script>

resizeAll Voir exemple
Force la verification des tailles de toutes les instances (Appeller automatiquement au changement de taille)

$("#tabs").tabs({
  activate: function( event, ui ) {
    $('.mLivre').mLivre('resizeAll');
  }
});

resize
Force la verification de l'instances

mLivre cherche toujours à s'afficher dans la taille maximal, mais si une instance est cacher (exemple dans un onglet), il faut lancer la méthode resize à l'affichage de mLivre

Change Log

Version 2.0 : 11 novembre 2018

  • Refonte du code (optimisation, mise à jour pour support jquery 3, possiblité de plugin)
  • Affichage responsive (la taille s'adapte au conteneur
  • Supression des options width, height
  • Supression de l'option loader, mise par defaut
  • Ajout des méthodes resize et resizeAll

Version 1.2 : 08 novembre 2011

  • Amélioration du chargement des images
  • Correctif du chargement pour Internet Explorer
  • Création des options : loader

Version 1.1.1 : 08 novembre 2011

  • Correctif pour Internet Explorer

Version 1.1 : 15 juillet 2011

  • Gestion du chargement des images avant l'affichage

Version 1 : 11 juillet 2011

  • Création du plugin
  • Création des options : width, height, dossier, pageDefault, over
  • Création des méthodes : page, suivant, precedent
  • Création des évènements : eventLoad, eventOpen
Plugin du même auteur : mSelect