SPIP - Contrib

SPIP - Contrib

[ar] [en] [es] [fr] [it]

55 visiteurs en ce moment

fontsizeup fontsizedown
[32 commentaires]

ImageFlow pour SPIP

reflets et profondeur pour faire défiler vos vignettes

dimanche 17 août 2008, par StephK

1 vote

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.4 ko
ImageFlow pour Spip v0.9

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

Retour en haut de la page

32 Messages de forum

Voir toute la discussion

Pages 1 | 2 | 3 | 4

  • Répondre à ce message

    3 juillet 18:04 , par spamor

    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

    3 juillet 18:00 , par spamor

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

  • Répondre à ce message

    16 avril 10:58 , par Vanso

    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

    16 avril 10:49 , par Vanso

    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.

  • Répondre à ce message

    16 avril 10:29 , par 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.

  • Répondre à ce message

    16 avril 10:11 , par Vanso

    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.

  • Répondre à ce message

    15 avril 19:16 , par StephK

    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

  • Répondre à ce message

    15 avril 18:23 , par 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) ?

  • Répondre à ce message

    15 avril 13:48 , par Vanso

    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.

  • Répondre à ce message

    15 avril 12:07 , par 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.

    ++

Pages 1 | 2 | 3 | 4

Répondre à cet article

Retour en haut de la page

Ça discute par ici