ImageFlow pour SPIP reflets et profondeur pour faire défiler vos vignettes

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

- 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