ImageFlow pour SPIP version 1.2.1

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 :

[(#REM) Portfolio : album d'images ]

        <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>

-  rajouter ces 2 lignes 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>

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

ImageFlow pour Spip v1.2.1

Discussion

6 discussions

  • 2

    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...

    • 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

    • 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

  • 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

  • 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) :

    $_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

  • 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.

    • il faut ensuite copier article.html du dossier eva web et le coller dans le dossier squelettes où se situent les fichier du plugin image flow

    Répondre à ce message

  • 11

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

    • 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..

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

      Stéphane

    • 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.

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

    • 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....

    • 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;

    • 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....

    • Y’a pas de quoi !

      @+ Stéphane

    • 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

    • 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

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

    Répondre à ce message

  • 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

Ajouter un commentaire

Qui êtes-vous ?

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

Dernière modification de cette page le 21 octobre 2009