jFlipBook

Que diriez-vous de feuilleter vos photos en ligne ?

Ce qu’il fait...

jFlipBook transforme les images d’un article en un petit livre « feuilletable ». Les coins sont cliquables et permettent de passer d’une page à une autre avec un effet de tourner de page.

On peut voir ?

Captureaoste1
Serveillez le coin en bas à droite ...
Captureaoste2
Un coin de ciel se voile...
Captureaoste3
Une page se tourne...

La démO, la démO, la démOOO... -> http://eva.tuxfamily.org/demo/spip....

Comment y fait...

Pas de flash mais du jQuery. jFlipBook utilise le module jFlip crée par Renato Formato. Vous pouvez lire son article ici : http://www.jquery.info/spip.php?art...

Installation

Ce plugin nécessite l’installation du plugin CFG

Pour une première installation de SPIP, assurez vous que :
-  L’option « utilisation des mots-clés » est activée,
-  L’option « utilisation des documents joints aux articles » est activée.
En cliquant sur Configuration.

Le plugin est récupérable sur le zone de SPIP dans le partie /plugins/_test_ en SVN ou sous forme zippée

ICI

.

Intégration dans un squelette

En premier lieu, vous devez insérer la ligne suivante dans votre squelette article, donc à l’intérieur d’une boucle ARTICLES, à l’endroit où vous voulez faire apparaître le livre :
<INCLURE{fond=jflipbook}{id_article}>

Il faut ensuite créer le mot-clé jflip (tout en minuscule).

Vous pouvez tester ce plugin dans un site SPIP sans squelettes activés. Un squelette « article-exemple.html » déjà modifié existe dans jFlipBook. Il suffit de le renommer en « article.html ».

Vos images doivent être insérées dans un article en documents joints en cliquant sur « joindre un document » en bas d’un article dans l’interface privée.

Limitation

Pour l’instant, les réglages (dimensions, etc.) s’appliquent à l’ensemble des jFlipBook d’un site. Encore un peu de temps, de patience et j’y arriverai...

A venir incessament sous peu...


-  Intégration dans les squelettes d’EVA-WEB,
-  Finition de la page de configuration, elle n’est pas belle pour l’instant,
-  Et donc paramétrage personnalisé pour chaque jFlipBook.

Discussion

12 discussions

  • bonjour,
    est-ce compatible spip 3.0 ? plutôt qu’une insertion dans le squelette, peut-on insérer un raccourcis modèle dans le texte de l’article ?
    peut-on changer la couleur rouge verso (blanc serait plus à mon goût)
    merci !

    Répondre à ce message

  • 1

    Bonjour,

    je ne pouvais pas modifier les configurations de mes jflipbook définies par des listes déroulantes (redimensionnement ou coin cliquable). J’ai dû modifier le fichier fonds/cfg_jflipbook.html en remplaçant par exemple
    <option value=« #ENVcorners,false »>
    par
    <option value=« false »[ (#ENVcorners|==’false’| ?’selected’)]>

    • Sauf que les accolades ont été supprimées lors de l’envoi...

    Répondre à ce message

  • Bonjour,
    J’ai installé le plugin jflip dans spip v2.1.11. Malgré des débuts laborieux, j’ai réussi à faire fonctionner le plugin.
    Mais en plus du livre JFlip, j’ai aussi le portfolio qui s’affiche avec toutes les images. Donc aucun intérêt.
    Ma question est donc comment supprimer l’affichage du portfolio ?

    Cordialement.

    Répondre à ce message

  • ChristianD.

    Bonjour,

    Sous Spip 2.1.0 installé sans souci mais comment faire pour afficher le titre ou le descriptif de l’image ?

    Merci d’avance.

    Répondre à ce message

  • 2

    Bonjour, je ne suis pas assez compétent pour tout comprendre mais un autre plugin rencontre un problème d’affichage avec ie8

    voir http://www.spip-contrib.net/Plugin-Douce-Galerie

    merci

    • Même problème également : visiblement IE8 n’aime pas jflip !
      Y a-t-il un expert javascript dans la salle qui pourrait rectifier la situation ? ce serait sympa ...

    • Pour rendre ce plugin fonctionnel sous IE8, il faut rajouter dans le head la ligne suivante :
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
      Elle permet de mettre IE8 en mode compatibilité IE7, et du coup cela fonctionne.

    Répondre à ce message

  • La version du plugin date un petit peu car elle intègre la version 0.3 de jflip. J’ai donc entrepris de faire évoluer le script en intégrant la version suivante 0.4 qui a comme intérêt de pouvoir paramêtrer via cfg d’autres aspects en particulier les couleurs du dégradé et la taille de l’onglet.
    J’ai à peu près terminé, au détail prêt que j’ai une erreur dans /jquery.jflip-0.4.min.js

    An invalid or illegal string was specified" code: "12
    [Break on this error] gradient.addColorStop(0, gradientColors[0]); 

    L’erreur vient de la syntaxe défaillante dans l’incorporation des valeurs des variables « lightcolor,darkcolor et plaincolor » dans le fichier /jflipbook.php du plugin.
    gradientColor est un tableau associatif et je dois mal syntaxer ça dans l’écriture de la fonction (voir ci-dessous) :

    $flux .= '<script type="text/javascript">
    (function($){$(function(){
    $("#g1").jFlip('.$largeur.','.$hauteur.',
    {background:"'.$couleur.'",
    cornersTop:'.$corners.',
    scale:"'.$scale.'",
    gradientColors:['.$darkcolor.','.$lightcolor.','.$plaincolor.'"]});
          				});
      					})(jQuery);';

    C’est le passage de gradientColors qui ne va pas, sachant que cette variable est utilisé par jquery par les appel tels que

    gradient.addColorStop(0, gradientColors[0]);
    gradient.addColorStop(stopHighlight/d, gradientColors[1]);
    gradient.addColorStop(1, gradientColors[2]);

    Si quelqu’un de plus compétent que moi en javascript pouvait me donner un coup de main, ça permettrait de finir le portage vers la version 0.4.

    Répondre à ce message

  • J’ai un probleme avec jflipbook, qui fonctionne bien !!! mais qui a fait disparaitre toutes les pieces jointes de tous mes articles.
    Que j’insère la ligne
    [(#CONFIGplugin|matchJFLIPBOOK| ?’ ’,’’)<INCLUREfond=jflipbookid_article>]

    dans article.html ou pas d’ailleurs.

    J’ai SPIP 2.0.9 et la dernière version de JFlipBook, installée automatiquement. J’ai le plugin CFG, et EVA 4.0
    Je décoche JFlipBook, les pièces jointes reviennent, je coche, ça disparait...
    Quelqu’un sait-il ce qui se passe ?
    Merci,
    Nicolas

    Répondre à ce message

  • macsym

    chez moi ça marche pas du tout. j’ai activé les plugins cfg et jflipbook, ensuite j’ai inseré mes images dans un article de test et renommer le fichier article-exemple.html en article.html. Enfin j’ai mis un lien dans mon sommaire.html vers article.html et devinez ce qui s’affiche : le code spip/html lol

    Et pourtant j’ai mis le mot clef jflip.

    je vous signale que j’utilise la version spip 2.0.6

    Répondre à ce message

  • Bonjour,

    Je n’arrive pas à feuilleter au delà de la première image. Soit je suis très gauche, soit l’interaction est difficile sous FF3/Vista.

    a+

    GLG

    Répondre à ce message

  • djouder

    Bonjour j’ai remarqué que le plugin jFlipBook ne marche pas avec internet explorer 8, rien ne s’affiche.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom