ImageFlow pour SPIP

reflets et profondeur pour faire défiler vos vignettes

vendredi 8 août 2008, par Stéphane Kus

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

6 Messages

# ImageFlow pour SPIP Le 14 août 2008 à 13:14, par budyraptor

Bonjour,

je viens de connaitre spip
et je suis tombé sur votre site

voila je n’y comprends pas grand chose encore
c’est mon premier jour avec spip

mais je regarde toutes les fonctionnalités qu"il propose

par rapport à votre article sur le ImageFlow pour SPIPvous indiquez

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 :

mais voila je n’ai pas le dossier "sequeletes" et du coup pas plus de fichier "article.html" ou autres

http://www.budyraptor.info/SITEspip/

pouvez vous me fournir quelques explications

merci

et félicitation pour votre travail ainsi que votre partage

Répondre à ce message
- # ImageFlow pour SPIP Le 14 août 2008 à 15:58, par Stéphane Kus
  
  Bonjour,
  Tous les fichiers qui composent le squelette de votre site ne sont effectivement pas à l’intérieur d’un dossier "squelettes", mais dans le dossier "dist" qui est normalement le dossier des squelettes par défaut fournis avec SPIP. Cela ne pose pas de problème, mais il faut donc placer les fichiers d’ImageFlow dans ce dossier "dist" et modifier le fichier "dist/article.html".
  
  @ bientôt
  
  Stéphane
  
  Répondre à ce message
# ImageFlow pour SPIP Le 8 décembre 2008 à 18:31, par fdlps

Bjr,
Je suis dans le montage de mon site perso CSS et html un peu de php bref ! je ne suis pas un expert.
Je suis avec image flow (que j’aimerai bien mettre sur ma page photo)
depuis un bout de temps et impossible de faire apparaitre mes images.
j’ai dl les fichiers
copié les fichiers
mais editer le fichier squelettes/article.html ???? je ne vois pas

j’ai un fichier html photo dans le quel je suppose je dois copier le code du bloc note [(#REM...
et l’autre code dans le head, pour le head c’est ok
pour le REM tout se bloque et rien ne s’affiche ?

J’ai réussi a mettre le squelette d’image flow dans ma page en copiant

etc...
J’ai assayé jpg jpeg changé pas mal de choses ect.. rien n’y fait...

en fait ma page s’ouvre avec juste le squelette d’image flow il fonctionne très bien bloque parfois pourquoi ?
mais sans le REM mystère...

je ne sais pas si vous pouvez m’aider ?

Merci d’avance
Jeremy

Répondre à ce message
- # ImageFlow pour SPIP Le 8 décembre 2008 à 20:40, par Stéphane Kus
  
  Peux-tu me donner l’adresse de ton site, je comprendrai mieux ton pb...
  
  Stéphane
  
  Répondre à ce message
  - # ImageFlow pour SPIP Le 9 décembre 2008 à 17:24, par fdlps
    
    http://n.haberlick.free.fr/nor/
    
    Merci
    
    Jeremy
    
    Répondre à ce message
# ImageFlow pour SPIP Le 25 mars 2010 à 10:19, par matthias

Bonjour,
J’ai installé le squelette "IENSP Pleine Page menu horizontal pour SPIP 2.0 avec ImageFlow +..."
http://iensp.free.fr/spip.php?article326 et je cherche à faire apparaître l’imageflow dans la page d’accueil mais n’y parviens pas. Faut-il rajouter les codes indiqués dans la page "article.html" (j’ai essayé aussi sans succès) ?
Pourriez-vous me donner des tuyaux pour le faire fonctionner, svp ?
Le lien est le suivant : http://frpcreation.toile-libre.org/spip/

Merci d’avance,
Cordialement,
Matthias

Répondre à ce message