Le Superbe Effet ImageFlow adapté à WordPress
Par niss • 9 mar, 2008 • Catégorie: Customisations •L’effet Image Flow vous connaissez? ça ressemble à ça, et je pense que ça devrait vous plaire 
Voici ce que ça donne par exemple sur le thème Kruugle : Démo.
J’ai un peu adapté le code de manière à ce que soit automatiquement récupérés vos dix derniers articles et qu’ils apparaissent directement dans ce menu Image Flow… C’est vraiment du plus bel effet… Au moins aussi joli que le fameux Slideshow que vous commencez tous à bien connaître.
Alors comment ça fonctionne?
1/ Téléchargez ce fichier : ImageFlow ( 2106 Téléchargements )
Dézippez le dans le répertoire de votre thème.
2/ Ajoutez ces deux lignes de codes dans votre fichier header.php (juste avant < /head>) :
-
< link rel="stylesheet" title="Standard" href="< ?php bloginfo(’stylesheet_directory’); ?>/imageflow.css" type="text/css" media="screen" />
-
< script language="JavaScript" type="text/javascript" src="< ?php bloginfo(’stylesheet_directory’); ?>/imageflow.js">< /script>
(supprimez les espaces avant link, script et “?”!! Désolé, j’ai un problème d’affichage du code 
).
3/ Direction vos 10 derniers articles, éditez les et ajoutez-y un champ personnalisé ayant pour clé “imgmenu” et ayant pour valeur le nom de l’image que vous souhaitez associer à l’article (uniquement le nom, par le chemin complet!!).
4/ Uploadez les 10 images en question dans le sous-répertoire “img” de votre thème.
5/ Insérez la ligne de code ci-dessous où vous désirez faire apparaître cet ImageFlow (Le plus souvent, ce sera dans le fichier index.php) :
-
< ?php include (TEMPLATEPATH . ‘/featured.php’); ?>
(supprimez l’espace avant “?”)
Et voilà, le tour est joué, y’a plus qu’à admirer le résultat 
Articles Relatifs
niss est le Webmaster de (niss.fr)
Email à cet auteur | Tous les Articles par niss
Salut
Tu te reposes quand ?
Sinon , vas-tu mettre une demo sur un des thèmes parce que ton lien d’entrée n’est pas probant !!
A+
Hi hi.. Nous ici la semaine commence le dimanche
Ouais, faudrait que je l’intègre à un des thèmes pour voir montrer ça… Mais auquel
Très top cet effet
Je connaissais pas, merci de la découverte….
va falloir que je me mette à la photo…rire…
J’adore ces types de présentation….
Il ne marche pas l’exemple :’(
Apparemment ça refonctionne… J’ai parfois des soucis avec mes sites de preview… Hébegeur gratuit
marche pas chez moua
J’essaye dès que possible de l’installer sur mon autre site de preview
Le même pour la sidebar avec un défilement des images et que si on clic ca amène a l’article, je suis preneur
Hello Boris, à mon humble avis c’est parfaitement jouable.. Il suffit de retoucher un peu le css
Pour etre plus précis je cherche a mettre dans la sidebar un defilement des capture d’ecran de chaque blog deja interviewé avec défilement normal et que quand on clic sur la miniature ca ramene a l’interview que l’on a choisi, pas évident
A la rigueur faudrait que tu crée un catégorie “Anciens Interviewés”, puis dans le fichier featured.php, tu modifies la ligne query_post en indiquant l’id de cette catégorie… Et enfin, dans chacun des articles de cette catégorie tu penses bien à créer le champ perso “imgmenu” avec l’image qui va bien… Et je pense que ça devrait le faire.
Oui faut recréer pour chaque blog un post avec juste le champ perso et le titre dur dur
Effectivement, c’est un peu contraignant, mais c’est logique puisque tu veux qu’il apparaissent après un certain délai et non pas dès le début, au moment précis où tu écris l’article… Donc bien obligé de repasser dessus après coup..
non je veux bien que ca apparaisse des le debut mais je les voudrais tous lol donc ca risque de pas etre faisable en fait
C’est clair… Si tu te retrouves avec 30 image dedans, je pense que ça ne va pas le faire du tout..
En fait le top serais de pouvoir intégrer le système des “pages-galleries” du thème “Indomagz”
J’avoue que je n’ai pas trop étudié le truc… Mais y’a pas de raisons en essayant de récupérer un des fichiers category-…php et le morceau de code correspondant dans home.php, tu devrais peut être pouvoir adapter à ton thème. Mais bon, encore une fois je ne me suis pas du tout penché profondément sur ce thème.
Hello niss !
Juste pour te dire que la démo est HS, apparement, problème de code dans le thème.
Bye
Martin
Salut Martin, Oui je sais!! Je ne trouve pas le temps de l’installer ailleurs ou sur un autre thème!! Désolé les amis.
Voilà, j’ai mis un autre lien de démo
Pour Niss, ipipipiippppppppppp !
lol
Ce script est super ! Malheureusement il déconne un peu sur IE6 (les images sont décalées sur le haut) je sais que c’est pas une référence, mais pour mon cas c’est encore 20% de mes visiteurs…
La seule solution que j’ai trouvée, c’est de “tricher” dans le fichier CSS… Dans la balise #imageflow img, j’ai rajouté ces lignes : margin-top: 0px !important; margin-top: 240px; margin-left: 0px !important; margin-left: 190px; Et maintenant ça fonctionne
PS : Apparemment il a sorti la version 0.9 qui corrige (d’autres) bugs
Merci beaucoup PH pour ce retour!! ça pourra servir ça!
Je sais pas, mais est ce qu’il peut fonctioner sans le php. je compte integrer cette diapo dans un CD ?
A priori je dirais que oui, il peut fonctionner sans php puisque c’est un script JS. Cependant, l’affichage des images se fait avec un effet de reflet (reflect.php), et là, pour le coup, si tu veux cet effet, tu auras besoin du php… Ou alors il faut que tu trouves un moyen de l’intégrer au JS d’origine..
J’ai vu certains sites utilisant cet effet mais j’y ai jamais fait attention, bon là je viens de voir de quoi ça a l’air et comment c’est et à vrai dire c’est vraiment intéressant so thanks pour cet article
bonjour
j’ai dl la version 0.9 mais j ai toujours des problèmes sur ie6 . D’autres personnes aurait il eu le même problème ?
j ai egalement le probleme avec ie malgré la solution de php
j essai toutes les combinaison mais rien y fait
pour info j ai peut etre trouve la solution
j ai crée 2 feuilles de style imageflow.css
une pour firefox imageflow.css et l autre pour ie imageflow2.css
pour ie ( imageflow2.css) j ai mis dedans
#imageflow img {
position:absolute;
top:0px;
border:none;
margin-left:190px;
margin-top:100px;
}
puis dans le header.php j ai ajoute ceci
<link rel=”stylesheet” title=”Standard” href=”/imageflow2.css” type=”text/css” media=”screen”/>
<script language=”JavaScript” type=”text/javascript” src=”/imageflow.js”>
voila tout est centré si ca peut aider
Yop !
Est ce que quelqu’un peut m’ éclairer concernant cette phrase :
“3/ Direction vos 10 derniers articles, éditez les et ajoutez-y un champ personnalisé ayant pour clé “imgmenu” et ayant pour valeur le nom de l’image que vous souhaitez associer à l’article (uniquement le nom, par le chemin complet!!).”
Car je ne comprends pas vraiment le sens
Vous n’ auriez pas un exemple tout simple ?
merci @+
euh moi aussi tout comme Crunch, je ne comprends pas vraiment cette phrase…
c’est dans les css? “un champ personnalisé”…c’est à dire? est-ce que vous auriez une exemple de ce qu’il faut mettre svp?
merci beaucoup!
dslé c’est bon j’ai trouvé…c’est mieux de poser les questions après avoir mis le thème en place
Merci pour ce tuto !
Sa à l’air vraiment génial,
Malheureusement j’ai un problème, j’ai exactement tout suivi à la lettre
(Enfin je ne l’ai pas fait avec 10 articles, mais deux)
En rentrant les valeurs, en uppant dans img etc etc sauf que apparemment il est pas content :
“Warning: Division by zero in /homez.131/seriesdb/www/wp-content/themes/simplebalance/index.php on line 2
Warning: main(/homez.131/seriesdb/www/wp-content/themes/simplebalancephp’) [function.main]: failed to open stream: No such file or directory in /homez.131/seriesdb/www/wp-content/themes/simplebalance/index.php on line 2
Warning: main() [function.include]: Failed opening ‘/homez.131/seriesdb/www/wp-content/themes/simplebalancephp’’ for inclusion (include_path=’.:/usr/local/lib/php’) in /homez.131/seriesdb/www/wp-content/themes/simplebalance/index.php on line 2″
…Je galère un peu =( et je l’enlève en attendant d’avoir la solution car je vais bientôt lancer réellement le blog et niveau design ça fait pas joli l’erreur xD
Merci de m’aider,
Cordialement.
j ai egalement le probleme avec ie malgré la solution de php
Je ѕuis аgée ԁe 27 аnnéеs Et
tant piѕ sі on ne le dit pas .
Je m’appelle Philippine.
je suis actuellement des études de animateur sportif . Mon naturel est plutôt timide.