SPIP-Contrib

SPIP-Contrib

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

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

Accueil > Affichage multimédia > Galeries et diaporamas > ImageFlow > ImageFlow pour SPIP version 1.2.1

ImageFlow pour SPIP version 1.2.1

20 octobre 2009 – par StephK – 20 commentaires

11 votes

reflets et profondeur pour faire défiler vos vignettes :

un portfolio qui imite l’effet coverflow d’iTunes, adaptation pour SPIP du script ImageFlow créé par Finn Rudolph

Présentation

-  nom du script : ImageFlow pour SPIP
-  version 1.2.1
-  auteur du script original : Finn Rudolph
-  ImageFlow est sous License Creative Commons Attribution-Noncommercial 3.0. Cela signifie qu’il faut l’autorisation de l’auteur pour une utilisation commerciale.
-  adaptation pour SPIP : Stéphane kus
-  démo : site de développement des squelettes IENSP

Ce script qui combine des fonctions graphiques PHP (pour la réflexion de la vignette), des fonctions d’interactivité en javascript (animation du flux de vignettes avec la souris ou les flêches du clavier et affichage dynamique de l’image sélectionnée) permet d’avoir un portfolio sympathique à la « coverflow » d’iTunes d’Apple.

Il a été adapté pour fonctionner avec SPIP à la place du Portfolio.

Mise en oeuvre

-  télécharger l’archive ci-dessous
-  copier les fichiers directement dans votre dossier « squelettes »
-  éditer le fichier « squelettes/article.html » de vos squelettes et remplacer le code du bloc Portfolio par le code ci-dessous :

-  rajouter ces 2 lignes dans le <head> :

Personnalisation

Les éléments du script et le bouton sont conçus pour être sur fond noir. Mais vous pouvez parfaitement l’adapter à la couleur de fond de votre site. Pour cela :
-  Modifiez l’image « slider.png » à votre goût
-  Modifiez les couleurs du fichier screen.css (ligne 2 pour le fond et 46 pour la ligne de déplacement du bouton)
-  Modifiez la couleur de réflexion des vignettes d’image dans le fichier reflect2.php ( rajoutez le code $_GET['bgc'] = '#000000'; à la ligne 22 pour un fond noir)

téléchargement

Zip - 21.2 ko
ImageFlow pour Spip v1.2.1

Dernière modification de cette page le 21 octobre 2009

Retour en haut de la page

