SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 178 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > ImageFlow > ImageFlow + HighslideJS

ImageFlow + HighslideJS

28 octobre 2009 – par StephK – 23 commentaires

13 votes

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

Zip - 154.1 ko
ImageFlow + HighslideJS pour SPIP

Dernière modification de cette page le 3 novembre 2009

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 27 août 2010 à 13:37, par Charly En réponse à : ImageFlow + HighslideJS

    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.

    PNG - 25.7 ko

    Répondre à ce message

  • Le 11 août 2010 à 12:18, par Crunch En réponse à : ImageFlow + HighslideJS

    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

  • Le 13 juin 2010 à 09:16, par ecook En réponse à : ImageFlow + HighslideJS

    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

  • Le 13 novembre 2009 à 21:40, par Blackbird En réponse à : ImageFlow + HighslideJS

    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 ?

    • Le 30 janvier 2010 à 02:24, par Asteroiide En réponse à : ImageFlow + HighslideJS

      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

    • Le 26 mai 2010 à 11:32, par Denis Chatiron En réponse à : ImageFlow + HighslideJS

      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

    • Le 28 mai 2010 à 00:20, par Asteroiide En réponse à : ImageFlow + HighslideJS

      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

  • Le 4 mai 2010 à 14:36, par cmarty En réponse à : ImageFlow + HighslideJS

    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

  • Le 15 novembre 2009 à 14:47, par Pierre-Louis En réponse à : Compatibilité affichage document joint

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

    • Le 15 novembre 2009 à 15:55, par StephK En réponse à : Compatibilité affichage document joint

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

      @+

    • Le 15 novembre 2009 à 20:06, par Pierre-Louis En réponse à : Compatibilité affichage document joint

      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

  • Le 7 novembre 2009 à 14:47, par emile En réponse à : ImageFlow + HighslideJS

    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

  • Le 6 novembre 2009 à 19:54, par emile En réponse à : ImageFlow + HighslideJS

    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

    • Le 6 novembre 2009 à 22:41, par pierre-louis En réponse à : ImageFlow + HighslideJS

      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.

    • Le 7 novembre 2009 à 11:19, par StephK En réponse à : ImageFlow + HighslideJS

      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

    • Le 7 novembre 2009 à 12:08, par ? En réponse à : ImageFlow + HighslideJS

      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

  • Le 6 novembre 2009 à 15:47, par pierre-louis En réponse à : ImageFlow + HighslideJS

    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.

    JPEG - 16.4 ko
    • Le 6 novembre 2009 à 16:15, par pierre-louis En réponse à : ImageFlow + HighslideJS

      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

      JPEG - 11 ko
    • Le 7 novembre 2009 à 11:20, par StephK En réponse à : ImageFlow + HighslideJS

      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

  • Le 6 novembre 2009 à 10:15, par Richard En réponse à : ImageFlow + HighslideJS

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

    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

  • Import ICS 2 (agenda distant)

    2 août – 35 commentaires

    La version 2 du plugin « import ICS » en reprend la principale fonctionnalité, à savoir l’ajout automatique d’évènements distants dans la liste des évènements d’un site. À la différence de la première version, elle ne dépend pas du plugin « Séminaire » et est (...)

  • Newsletters

    16 janvier 2013 – 374 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

  • CKeditor 3.0

    4 octobre 2009 – 1217 commentaires

    CKeditor est l’évolution de l’éditeur WYSIWYG : FCKeditor, avec ce plugin vous pourrez utiliser cet éditeur à la place de l’éditeur de spip tout en laissant le choix à vos auteurs de l’éditeur qu’ils préfèrent utiliser. Attention : cet éditeur WYSIWYG (...)

  • GIS 4

    11 août 2012 – 1284 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • SPIPr

    23 mars 2015 – 75 commentaires

    SPIPr est à la fois une famille de squelettes et un framework pour le développement front avec SPIP. Prêt à l’emploi, thémable, responsive, et conçu dans une approche d’industrialisation et de développement rapide. Documentation source : (...)

Ça spipe par là