ImageFlow + HighslideJS

ImageFlow + Highslide pour Spip 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 par un clic sur la vignette) permet d’avoir un portfolio sympathique à la « coverflow » d’iTunes d’Apple avec un effet de surgissement de l’image quand on clique sur une vignette.

Ils ont été adapté pour fonctionner avec SPIP à la place du Portfolio.

Présentation

-  nom du script : ImageFlow + Highslide pour SPIP
-  version 1.2.1 (ImageFlow) et 4.1.8 (HighslideJS)
-  auteur du script original ImageFlow : Finn Rudolph
-  auteur du script original HighslideJS : Torstein Honsi
-  ImageFlow est sous License Creative Commons Attribution-Noncommercial 3.0. Cela signifie qu’il faut l’autorisation de l’auteur pour une utilisation commerciale.
-  HighslideJS est sous License Creative Commons Attribution-NonCommercial 2.5. 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

Mise en oeuvre

-  télécharger l’archive ci-dessous
-  copier le dossier « javascript » de l’archive directement dans votre dossier « squelettes »
-  éditer le fichier « squelettes/article.html » de vos squelettes (ou inc-documents.html...) 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="Highslide" class="imageflow">
<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>

-  rajouter ces lignes dans le <head> :

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

Personnalisation

Les éléments du script et le bouton sont conçus pour être sur fond blanc. 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 imageflow.css
-  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 + HighslideJS pour SPIP

Dernière modification de cette page le 3 novembre 2009

Discussion