Vos commentaires

  • Le 20 octobre 2009 à 12:30, par RealET En réponse à : ImageFlow pour SPIP version 1.0.3

    Attention : ce script n’est pas libre, il est seulement gratuit pour un usage non commercial, et payant pour un usage commercial (comme indiqué sur la page de téléchargement).

    Ne pas l’indiquer dans l’article est sans doute une violation de la licence...

    En tout cas, le plugin pour Wordpress l’indique explicitement.

    Par ailleurs, ce serait sympa de signaler à l’auteur du js de faire un lien vers SPIP-Contrib depuis cette page : http://finnrudolph.de/ImageFlow/Extensions

    Enfin, d’après le changelog, la version de ImageFlow de cette contrib est périmée...

    • Le 18 décembre 2010 à 18:02, par ? En réponse à : ImageFlow pour SPIP version 1.2.1

      Bonjour
      Sur le site test (SPIP 2.1.0)
      http://www.conceptvirtuel.ca/4_panier/local/cache-vignettes/L400xH301/3-1f459.png, je n’arrive pas à faire afficher les vignettes et le descriptif.

      Voici ce qui a été fait :
      Téléchargement du plugin sur cette page (sans succès), puis,
      Par plugin auto, téléchargement du plugin PORTFOLIO Imageflow 1.3.1
      Par FTP, ajout des fichiers imagelow.css, imageflow.js, reflect2.php reflect3.php et 4 imagesdans le squelette
      Modification de article=1.html pour ajuster le plugin tel que décrit dans cette page de spip contrib

      Dans CONFIGURATION, ajustement du curseur (non pris en compte) et coche longdesc comme une description (sans succès)

      Merci de m’aider.
      RP

    • Le 18 décembre 2010 à 19:27, par ? En réponse à : ImageFlow pour SPIP version 1.2.1

      RÉSOLUTION PARTIELLEhttp://www.conceptvirtuel.ca/4_panier/spip.php?article82

      Je réussis maintenant à faire défiler des vignettes et le curseur est changé.
      J’ai recopié le code de article-oo.html fourni avec le plugin. ceci implique un appel javascipt de la forme
      #IMAGEFLOW_INSERT_HEAD

      JE NE RÉUSSIS PAS À FAIRE AFFICHER LE DESCRIPTIF
      MERCI
      rp

    Répondre à ce message

  • Le 4 avril 2010 à 17:59, par korama En réponse à : ImageFlow pour SPIP version 1.2.1

    Bonjour,

    Je cherche à paramétrer le coverflow pour afficher l’image selectionnée en assez grand dans le slide afin de virer l’affichage du dessous. Malheureusement je ne trouve pas les paramètres à modifier (je suppose que c’est dans les js...). Quelqu’un a une idée ? Merci.

    Répondre à ce message

  • Le 24 février 2010 à 03:39, par ? En réponse à : Réflection sur un fond coloré

    Bonjour,

    Juste un petit mot pour dire qu’il est possible d’utiliser la réflection d’ImageFlow sur un fond coloré en faisant passer un paramètre de couleur dans le reflectionGET du .js

    Toutefois, il faudra commenter la ligne 22 de reflect2.php (si vous utilisez celui-ci) :

    1. $_GET['bgc'] = '#ffffff';

    En effet, cela force une réflection sur du blanc !!

    En espérant que cela serve à quelqu’un...

    Asteroiide

    Répondre à ce message

  • Le 17 janvier 2010 à 11:13, par Morgan En réponse à : ImageFlow pour SPIP version 1.2.1 avec squelette eva web 4.1

    bonjour,
    après avoir lutté plus d’une semaine avec le plug in, je vous donne la solution pour le faire fonctionner avec le squelette eva web.

    ce code :

      <B_documents_portfolio>
                    <a href="#portfolio" name="portfolio" id="portfolio"></a>
           <div id="documents_portfolio">
           <h2><:info_portfolio:></h2>    
    <div id="myImageFlow" class="imageflow">
                   <BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document} {extension IN png,jpg,gif} {par num titre, date} {doublons}>
                   <img src="[(#LOGO_DOCUMENT||extraire_attribut{src})]" alt="[(#TITRE|texte_backend)]" longdesc="[(#FICHIER|image_reduire{500,500}|extraire_attribut{src})]" />
                   </BOUCLE_documents_portfolio>
                 </div>

    <div class="clear"></div>
              <div id="bloc-affichage"><img id="affichage" style="max-height: 500px; max-width: 500px;" /> </div>
             </div>
             <!-- fin docs portfolio -->               
           </B_documents_portfolio>

    est à inclure dans le fichier : noisettes/article/article_portfolio_sans_jflip.html de votre dossier d’installation eva web (généralement /plugins/auto/eva_squelettes_pour_spip_2_0)

    Puis il faut modifier le fichier article_normal.html du dossier eva web (généralement /plugins/auto/eva_squelettes_pour_spip_2_0) en ajoutant le code suivant dans le head :

    <!-- This includes the ImageFlow CSS and JavaScript -->
    [<link rel="stylesheet" href="(#CHEMIN{imageflow.css}|direction_css)" type="text/css" media="projection, screen, tv" />]
    <script type="text/javascript" src="#CHEMIN{imageflow.js}"></script>

    en espérant que cela serve à quelqu’un, mes recherches ne m’ayant pas donné la solution, j’ai du mettre les mains dans le cambouis.

    Répondre à ce message

  • Le 21 octobre 2009 à 13:00, par StephK En réponse à : ImageFlow pour SPIP version 1.2.1

    Je viens d’intégrer la version 1.2.1 d’ImageFlow...

    • Le 27 octobre 2009 à 05:16, par buvette1 En réponse à : ImageFlow pour SPIP version 1.2.1

      Bonjour, j’ai un soucis avec ImageFlow qui affiche bien les images en grand mais pas les vignettes. A la place il y a l’icone de l’image non trouvée..
      je précise que dans la configuration de spip, la fonction pour générer automatiquement les miniatures est bien activée...
      je ne comprends pas.
      si donc quelqu’un a une idée...
      Merci d’avance parce que la j’ai passé pas mal d’heure à essayer de la faire fonctionner sans succès..

    • Le 27 octobre 2009 à 12:40, par StephK En réponse à : ImageFlow pour SPIP version 1.2.1

      Si tu peux nous donner l’adresse de ton site, ça aiderait à voir ce qui cloche...

      Stéphane

    • Le 28 octobre 2009 à 16:03, par buvette1 En réponse à : ImageFlow pour SPIP version 1.2.1

      Bonjour, alors je ne peux pas vous donner l’adresse du site puisqu’en fait ce sont quelques pages à l’interieur d’un espace sécurisé protégé par mot de passe et login....

      En revanche, je peux vous montrer une capture d’écran sur un essai que j’ai fait.

      JPEG - 22.1 ko
    • Le 28 octobre 2009 à 21:04, par StephK En réponse à : ImageFlow pour SPIP version 1.2.1

      Est-ce que tu peux faire un clic droit sur une vignette pour copier l’adresse et me l’envoyer sur le forum ?

    • Le 29 octobre 2009 à 03:11, par buvette1 En réponse à : ImageFlow pour SPIP version 1.2.1

      Alors quand je clic-droit sur l’image, ca donne un lien qui est :
      ADRESSE DU SITE SPIP /squelettes-test/iensp_vPP-MH_ImageFlow/reflect2.php ?img=../../local/cache-vignettes/L130xH98/images_1_-6a315.jpg

      et effectivement je n’ai pas de dossier squelettes-test...
      d’ailleurs je n’ai jamais installé de squelette iensp...

      d’ou ca peut venir tout ca ?
      Merci beaucoup de te pencher sur mon problème....

    • Le 29 octobre 2009 à 09:18, par StephK En réponse à : ImageFlow pour SPIP version 1.2.1

      Il faut faire une petite modif à la ligne 157 du fichier imageflow.js

      remplace la ligne par celle ci :
      src =  'squelettes/reflect'+version+'.php?img=../'+src+thisObject.reflectionGET;

    • Le 29 octobre 2009 à 13:17, par buvette1 En réponse à : ImageFlow pour SPIP version 1.2.1

      Un immense merci pour ton aide StephK, grâce à toi cela fonctionne maintenant parfaitement !!!!!
      Je sais pas que faire pour te remercier car ce qu’il y a de clair c’est que sans toi je n’y serais jamais arrivé !!!!
      merci infiniment....

    • Le 29 octobre 2009 à 20:04, par StephK En réponse à : ImageFlow pour SPIP version 1.2.1

      Y’a pas de quoi !

      @+ Stéphane

    • Le 13 novembre 2009 à 00:05, par buvette1 En réponse à : ImageFlow pour SPIP version 1.2.1

      J’ai encore un renseignement à demander, je n’arrive pas à faire afficher la description de l’image en cours de visualisation dans le bloc d’affichage sous ou dessus de cette image. En fait soit je fais afficher tous les descriptifs de toutes les images soit aucun ne s’affiche... une idée peut-être ? d’avance merci

    • Le 13 novembre 2009 à 07:45, par StephK En réponse à : ImageFlow pour SPIP version 1.2.1

      dans le fichier article.html de tes squelettes (ou inc-document.html), remplace la boucle portfolio par celle-ci :

      <BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document} {extension IN png,jpg,gif} {par num titre, date} {unique}>
      <img src="[(#LOGO_DOCUMENT||extraire_attribut{src})]" alt="[(#TITRE|texte_backend)][ - (#DESCRIPTIF)]" longdesc="[(#FICHIER|image_reduire{600,600}|extraire_attribut{src})]" />
      </BOUCLE_documents_portfolio></div></div><!-- fin docs portfolio -->
      </B_documents_portfolio>

      ça récupèrera de manière dynamique le titre et la description de chaque image...

      Stéphane

    • Le 13 novembre 2009 à 11:30, par buvette1 En réponse à : ImageFlow pour SPIP version 1.2.1

      Encore une fois merci !!! ca marche maintenant parfaitement....

    Répondre à ce message

  • Le 20 octobre 2009 à 13:06, par StephK En réponse à : ImageFlow pour SPIP version 1.0.3

    tu as raison... J’avais mis en mot-clé qu’il est sous license CC mais ça n’apparaît pas dans le site public. Je rajoute ça dans le corps de l’article.

    Stéphane

    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

  • Champs Extras 3

    16 janvier 2012 – 523 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Réservation d’événements

    16 mars 2015 – 188 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Les crayons

    23 avril 2008 – 815 commentaires

    Ce plugin permet d’éditer les contenus sur les pages publiques du site, sans passer par l’espace privé de SPIP.

  • LESS pour SPIP : Less-CSS (anciennement LESSpip)

    5 novembre 2010 – 43 commentaires

    Less-CSS (Anciennement LESSpip) est un plugin intégrant facilement le logiciel LESS dans SPIP. LESS est une extension de CSS ajoutant les variables, les classes, les opérations, les imbrications au langage. Facilitant ainsi l’écriture de (...)

  • Recommander

    3 avril 2011 – 16 commentaires

    Ce plugin propose une manière simple de suggérer de recommander par email un article à un ami. Fonction « recommander un article à un ami ». On l’ajoute dans n’importe quel squelette sous la forme : #RECOMMANDERtitre de la page,url de la page,intro (...)

Ça spipe par là