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)
Discussions par date d’activité
11 discussions
Je cherche un outil de ce type depuis ce matin. Il en existe beaucoup. Mais en voilà un adapté à SPIP. Merci Stéphane.
Si personne n’est déjà dessus, je m’attaque à la version plugin. En fait, je m’y attaque quand même, j’ai un besoin pressant et ca ne devrait pas être trop long à écrire.
Résultat d’ici demain sur la zone, a priori.
On attend avec impatience...
Merci Paladin !
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.
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |