SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 229 visiteurs en ce moment

Accueil > Affichage multimédia > Images > Quickflip > Quickflip

Quickflip

9 mars 2015 – par Jean Christophe Villeneuve – 20 commentaires

5 votes

Ce plugin vous permet d’afficher une image recto-verso avec effet de retournement ou une image en recto et ses titre, descriptif et crédits au verso.

Description

Ce plugin est une adaptation pour SPIP du script quickflip-2 pour jquery de Jon Raasch : http://jonraasch.com/blog/quickflip-2-jquery-plugin

Le plugin propose un modèle nommé quickflip (original, non ?)

Installation

Comme tous les autres plugins, cf. http://www.spip.net/fr_article3396.html

Le plugin fonctionne sur les squelettes disposant des balises #INSERT_HEAD et #INSERT_HEAD_CSS.

Utilisation

Dans un article

Pour afficher deux images en recto-verso dans un article, il suffit d’utiliser le raccourci
<quickflip|img1=XX|img2=YY>
où XX correspond à l’id de l’image recto et YY à celui de l’image verso,

On peut aussi ajouter en paramètre la largeur des images en pixels
<quickflip|img1=XX|img2=YY|largeur=500>

La largeur par défaut est de 400px.

Et pour afficher une image et ses titre, descriptif et crédits au verso, c’est encore plus simple :
<quickflip|img1=XX>

Cerise sur le gateau, si vous avez installé le plugin Licence, vous pourrez aussi choisir une licence pour votre image et afficher le logo correspondant.

Dans un squelette

On peut aussi utiliser le plugin dans un squelette avec

