ImageFlow pour SPIP version 1.2.1 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 1.2.1
- auteur du script original : Finn Rudolph
- ImageFlow est sous License Creative Commons Attribution-Noncommercial 3.0. 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

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 à la place du Portfolio.

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 reflect2.php ( rajoutez le code $_GET['bgc'] = '#000000'; à la ligne 22 pour un fond noir)

téléchargement

ImageFlow pour SPIP v. 1.2.1