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 :
[(#REM) Portfolio : album d'images ]
<B_documents_portfolio>
<a href="#portfolio" name="portfolio" id="portfolio"></a>
<div id="documents_portfolio">
<h2><:info_portfolio:></h2>
<div id="myImageFlow" class="imageflow">
<BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document} {extension IN png,jpg,gif} {par num titre, date} {doublons}>
<img src="[(#LOGO_DOCUMENT||extraire_attribut{src})]" alt="[(#TITRE|texte_backend)]" longdesc="[(#FICHIER|image_reduire{500,500}|extraire_attribut{src})]" />
</BOUCLE_documents_portfolio>
</div>
<div class="clear"></div>
<div id="bloc-affichage"><img id="affichage" style="max-height: 500px; max-width: 500px;" /> </div>
</div>
<!-- fin docs portfolio -->
</B_documents_portfolio>
- rajouter ces 2 lignes dans le <head>
:
<!-- This includes the ImageFlow CSS and JavaScript -->
[<link rel="stylesheet" href="(#CHEMIN{imageflow.css}|direction_css)" type="text/css" media="projection, screen, tv" />]
<script 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 reflect2.php ( rajoutez le code $_GET['bgc'] = '#000000';
à la ligne 22 pour un fond noir)
Discussions par date d’activité
6 discussions
Attention : ce script n’est pas libre, il est seulement gratuit pour un usage non commercial, et payant pour un usage commercial (comme indiqué sur la page de téléchargement).
Ne pas l’indiquer dans l’article est sans doute une violation de la licence...
En tout cas, le plugin pour Wordpress l’indique explicitement.
Par ailleurs, ce serait sympa de signaler à l’auteur du js de faire un lien vers SPIP-Contrib depuis cette page : http://finnrudolph.de/ImageFlow/Extensions
Enfin, d’après le changelog, la version de ImageFlow de cette contrib est périmée...
Bonjour
Sur le site test (SPIP 2.1.0)
http://www.conceptvirtuel.ca/4_panier/local/cache-vignettes/L400xH301/3-1f459.png, je n’arrive pas à faire afficher les vignettes et le descriptif.
Voici ce qui a été fait :
Téléchargement du plugin sur cette page (sans succès), puis,
Par plugin auto, téléchargement du plugin PORTFOLIO Imageflow 1.3.1
Par FTP, ajout des fichiers imagelow.css, imageflow.js, reflect2.php reflect3.php et 4 imagesdans le squelette
Modification de article=1.html pour ajuster le plugin tel que décrit dans cette page de spip contrib
Dans CONFIGURATION, ajustement du curseur (non pris en compte) et coche longdesc comme une description (sans succès)
Merci de m’aider.
RP
RÉSOLUTION PARTIELLEhttp://www.conceptvirtuel.ca/4_panier/spip.php?article82
Je réussis maintenant à faire défiler des vignettes et le curseur est changé.
J’ai recopié le code de article-oo.html fourni avec le plugin. ceci implique un appel javascipt de la forme
#IMAGEFLOW_INSERT_HEAD
JE NE RÉUSSIS PAS À FAIRE AFFICHER LE DESCRIPTIF
MERCI
rp
Répondre à ce message
Bonjour,
Je cherche à paramétrer le coverflow pour afficher l’image selectionnée en assez grand dans le slide afin de virer l’affichage du dessous. Malheureusement je ne trouve pas les paramètres à modifier (je suppose que c’est dans les js...). Quelqu’un a une idée ? Merci.
Répondre à ce message
Bonjour,
Juste un petit mot pour dire qu’il est possible d’utiliser la réflection d’ImageFlow sur un fond coloré en faisant passer un paramètre de couleur dans le reflectionGET du .js
Toutefois, il faudra commenter la ligne 22 de reflect2.php (si vous utilisez celui-ci) :
En effet, cela force une réflection sur du blanc !!
En espérant que cela serve à quelqu’un...
Asteroiide
Répondre à ce message
bonjour,
après avoir lutté plus d’une semaine avec le plug in, je vous donne la solution pour le faire fonctionner avec le squelette eva web.
ce code :
est à inclure dans le fichier : noisettes/article/article_portfolio_sans_jflip.html de votre dossier d’installation eva web (généralement /plugins/auto/eva_squelettes_pour_spip_2_0)
Puis il faut modifier le fichier article_normal.html du dossier eva web (généralement /plugins/auto/eva_squelettes_pour_spip_2_0) en ajoutant le code suivant dans le head :
en espérant que cela serve à quelqu’un, mes recherches ne m’ayant pas donné la solution, j’ai du mettre les mains dans le cambouis.
il faut ensuite copier article.html du dossier eva web et le coller dans le dossier squelettes où se situent les fichier du plugin image flow
Répondre à ce message
Je viens d’intégrer la version 1.2.1 d’ImageFlow...
Bonjour, j’ai un soucis avec ImageFlow qui affiche bien les images en grand mais pas les vignettes. A la place il y a l’icone de l’image non trouvée..
je précise que dans la configuration de spip, la fonction pour générer automatiquement les miniatures est bien activée...
je ne comprends pas.
si donc quelqu’un a une idée...
Merci d’avance parce que la j’ai passé pas mal d’heure à essayer de la faire fonctionner sans succès..
Si tu peux nous donner l’adresse de ton site, ça aiderait à voir ce qui cloche...
Stéphane
Bonjour, alors je ne peux pas vous donner l’adresse du site puisqu’en fait ce sont quelques pages à l’interieur d’un espace sécurisé protégé par mot de passe et login....
En revanche, je peux vous montrer une capture d’écran sur un essai que j’ai fait.
Est-ce que tu peux faire un clic droit sur une vignette pour copier l’adresse et me l’envoyer sur le forum ?
Alors quand je clic-droit sur l’image, ca donne un lien qui est :
ADRESSE DU SITE SPIP /squelettes-test/iensp_vPP-MH_ImageFlow/reflect2.php ?img=../../local/cache-vignettes/L130xH98/images_1_-6a315.jpg
et effectivement je n’ai pas de dossier squelettes-test...
d’ailleurs je n’ai jamais installé de squelette iensp...
d’ou ca peut venir tout ca ?
Merci beaucoup de te pencher sur mon problème....
Il faut faire une petite modif à la ligne 157 du fichier imageflow.js
remplace la ligne par celle ci :
src = 'squelettes/reflect'+version+'.php?img=../'+src+thisObject.reflectionGET;
Un immense merci pour ton aide StephK, grâce à toi cela fonctionne maintenant parfaitement !!!!!
Je sais pas que faire pour te remercier car ce qu’il y a de clair c’est que sans toi je n’y serais jamais arrivé !!!!
merci infiniment....
Y’a pas de quoi !
@+ Stéphane
J’ai encore un renseignement à demander, je n’arrive pas à faire afficher la description de l’image en cours de visualisation dans le bloc d’affichage sous ou dessus de cette image. En fait soit je fais afficher tous les descriptifs de toutes les images soit aucun ne s’affiche... une idée peut-être ? d’avance merci
dans le fichier article.html de tes squelettes (ou inc-document.html), remplace la boucle portfolio par celle-ci :
ça récupèrera de manière dynamique le titre et la description de chaque image...
Stéphane
Encore une fois merci !!! ca marche maintenant parfaitement....
Répondre à ce message
tu as raison... J’avais mis en mot-clé qu’il est sous license CC mais ça n’apparaît pas dans le site public. Je rajoute ça dans le corps de l’article.
Stéphane
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 : |