SPIP - Contrib

Utiliser mon compte FaceBook pour m'identifier

Langues du site : [ar] [en] [es] [fr] [it]

61 visiteurs en ce moment

Accueil du site > Contribs > Images, Galeries > Galeries, Diaporamas > ImageFlow > ImageFlow pour SPIP

[17 commentaires]

ImageFlow pour SPIP

reflets et profondeur pour faire défiler vos vignettes

dimanche 17 août 2008, par stephane

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

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


ImageFlow pour Spip v0.9

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

17 Messages de forum

Voir toute la discussion

Pages 1 | 2

15 septembre 10:10 , par anne

ImageFlow pour SPIP

Oups....ça fonctionne...j’ai juste chargé d’autres images et tout est maintenant ordre.

http://annejamati.fr/spip.php?article6

Merci encore pour cette cool présentation !
14 septembre 21:51 , par anne

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
24 août 15:27 , par stephane

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
24 août 09:36

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
22 août 12:21 , par Paladin

ImageFlow pour SPIP

Plus long que prévu, j’ai suivi les bugs signalés ici (IE en vertical, ça vient d’un margin et padding qu’il faut forcer à 0).

Tout frais ! C’est sur Quesaco.org et aussi sur la zone.

Pour utiliser le plugin sur un seul article, voir le squelette.

Amusez-vous bien.
22 août 12:10 , par vbat

ImageFlow pour SPIP

On attend avec impatience...
Merci Paladin !
21 août 10:36 , par @rno

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
20 août 23:49 , par stephane

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
20 août 22:16 , par @rno

ImageFlow pour SPIP

Avec thickboxV2 activé ça semble fonctionner aussi ...
20 août 22:14 , par @rno

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

Pages 1 | 2

Répondre à cet article

SPIP-ZONE : portfolio_imageflow
Pages 1 | 2 | 3 | 4

Ça discute par ici

Notation d’éléments SPIP
25 juillet, par b_b, Matthieu Marcillaud
Ce plugin propose un système de notation des éléments de SPIP depuis l’espace public.

17 commentaires
Appliquer un filtre sur autre chose qu’une balise
22 septembre 2005, par mortimer
Voilà un petit truc pour appliquer des filtres SPIP sur des chaînes non dynamiques dans le squelette

6 commentaires
SPIP 2.0 RC1 (Release Candidate 1) est sortie
20 novembre, par L’équipe de SPIP-Contrib
Découvrez enfin cette version tant attendue !

44 commentaires
Le plugin saveauto : sauvegarde automatique de la base de données de SPIP
27 novembre 2006, par cy_altern
Le plugin saveauto permet de réaliser automatiquement une sauvegarde de la base de données de SPIP selon une fréquence et des paramètres configurables.

45 commentaires
Forms & tables - carnet de notes
17 mars 2007, par Cedric Morin, NicolasR
Embryon de doc par compilation de messages divers sur les listes et irc - Plugin pour des formulaires complètement adaptables, avec gestion des données.

323 commentaires