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 > Galeries et diaporamas > ImageFlow > Archives ImageFlow > ImageFlow pour SPIP version 0.9

ImageFlow pour SPIP version 0.9

reflets et profondeur pour faire défiler vos vignettes

17 août 2008 – par StephK – 36 commentaires

3 votes

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 :

-  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 reflect.php ( rajoutez le code $_GET['bgc'] = '#ffffff'; à la ligne 22 pour un fond blanc)

téléchargement

Zip - 15.5 ko
ImageFlow pour Spip v0.9

Voir en ligne : site du créateur du script, Finn Rudolph

Dernière modification de cette page le 20 octobre 2009

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 8 octobre 2009 à 12:53, par pbu En réponse à : ImageFlow pour SPIP

    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

  • Le 13 juillet 2009 à 10:40, par Risotto En réponse à : ImageFlow fonctionne à 50%

    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

  • Le 6 juillet 2009 à 16:09, par spamor En réponse à : ImageFlow pour SPIP

    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

  • Le 6 juillet 2009 à 15:53, par spamor En réponse à : ImageFlow pour SPIP

    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

  • Le 3 juillet 2009 à 18:00, par spamor En réponse à : ImageFlow pour SPIP

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

    • Le 3 juillet 2009 à 18:04, par spamor En réponse à : ImageFlow pour SPIP

      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

  • Le 13 avril 2009 à 18:02, par Vanso En réponse à : Enlever l’image sous la partie qui défile

    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.

    • Le 14 avril 2009 à 15:06, par fchamalo En réponse à : Ne fonctionne pas sous IE7

      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.

    • Le 15 avril 2009 à 08:52, par Vanso En réponse à : Ne fonctionne pas sous IE7

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

      PNG - 66.8 ko
    • Le 15 avril 2009 à 12:07, par fchamalo En réponse à : Ne fonctionne pas sous IE7

      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.

      ++

    • Le 15 avril 2009 à 13:48, par Vanso En réponse à : Ne fonctionne pas sous IE7

      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.

      PNG - 44.9 ko
    • Le 15 avril 2009 à 18:23, par fchamalo En réponse à : Ne fonctionne pas sous IE7

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

    • Le 15 avril 2009 à 19:16, par StephK En réponse à : Ne fonctionne pas sous IE7

      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

    • Le 16 avril 2009 à 10:11, par Vanso En réponse à : Ne fonctionne pas sous IE7

      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.

    • Le 16 avril 2009 à 10:29, par fchamalo En réponse à : Ne fonctionne pas sous IE7

      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.

    • Le 16 avril 2009 à 10:49, par Vanso En réponse à : Enlever l’image sous la partie qui défile

      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.

    • Le 16 avril 2009 à 10:58, par Vanso En réponse à : Ne fonctionne pas sous IE7

      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

  • Le 16 janvier 2009 à 23:44, par ? En réponse à : Intégration imageflow

    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 :

    merci beaucoup d’avance

    Répondre à ce message

  • Le 20 décembre 2008 à 21:57, par ? En réponse à : ImageFlow pour SPIP

    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

  • Le 14 septembre 2008 à 21:51, par anne En réponse à : ImageFlow pour SPIP

    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

  • Le 18 août 2008 à 11:23, par océ En réponse à : ImageFlow pour SPIP

    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

    • Le 18 août 2008 à 13:41, par Flo En réponse à : ImageFlow pour SPIP

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

    • Le 19 août 2008 à 21:21, par @rno En réponse à : ImageFlow pour SPIP

      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

    • Le 20 août 2008 à 13:10, par StephK En réponse à : ImageFlow pour SPIP

      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

    • Le 20 août 2008 à 13:24, par @rno En réponse à : ImageFlow pour SPIP

      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

    • Le 20 août 2008 à 21:29, par StephK En réponse à : ImageFlow pour SPIP

      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

    • Le 20 août 2008 à 22:14, par @rno En réponse à : ImageFlow pour SPIP

      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

    • Le 20 août 2008 à 22:16, par @rno En réponse à : ImageFlow pour SPIP

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

    • Le 20 août 2008 à 23:49, par StephK En réponse à : ImageFlow pour SPIP

      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

    • Le 21 août 2008 à 10:36, par @rno En réponse à : ImageFlow pour SPIP

      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

    • Le 24 août 2008 à 09:36, par ? En réponse à : ImageFlow pour SPIP

      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

    • Le 24 août 2008 à 15:27, par StephK En réponse à : ImageFlow pour SPIP

      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

Répondre à cet article

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

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

Ça spipe par là