12 discussions

  • Bonjour,

    Je trouve ce plugin tout a fait génial pour rendre un côté plus sympathique à la diffusion de mes photos. Je l’ai ajouté au squelette de JY Giraud qui correspondait tout à fait à mes besoins (merci à lui).

    Etant débutant sous Spip, j’ai cherché à l’intégrer ailleurs que dans mes articles et là, ça coince. Je m’explique :

    -  Dans mes articles type Galerie, j’utilise le plugin Thickbox personnalisé par JY Giraud (http://jygiraud.free.fr/). Du coup, je voulais utiliser le plugin Imageflow + HighslideJS avec les résumés d’articles pour donner un aperçu sympathique de quelques photos. 2 problèmes se présentent alors :

    1) Il n’y a toujours que le premier article qui affiche ses photos, les autres non même si j’ai inclu le code nécessaire dans la boucle.

    exemple : http://charlyy83.free.fr/travel/spip.php?rubrique4

    2) Même les articles n’ayant rien dans le portfolio affiche le charge 0/0 du plugin, alors que cela ne le faisait pas dans les articles.

    exemple : http://charlyy83.free.fr/travel/spip.php?rubrique15

    Le code utilisé est en pj dans un fichier image.
    Merci d’avance de m’éclairer si vous le pouvez.

    Charly, newbe on Spip.

    Répondre à ce message

  • Quelqu’un a-t-il déjà essayé d’activer la navigation à l’aide de Highslide ?
    Ca peut éviter de devoir fermer la photographie puis de revenir dans ImageFlow...

    Répondre à ce message

  • Bonjour à tous,
    Je parviens à faire fonctionner correctement ce super script, par contre est-il possible d’afficher des photos à l’issue d’une requête mySQL ???
    ya pa moyen !!
    Help
    Merci

    Répondre à ce message

  • 3

    Le problème de renommer « squelettes-dist » en « squelettes » est qu’ensuite le squelette rajouté ( Ahunstic pour ma part ) n’est plus pris en compte et l’on retombe sur le squelette par défaut.

    Quelqu’un s’est-il déjà trouvé dans ce cas de figure ?

    • Asteroiide

      Bonjour

      J’ai rencontré le même problème que Blackbird : je ne souhaite pas renommer le dossier squelettes-dist (j’utilise Zpip)
      En fait, les adresses faisant référence au dossier javascript sont écrites en dur dans deux fichiers.
      Une solution consiste à les remplacer :

      Pour le fichier highslide-full.js à la ligne 56 j’ai remplacé « squelettes » par « plugins/zpip »

      Pour le fichier imageflow.js à la ligne 157, même modification sans oublier de remonter d’un dossier l’adresse définie dans la même ligne pour le paramètre php img.

      En espérant que cela puisse vous aider.

      Asteroiide

    • Denis Chatiron

      Bonjour,
      J’utilise Zzip également et ne sais pas dans quels fichiers copier les lignes ci-dessus

      [(#REM) Portfolio : album d’images ]...
      etc ...

      et

      rajouter ces lignes dans le

       :

      Pour les modif highslide-full.js à la ligne 56 et imageflow.js à la ligne 157, je pense y arriver.

      Merci à vous

    • Asteroiide

      Bonjour Denis

      J’ai collé ces lignes dans contenu/page-sommaire.html car je ne voulais utiliser ce plugin qu’uniquement sur la page d’accueil.

    Répondre à ce message

  • Bonjour,

    J’ai installé le plugin avec succès mais je trouve les vignettes de défilement vraiment trop petites...
    Quelqu’un a-t-il essayé de modifier la taille des images et de la barre de défilement, est-ce seulement possible et où ? (je galère pour trouver l’info)

    Merci d’avance pour votre aide.

    Répondre à ce message

  • 2
    Pierre-Louis

    Bonjour,

    voilà le petit problème que je viens soulever.

    J’ai voulu joindre des documents (pdf) à des articles. Normalement, un ’pied de page’ affiche la liste des articles joints. Mais voilà je modifie mon site pour l’utilisation de ce plugin, les articles ne s’affichent plus... (on a le texte et puis c’est tout).
    Je pense que le problème vient de la modification du fichier article.html puisque le paragraphe remplacé traite initialement des images et des documents.

    Si vous avez une solution pour la cohabitation des deux merci beaucoup.

    (je tiens à préciser que si j’enlève ce plugin, j’ai bien le pied de page avec mon pdf et lorsque je refais la modif il disparait).

    • Salut,

      Je ne sais pas quel squelette tu utilises, mais je pense que tu dois supprimer la partie autres documents joints (autres que les images) dans ton squelette article.

      Essaie de rajouter ce code après le portfolio imageflow :

      [(#REM)
              Sinon, liste des autres documents joints
      ]
      <B_documents_joints>
              <div id="documents_joints">
              <h2><:titre_documents_joints:></h2>
              <ul>
                      <BOUCLE_documents_joints(DOCUMENTS) {id_article} {extension !IN gif,jpg,png} {vu=non}{par num titre, date}>[
                      <li>
                              <a href="(#URL_DOCUMENT)" title="<:bouton_telecharger:>" type="#MIME_TYPE">[(#TITRE|sinon{<:info_document:>})]<div id="logodoc">#LOGO_DOCUMENT</div></a>
                              <small>(<span>#TYPE_DOCUMENT[ &ndash; (#TAILLE|taille_en_octets)]</span>)</small>
                              #DESCRIPTIF
                      ]</li>
                      </BOUCLE_documents_joints>
              </ul>
              </div>
      </B_documents_joints>

      ton PDF devrait revenir...

      @+

    • Pierre-Louis

      Je ne sais pas par quoi commencer...

      Allons à l’essentiel : ça fonctionne nickel !
      J’utilise toujours le squelette d’origine livré à l’installation de SPIP.

      Et un grand merci pour la réactivité et la qualité de la solution proposée.

    Répondre à ce message

  • Je pense que les explications fournies par l’auteur de l’article sont excellentes et suffisantes, mon cas était singulier, comme je voulais utiliser les documents (images) d’un article déjà existant Fonds d’écran sans modifier le porte-folio ni utiliser les squelettes par mots clefs, j’ai créer un copie de la page article avec les modifications proposées, je l’ai appelée imageflow et je l’appelle avec une url du type http://monsite.fr/?page=imageflow&id_article=xx. J’ai ensuite créer un article en redirection sur cette adresse pour garder ainsi, l’article original avec le porte-folio classique et un nouvel article (le même) mais avec ImageFlow-HighslideJS pour le porte-folio : Images flow.
    Voilou, c’est pas très malin, mais cela m’a rendu service. Spip offre beaucoup de possibilités.

    Répondre à ce message

  • 3

    Tout simplement excellent ! Sous Firefox, IE8,Chrome,Safari !
    Sur un article page= et redirection pour ne pas modifier le porte folio.
    Merci c’est très sympa.
    Visible

    • pierre-louis

      Je comprends de moins en moins ce qu’il faut faire pour qu’il fonctionne...
      Personne ne veut faire un tutos pour les nuls ? Car si ça marche si certains c’est l’installation chez les autres qui est ratée...
      Très franchement lorsqu’on ne baigne pas dans SPIP, c’est plutôt confu comme explications.

      Merci d’avance.

    • Salut à tou-te-s,

      J’ai compris votre pb : l’adresse du fichier php qui produit l’image avec reflet dans le fichier imageflow.js part du principe que vos squelettes sont dans un dossier « squelettes ». Apparemment vous utilisez les squelettes par défaut de spip qui sont dans un dossier « squelettes-dist ». Il suffit donc de renommer le dossier « squelettes-dist » en « squelettes » pour que ça fonctionne...

      Stéphane

    • Effectivement... J’ai renommé le dossier squelette-dist en squelette et... Ca fonctionne !
      Je m’en veux de ne pas avoir trouvé ça...
      Merci beaucoup.

    Répondre à ce message

  • 2
    pierre-louis

    J’ai exactement le même problème que Richard.

    Version spip 2.0.10
    Squellette d’origine
    Portfolio installé
    Dossier javascript dans /squelettes-dist

    Dans le dossier /squelettes-dist
    j’ai trouvé les deux fichiers (article et inc-doc...)
    j’ai modifié le bloc portfolio dans inc-doc...
    j’ai créé une balise < head > ... < / head> en début de fichier inc-doc... (car il n’y en a pas) et j’arrive au résultat suivant :
    -  j’ai des cases vides avec une croix rouge que je peux faire défiler...
    -  Lorsque je clique sur une case vide. S’affiche : chargement... Mais rien ne vient non plus...
    (copie d’écran ci joint)

    J’avais sauvegardé mon fichier inc-doc... que j’ai remis en place. Mais le porfolio ne fonctionne plus (plus d’affichage dans les articles...) Ce n’est pas très grave car pour l’instant je teste...

    Donc si vous avez une petite solution pour installer ce plugin qui me ravirait... Merci d’avance.

    • pierre-louis

      Un petit ajout si ça peut aider.
      Mon post précédent était pour IE.
      Sous Firefox c’est un peu pareil sauf qu’il n’y a plus les cadres.

      Au fait, le dossier macosx on en fait quoi ?

      Merci d’avance

    • le dossier macosx est un dossier invisible sur mac créé par le système, il n’est d’aucune utilité pour sur un site web, on peut le supprimer sans souci

    Répondre à ce message

  • Désolé c’est illisible. J’essaie de trouver un moyen pour vous mettre le script à disposition.

    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