ImageFlow pour SPIP version 0.9

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 0.9
-  auteur du script original : Finn Rudolph
-  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 et la personne qui souhaiterait m’aider à en faire un plugin plus simple à mettre en oeuvre serait la bienvenue !

Un petit aperçu

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>
        <div id="documents_portfolio">
        <h2><:info_portfolio:></h2>     
<div id="imageflow"> 
	<div id="loading">
		<b>Loading images</b><br/>
    <img src="[(#CHEMIN{loading.gif})]" width="208" height="13" alt="loading" /> </div>
              <div id="images"> 
                <BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document} {extension IN png,jpg,gif} {par num titre, date} {doublons}>
                <img src="#CHEMIN{reflect.php}?img=../[(#LOGO_DOCUMENT||extraire_attribut{src})]" alt="[(#TITRE|couper{80}|texte_backend)]" longdesc="#URL_DOCUMENT" /> 
                </BOUCLE_documents_portfolio>
              </div>
	
  <div id="captions"></div>
	
  <div id="scrollbar"> 
    <div id="slider"></div>
  </div>
</div>

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

-  rajouter ces 2 lignes dans le <head> :

<link rel="stylesheet" title="Standard" href="[(#CHEMIN{screen.css}|direction_css)]" type="text/css" media="screen" /><script language="JavaScript" 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 reflect.php ( rajoutez le code $_GET['bgc'] = '#ffffff'; à la ligne 22 pour un fond blanc)

téléchargement

ImageFlow pour Spip v0.9

Discussion