[(#MODELE{quickflip}{img1=XX,img2=YY})]
qui peut aussi s’écrire
[(#MODELE{quickflip}{img1=XX}{img2=YY})]

et pour une seule image avec son titre, descriptif et crédits au verso, on utilisera
[(#MODELE{quickflip}{img1=XX})]

On peut aussi afficher le logo d’un article avec au verso son titre, descriptif et crédits avec
[(#MODELE{quickflip-logoart}{article=AA}{largeur=LL})]
où AA est bien sur le nuéro de l’article.

Démonstration

Voir une démo sur le site de test d’Escal

Voir en ligne : http://plugins.spip.net/quickflip

Dernière modification de cette page le 5 avril 2015

Retour en haut de la page

Vos commentaires

  • Le 24 mars 2015 à 08:59, par AlainF En réponse à : Quickflip

    Bonjour,
    pas de problème pour le modèle je fais un essai
    merci

    • Le 24 mars 2015 à 09:10, par AlainF En réponse à : Quickflip

      Ça marche avec le modèle dans le squelette :
      voir en bas de la page d’accueil du site

      Je souhaiterais pouvoir l’adapter aux trois articles : « soirées » , « anniversaires » et « mariages » avec les logos des articles, pour ne pas re programmer quand je changerais les logos des articles.

      Mais je fais confiance à tous les génies spipiens dont je ne suis pas.

    • Le 27 mars 2015 à 21:40, par Jean Christophe Villeneuve En réponse à : Quickflip

      le souci c’est que le javascript utilise le lien de l’image pour la retourner donc je ne vois pas comment générer le lien vers un article.

    • Le 28 mars 2015 à 09:33, par AlainF En réponse à : Quickflip

      c’est à dire, vu mon niveau en javascript (copier coller quand j’en ai besoin et encore ...)
      mais l’effet est sympa, sachons apprécier ton travail !

    • Le 28 mars 2015 à 17:31, par Jean Christophe Villeneuve En réponse à : Quickflip

      les 3 articles cibles sont fixes ou ils sont susceptibles de changer ?

    • Le 28 mars 2015 à 17:42, par AlainF En réponse à : Quickflip

      pour le moment ils sont fixes (les 3 articles d’une rubriques) mais ils sont présentés dans un ordre aléatoires voir la page d’accueil car je ne peux savoir si les visiteurs vont souhaiter des renseignements sur les soirées, les anniversaires ou les mariages ?

      Et quand ils arrivent sur le site, je souhaite qu’ils voient que l’ordre est différent d’une fois sur l’autre.

    • Le 28 mars 2015 à 17:55, par Jean Christophe Villeneuve En réponse à : Quickflip

      et pour l’instant, tu gères comment l’ordre aléatoire des 3 articles ?

      Et au verso de chaque image, tu imagines quoi ?

    • Le 29 mars 2015 à 10:04, par AlainF En réponse à : Quickflip

      Pour le moment une simple boucle (ARTICLES) avec les critères {id_rubrique=XX} {par hasard}
      affichage du #TITRE et du #CHAPO mais avec une limite |couper{xx}pour ne pas dépasser du bandeau.

      En faisant pivoter l’image, je pourrais remettre le #TITRE et le #CHAPO en entier.

    • Le 30 mars 2015 à 22:03, par Jean Christophe Villeneuve En réponse à : Quickflip

      bon comme c’est un cas très spécifique, c’est difficile de le proposer dans le plugin mais on peut y arriver ainsi (le plugin quickflip reste nécessaire néanmoins) :

      • création d’un dossier /squelettes à la racine du site
      • création d’un dossier /modeles dans /squelettes
      • création d’un fichier quicfliplogo3art.html dans /squelettes/modeles avec dedans ce code
        #SET{tailleimage,#ENV{largeur,400}}

           <BOUCLE_largeur(ARTICLES){id_rubrique=#ENV{rubrique}}{0,1}>
                [(#SET{width,[(#LOGO_ARTICLE|image_reduire{#GET{tailleimage}}|extraire_attribut{width} )]} )]
                [(#SET{height,[(#LOGO_ARTICLE|image_reduire{#GET{tailleimage}}|extraire_attribut{height} )]} )]
           </BOUCLE_largeur>

        <BOUCLE_3quickflip(ARTICLES){id_rubrique=#ENV{rubrique}}{par hasard}>
        <div class="quickflip-wrapper quickflip-logoart" style="[width:(#GET{width})px;][height:(#GET{height})px;]">

        <div class="quickflip-verso">

           <BOUCLE_verso(ARTICLES){id_article}>
           <div class="quickflip-texte" style="[width:(#GET{width}|moins{4})px;][height:(#GET{height})px;]">
               [<div class="quickflip-titre">(#TITRE)</div>]
               [<div class="quickflip-descriptif">(#CHAPO)</div>]
           </div>
             <div class="quickflip-lienart">
                 <a href="#URL_ARTICLE">
                     #TITRE
                 </a>
             </div>
           </BOUCLE_verso>

           <div class="quickflip-lien">
               <a href="#" class="quickFlipCta">
                   <img src="#CHEMIN{images/coin.png}" alt="" />
               </a>
           </div>

        </div>

        <div class="quickflip-recto">

           <div class="quickflip-image">
               <BOUCLE_recto(ARTICLES){id_article}>
                   [(#LOGO_ARTICLE||image_reduire{#GET{width},0})]
                   <div class="quickflip-lienart">
                       <a href="#URL_ARTICLE">
                           #TITRE
                       </a>
                   </div>
               </BOUCLE_recto>
           </div>

           <div class="quickflip-lien">
               <a href="#" class="quickFlipCta">
                   <img src="#CHEMIN{images/coin.png}" alt="" />
               </a>
           </div>
        </div>

        </div>
        </BOUCLE_3quickflip>
        <div class="nettoyeur"></div>
      • insertion dans ta page sommaire de ce code
        [(#MODELE{quickflip-logo3art}{rubrique=XX}{largeur=YY})]

        avec XX pour le numéro de la rubrique avec tes 3 articles
        et YY la bonne largeur pour chaque logo, soit le tiers de la largeur totale

      Bon après, il faudra peaufiner, en rajoutant ce que tu veux et en travaillant les css

    • Le 31 mars 2015 à 09:06, par AlainF En réponse à : Quickflip

      C’est ça avec bien sur des réglages, visible surcette page test

      Attention toutefois au nom du modèle et son appel :
      quicfliplogo3art.html
      [(#MODELE{quickflip-logo3art}{rubrique=XX}{largeur=YY})]
      Source d’erreur mais si on cherche à comprendre sans faire un simple copier coller, tout va pour le mieux.

      Pour ma part, j’ai utilisé sur la version de départ, le logo en background :

      background: url([(#LOGO_ARTICLE_RUBRIQUE|extraire_attribut{src})]) center center; background-size: cover;

      ce qui me permet de pouvoir changer de logo de temps en temps sans retravailler ni le logo, ni la taille du block et surtout de mettre en bandeau grisé, le titre et le chapo avec l’effet de survol.

      Mais j’aime bien cette base et elle va me servir sur d’autres sites, encor merci et bon boulot !!!

    • Le 31 mars 2015 à 20:52, par Jean Christophe Villeneuve En réponse à : Quickflip

      ah oui, il te faut rajouter quelques règles css :

      .quickflip-logoart{
         float: left;
      }
      .quickflip-logoart:hover{
         opacity: 0.8;
      }
      .quickflip-lienart{
         width: 100%;
         height: 30px;
         position: absolute;
         bottom: 0;
         background-color: black;
         opacity: 0.5;
         text-align: center;
      }
      .quickflip-lienart a{
         color: white !important;
         font-size: 18px;
         padding-left: 15px;
      }
    • Le 1er avril 2015 à 09:24, par AlainF En réponse à : Quickflip

      Alors la on est bien, je vais mettre des nouvelles photos mieux proportionnées et ça va le faire : voir la page

      Encore merci.

    • Le 1er avril 2015 à 12:09, par Jean Christophe Villeneuve En réponse à : Quickflip

      tu pourras aussi faire une image coin plus petite. Une image coin.png mise dans /squelettes/images devrait prendre la place

    • Le 1er avril 2015 à 13:12, par AlainF En réponse à : Quickflip

      Oui, mais j’aime bien la version qui attire l’œil, car naturellement, il y aura survol et clic,

      mais pouvoir personnaliser cette image, c’est bien et c’est fait en jouant sur les nuances rvb, la version 32x32 px en teinte rouge.
      Voir le lien

    • Le 1er avril 2015 à 18:18, par Jean Christophe Villeneuve En réponse à : Quickflip

      ça prend forme !

      rajouter une petite marge entre chaque image comme avant ?
      Ou indiquer une largeur un chouille plus grande ?

    • Le 2 avril 2015 à 08:45, par AlainF En réponse à : Quickflip

      ce sera sur l’autre version, je travaille sur le responsive...

    Répondre à ce message

  • Le 20 mars 2015 à 08:56, par AlainF En réponse à : Quickflip

    Bonjour,

    super effet et je me dis que je serais partant pour le mettre dans les squelettes :
    page d’accueil, sur les articles à la une, au survol du logo ou de l’image choisie, le texte du Chapo.

    Par avance, merci

    • Le 20 mars 2015 à 20:53, par Jean Christophe Villeneuve En réponse à : Quickflip

      Ouh là ouh là on se calme ! ;-) ça n’a déjà pas été facile pour mes modestes compétences de pondre ce plugin pourtant assez simple. Quand tu dis que tu serais partant, c’est une proposition pour le rendre plus performant ?

      Sinon, attention, Quickflip est indépendant d’Escal.

    • Le 23 mars 2015 à 09:13, par AlainF En réponse à : Quickflip

      Ce ne sont pas mes qualités de programmeur, mais si les réflexions, tests et autres aides peuvent apporter quelque chose, bien sur avec plaisir.

      Je souhaitais savoir si on pouvait utiliser une balise de type :
      [(#QUICKFLIP|img1=XX)]

      Bravo quand même pour ce travail surtout si c’est beaucoup pour ton niveau, tu as encore plus de mérites.

    • Le 23 mars 2015 à 22:09, par Jean Christophe Villeneuve En réponse à : Quickflip

      Hello

      Non, pas de balise pour l’instant car je ne sais pas encore faire... Peut-être y en aura-t-il une un jour ?

      En attendant, comme il s’agit d’un modèle, tu peux l’insérer dans un squelette ainsi
      [(#MODELE{quickflip}{img1=XX})]

    Répondre à ce message

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • CleverMail

    20 janvier 2010 – 635 commentaires

    CleverMail est un plugin permettant d’envoyer des lettres d’informations à des abonnés depuis SPIP. Issu au départ d’un développement libre complètement indépendant de SPIP, il a connu une première version pour SPIP 1.9 avant d’être complètement réécris (...)

  • SPMC : Squelette par mot clé V2.0

    21 septembre 2009 – 48 commentaires

    Ce plugin prend la suite de squelette par mot clef V1.92 qui ne fonctionnait plus sous SPIP 2.0.x. Avec l’accord de Mortimer qui n’a plus le temps de le maintenir, je prend donc la suite. Présentation du plugin « Squelette par mot clé V2.0 » Le (...)

  • Sarka-SPIP 3

    15 septembre 2009 – 211 commentaires

    Si la lignée 3 de Sarka-SPIP a été l’occasion de refaire presque entièrement le code du squelette elle continue à évoluer et à s’améliorer au fil des versions. Nous ne saurions trop conseiller aux nouveaux utilisateurs - et aussi aux anciens - (...)

  • Paiement avec Formidable

    16 février 2015 – 53 commentaires

    Ce plugin « Paiement avec Formidable » permet d’ajouter une étape de paiement à la fin de la saisie d’un formulaire créé par le plugin Formidable. Il le complète et nécessite par ailleurs le plugin bank qui gère l’interface technique avec les prestataires (...)

  • Spip2Spip

    21 février 2008 – 159 commentaires

    Spip2spip permet de synchroniser le contenu de plusieurs sites SPIP entre eux en étendant le principe de la syndication thématique. Les articles d’un SPIP sont récopiés d’un site à l’autre en conservant leur formatage (...)

Ça spipe par là