11 discussions

  • Bonjour,

    J’ai installé le plug-in ImageFlow, j’ai fait des modifications pour ne pas afficher l’image sélectionnée.

    Ca marche, mais quand je fais défiler les images, certaines ne sont pas affichées.

    Ce qui est surprenant, c’est que d’un navigateur à l’autre, ce ne sont pas les mêmes ! Dans Firefox, il y a des espaces à la place des photos, dans Opera, j’obtiens des cadres vides très allongés verticalement, ...

    J’ai essayé de recharger les images, mais rien n’y fait, j’ai toujours le problème.

    Quelqu’un a-t-il déjà été confronté à cela ?

    Merci de votre aide

    Philippe

    Répondre à ce message

  • Bonjour, j’ai bien suivi la procédure d’install mais j’ai un souci que je ne peux passer souci lence (gag)

    En local, mes vignettes s’affichent bien et lors du clic, l’image complète apparaît en-dessous.

    Chez mon hébergeur, mes vignettes s’affichent bien, mais rien lors du clic ! Les images n’apparaissent même pas dans le code source.

    Quelle est la... source de mes ennuis ?

    Répondre à ce message

  • Je viens de comprendre qu’il fallait ajouter sa propre vignette au portfolio et donc tout baigne. Chapitre clos pour moi merci ^^

    Répondre à ce message

  • La balise #CHEMIN est erronée donc j’ai remplacé les balises #CHEMIN par le chemin en dur « plugins/portfolio_imageflow/imageflow/ » et ça semble marcher...
    Maintenant je regarde pourquoi mon carousel affiche l’icône générique de la vignette et pas un aperçu de mes images. A suivre donc :)

    Répondre à ce message

  • 1

    Bonjour, chez moi ça ne fonctionne pas... j’ai activé les documents joints, installé le plugin et collé le code dans article.html

    1. le javascript n’étant pas détecté, j’ai dû remplacer les balises #CHEMIN par le chemin en dur plugins/portfolio_imageflow/
    2. j’ai aussi remplacé dans le chemin des images car celles-ci ne s’affichaient pas
    3. et maintenant voici une partie du code source généré :

    Les chemins semblent bons mais aucune image ne s’affiche... ça bloque sur « loading »

    Je suis sous SPIP 2 / Firefox / Windows. Merci pour votre aide...

    • Sorry le code ne s’affiche pas. Je disais donc

      img src=« plugins/portfolio_imageflow/reflect.php ?img=../local/cache-vignettes/L150xH123/yyy-52caf.jpg » alt=« » longdesc=« IMG/jpg/yyy.jpg »

    Répondre à ce message

  • 10

    Bonjour,

    J’utilise ce script sur le site de mon école et il fonctionne parfaitement, merci beaucoup. Je cherche maintenant à enlever l’image qui s’affiche sous le défilement. Je souhaite en effet que cette zone soit relativement étroite en hauteur. Je suppose que la solution se trouve dans « imageflow.js » mais je sèche lamentablement.

    Merci d’avance.

    • fchamalo

      Salut.

      C’est à la fois une remarque pour ton site et une question pour le mien :

      En cherchant une solution, je me suis aperçu que beaucoup de gens ont le même problème : Quelque soit la version de ce plugin (moi j’ai la version 1.24 pour SPIP 2.0.5), il y a un problème avec Internet Explorer 7. chez moi ça bug, chez toi le plugin n’apparait même pas.

      Exemple : http://www.smj-chennevieres.fr/site/spip.php?article51
      Un vrai informaticien (pas comme moi) aurait-il la solution ? SVP MERCIIIIIIIIIII.

    • Bonjour,
      Oui, j’avais remarqué le problème avec IE7. Tu dis ne rien voir du tout, mais chez moi les images s’affichent sans pouvoir les faire défiler, et en rang d’oignon (voir copie d’écran ci-dessous). Je pensai régler ça plus tard, après avoir fait disparaître la vignette en dessous des images qui défilent. Je n’ai pour le moment aucune idée...

    • fchamalo

      Re !

      En effet je vois bien la même chose que toi.
      Quand je disais ne pas voir le plugin, je parlais effectivement juste du bouton de défilement ainsi que de l’aperçu de l’image. mais je t’accorde que du coup c’est un bug moins grave et moins handicapant (donc moins urgent) que le mien... et encore que je me demande ce qu’il se passerait si tu avais tenté avec davantage de photos.

      Merci pour ta réponse en tous cas.

      ++

    • J’ai mis en copie d’écran ci-dessous ce que « mon » IE7 voit, ça marche plutôt... bien. Juste, tout ImageFlow est décalé vers la droite. Sinon, ça fonctionne bien : défilement avec la molette de la souris, affichage sous le défilement... ça roule.

      As-tu vérifié tes styles dans les différentes feuilles css ?

      Bon courage, et si tu trouves une solution pour moi, merci.

    • fchamalo

      Merci de te préoccuper de mon cas ! :)

      Cela dit, je pense que tu as juste tenté de parcourir les premières photos : Va jusqu’à l’image 10 et tu t’apercevras que ça fait carrément tout buger ensuite.

      On pourrait me répondre qu’il me suffirait d’en mettre moins de 10, mais ça ne marche pas non plus. je mets ci-dessous une autre page de mon site (et donc soumise exactement au même code) où sont censées être présentes que deux photos et ça ne marche pas non plus.

      C’est par ici

      Il y a un VRAI bug sous IE7 !!!

      PS ; pour toi, puisque visiblement ce plugin ne réagit pas pareil en fonction des sites, as-tu tenté de mettre la dernière version (1.26) ?

    • Salut,
      Le bug sous IE 7 (et 8) est corrigé dans la dernière version d’Image Flow intégré aux squelettes IENSP : voir ici.

      Je n’ai pas encore eu le temps de faire un article pour expliquer comment l’intégrer à un squelette, mais en attendant, vous pouvez toujours pomper dans les squelettes IENSP+ImageFlow

      Pour la version sous forme de plugin, il vaudrait mieux aller directement poster un message sur le site de Christian qui l’a conçu.

      STéphane

    • Bonjour, j’ai modifié mes squelettes avec ta nouvelle version. Tout fonctionne bien avec Firefox et IE7. Reste un peu de cosmétique à faire mais c’est tout bon. Merci beaucoup, c’est extra.

    • fchamalo

      Re re re bonjour Vanso (c’est fou ce qu’on se fait des amis lorsqu’on partage les galères) !

      Je suis ravi de t’avoir aidé à trouver une solution ! Moi j’en suis toujours au même point... Cela dit cela me redonne espoir, vu que ton résultat est exactement celui que j’escompte. Cela me donne en plus un indice supplémentaire : à priori le plugin fonctionne parfaitement, et il doit s’agir d’un conflit entre la feuille css du plugin et celle de mon squelette perso. Te serait-il possible de me donner le bout de code que tu as inséré dans ton squelette pour que je le compare au mien ?

      fchamalo@hotmail.com (suis sur msn aussi)

      Merci d’avance.

    • J’ai trouvé comment enlever (ou plutôt masquer) l’image en dessous du slider. A toute fin utile, si ça peut aider quelqu’un : mettre les styles « max-height » et « max-width » à zéro dans le fichier qui commande l’appel au portfolio (et adapter la css « imageflow » en supprimant bordure et fond dans le style « bloc-affichage »). Sur mon site, j’ai mis ça sur la page d’accueil mais par défaut, le code est dans « inc-documents » du squelette iensp. Encore bravo pour ce script bien sympa. Pour voir le résultat, c’est ici.

    • Re re re aussi,

      Voila le code que j’ai mis dans le squelette où je souhaite afficher le slider :

              <B_documents_portfolio>
      		<a href="#portfolio" name="portfolio" id="portfolio"></a>
              <div id="documents_portfolio">
         
      <div id="myImageFlow" class="imageflow">
                      <BOUCLE_documents_portfolio(DOCUMENTS) {id_article=951} {mode=document} {extension IN png,jpg,gif} {par num titre, date} {doublons}>
                      <img src="[(#LOGO_DOCUMENT||extraire_attribut{src})]" alt="[(#TITRE|couper{80}|texte_backend)]" longdesc="#URL_DOCUMENT" /> 
                      </BOUCLE_documents_portfolio>
                    </div>
      
      <div class="clear"></div>
                 <div id="bloc-affichage"> <img id="affichage" style="max-height: 0px; max-width: 0px;" /></div> 
                </div> 
                <!-- fin docs portfolio -->		
              </B_documents_portfolio>

      Au passage : comme je l’ai indiqué, ne souhaitant pas voir l’image sous le défilement, j’ai mis à zéro « max-height » et « max-width » puis enlevé bordure et couleur de fond dans la css (style « bloc-affichage ».

      Autre précision : tu remarqueras l’appel à l’article 951, c’est celui où j’ai mis mes images en portfolio.

      Note aussi que j’ai récupéré les fichiers « imageflow.css », « imageflow.js », ainsi que « reflect2.php » et reflect3.php" depuis le site IENSP. Les autres manips ne sont pas bien compliquées : j’ai récupéré l’appel css et js depuis « inc-head.html » et la boucle imageflow depuis « inc-documents.html ».

      Avec ça, tu devrais obtenir un chouette résultat.

      Bon courage (ne suis pas sur msn, désolé)

    Répondre à ce message

  • Bonjour et merci pour ce superbe système d’affichage !!

    J’ai quelques souci quant à la mise en place de ce système dans ma page « diaporama ». L’idée c’était d’obtenir 20 photos publiées récemment sur mon site en spip et de les présenter à la façon de imageflow.

    J’obtiens mes photos dans la partie inférieure ainsi que la barre de défilement slidebar. MAIS je n’ai pas la prévisualisation de la partie supérieure... ce qui fait perdre tout son charme à imageflow...

    Auriez vous une idée pour me venir en aide ??
    je suis sur spip 2.02
    le code de ma page :

    #CACHE{7200}
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR">
    <head>
    	<title>[[(#NOM_SITE_SPIP|textebrut)]] : [(#NOM|textebrut)]</title>
    	<INCLURE{fond=styles}{lang}>
    	
    	<link rel="stylesheet" title="Standard" href="[(#CHEMIN{screen.css}|direction_css)]" type="text/css" media="screen" /><script language="JavaScript" type="text/javascript" src="[(#CHEMIN{imageflow.js})]"></script>
    
    </head>
    <body dir="#LANG_DIR" class="#LANG auteur">
    <div id="page" class="auteur">
    
    <!-- *****************************************************************
    	Bandeau, titre du site et menu langue
    	Header and main menu (top and right) 
        ************************************************************* -->
    	
    <INCLURE{fond=inc/inc-bandeau}{lang}>
    
    <!-- *****************************************************************
    	Contenu principal (centre)
    	Main content (center) 
        ************************************************************* -->
    	 <div id="bloc-contenu">
    [(#REM) Portfolio : album d'images ]
    
            <B_documents_portfolio>
            <div id="documents_portfolio">
            <h2><:info_portfolio:></h2>     
    <div id="imageflow"> 
    	<div id="loading">
    		<b>Chargement des Photos...</b><br/>
        <img src="[(#CHEMIN{loading.gif})]" width="208" height="13" alt="chargement en cours..." /> </div>
                  <div id="images"> 
                    <BOUCLE_documents_portfolio(DOCUMENTS) {tout} {age<30}{par hasard}{0,10} {extension==jpg|jpeg} >
                    <img src="#CHEMIN{reflect.php}?img=../[(#LOGO_DOCUMENT||extraire_attribut{src})]" alt="[(#TITRE|couper{80}|texte_backend)]"longdesc="#URL_DOCUMENT" /> 
                    </BOUCLE_documents_portfolio>
                  </div>
    	
      <div id="captions"></div>
    	
      <div id="scrollbar"> 
        <div id="slider"></div>
      </div>
    </div>
    
    <div class="clear"></div>
                <img id="affichage" style="max-height: 600px; max-width: 550px;" /> 
              </div> 
              <!-- fin docs portfolio -->		
            </B_documents_portfolio>
    
     
    		</div><!-- bloc-contenu -->
    
    <!-- *****************************************************************
    	Menus contextuels (droite)
    	Contextual menus (right) 
        ************************************************************* -->
    	<div id="encart">
    	<INCLURE{fond=inc/inc-breves}{lang}>
    	</div><!-- encart -->
    <INCLURE{fond=inc/inc-menu}{lang}>
    <INCLURE{fond=inc/inc-bas} {lang}>
    </div><!-- page -->
    
    </body>
    </html>

    merci beaucoup d’avance

    Répondre à ce message

  • Coucou tout le monde,
    Les pages de Rudolph ont changé d’adresse : elles se trouvent désormais ici.
    Bravo à lui, et bravo aussi pour cette excellente adaptation à SPIP !
    A+
    Cyril

    Répondre à ce message

  • 1

    Bonjour et merci pour ce super portfolio.

    Il fonctionne parfaitement SAUF (hé oui...il y a toujours un sauf ;-), ...sauf que je n’arrive pas à personnaliser la couleur de mon fond malgré tes indications suivantes :

    (- Modifiez la couleur de réflexion des vignettes d’image dans le fichier reflect.php ( rajoutez le code $_GET[’bgc’] = ’#ffffff’ ; à la ligne 22 pour un fond blanc)

    Si tu as une idée de l’endroit où chercher...je prends !

    le lien pour voir : http://annejamati.fr/spip.php?article6

    Répondre à ce message

  • 11

    bonjour

    j’ai mis le dossier pour ce plugin dans mon squelette mais spip, dans l’espace privé puis « gestion des plugins », ne le reconnait pas, il ne me l’affiche pas, contrairement à d’autre plugin comme ceux pour l’agenda

    peut on me dire pourquoi ?

    merci

    • Oui, parce que c’est pas un plugin, donc faut faire les modifs à la main comme indiqué dans l’article !

    • Bonjour Stéphane,
      ça faisait un bail ...
      je me demandais comment tu as obtenu un défilement horizontal des vignettes ... les miennes défilent verticalement ...
      merci de m’éclairer.

      arno.59

      http://valarep.free.fr

    • Salut,
      Bizarre, ce défilement vertical... Peux-tu me donner l’adresse d’un article où je pourrais mieux voir ce qui se passe ?

      @+ Steph

    • Salut stephane,

      merci de répondre aussi vite...
      En fait, pour affiner mes dires d’hier ... Je me suis aperçu que ça fonctionne nikel sous firefox (le défilement est bien horizontal) par contre sous IE7 le défilement des vignettes est vertical.
      Ce qui m’étonne c’est que sur ton site de démo (http://skus1.free.fr/spip.php?article307&var_skel=iensp_vPP-MH) ça s’affiche nikel que ce soit avec ie7 ou firefox ... ... est ce dû au jeu de squelettes utilisé et à la largeur de la page, je n’en c rien.
      D’autre part g essayé d’appliquer imageflow à article=75 et ça ne marche pas même en vidant le cache, il semble dépendre toujours du article.html qui lui est d’origine.

      pour te rendre compte :
      http://valarep.free.fr/spip.php?article75

      @ bientôt

      @rno

    • Resalut.

      2 niveau de réponses :
      -  ton squelette article=75.html s’applique à tous les articles de le rubrique 75 mais pas à l’article 75... (voir ici)
      -  le pb d’affichage vertical que j’ai pu visualiser avec cette URL : http://valarep.free.fr/spip.php?page=article=75&id_article=75 n’est-il pas lié au plugin Thickbox2 qui n’aurait pas été désactivé dans l’espace privé ? Essaie de faire le test ?

      A priori j’ai testé le script avec IE6 et IE7 il fonctionnait. Par contre je n’ai pas de PC sous la main (j’ai un mac...) je n’ai pas pas pu voir ce que ça donnait avec ton site...

      Tiens-moi au courant de l’évolution des choses...

      @ bientôt
      Stéphane

    • Bonsoir Stéphane,

      Voilà où j’en suis ...
      j’ai abandonné l’idée pour l’instant de vouloir appliquer imageflow à un article spécifique. J’ai donc modifié article.html uniquement. En pricipe en mettant article=75.html on n’impacte que l’article 75 qui se trouve en l’occurrence dans la rubrique 6 ... enfin bref ... je verrai ça plus tard ...

      En ce qui concerne IE7 j’ai toujours ce défilement vertical par contre avec mozilla c nikel

      J’ai pris soin au préalable de désactiver thickboxV2.

      J’aimerais pourtant que ça fonctionne sous IE7

      Je te rappelle que sur ton site de démo ça fonctionne nikel avec les 2 navigateurs sus cités. Penses tu que ça puisse être lié au jeu de squelette (tu le reconnaîtras facilement c le tiens) ...

      @ +

      @rno

      PS : http://valarep.free.fr/spip.php?article75

    • Avec thickboxV2 activé ça semble fonctionner aussi ...

    • Je crois que j’ai trouvé le pb : c’est un pb de marge dans le fichier screen.css : essaie d’augmenter la valeur de margin-right et margin-left aux ligne 7 et 8 de ce fichier jusqu’à environ 50px, ça devrait rétablir l’horizontalité...

      @+ Steph

    • Il semble que le paramètre absolute ds le sceen.css

      #imageflow img
      position:absolute ;
      top:0px ;
      border:none ;

      ne soit pas interpretté de la même manière dans mozilla et IE7
      si on met « position : center » par exemple : dans ie7 je retrouve un défilement horizontal mais ds mozilla il devient vertical !!!
      par contre dans ie7 g des décalages ...
      Il semblerai que IE7 et mozilla interpette différemment le css ... c’était déjà le cas avec l’arrondi des blocs ... avec le paramètre moz-border-radius non pris en compte dans ie ...
      je reste perplexe. Avec le squelette iensp_vPP-MH ça semble fonctionner dans les 2 navigateurs.

      PS : j’ai compris mon erreur avec article=75 !!!

      cordialement,

      @rno

    • Bonjour stéphane,
      Je m’escrime depuis une semaine à essayer de trouver la solution pour adapter imageflow à mon site réalisé avec ton jeu de squelettes iensp3.
      A priori j’arrive à rétablir le défilement horizontal en jouant sur la largeur de contenu.contre-encart mais les vignettes (avec le reflect) sont décalées vers la gauche et
      mon #navigation disparaît.
      Comment puis-je recentrer le défilement de mes vignettes ? as tu une idée ?
      Merci.
      ça marche par défaut sur firefox mais IE7 ne veut rien savoir.
      Cordialement,
      @rno

    • Salut,
      Je pense que tu devrais tester avec le plugin qu’à fait C.Paulus à partir du script, tu le trouveras ici en attendant que je fasse un nouvel article pour le télécharger à partir de Spip-contrib

      @+ Stéphane

    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