Présentation
- nom du script : ImageFlow + Highslide pour SPIP
- version 1.2.1 (ImageFlow) et 4.1.8 (HighslideJS)
- auteur du script original ImageFlow : Finn Rudolph
- auteur du script original HighslideJS : Torstein Honsi
- ImageFlow est sous License Creative Commons Attribution-Noncommercial 3.0. Cela signifie qu’il faut l’autorisation de l’auteur pour une utilisation commerciale.
- HighslideJS est sous License Creative Commons Attribution-NonCommercial 2.5. 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
Mise en oeuvre
- télécharger l’archive ci-dessous
- copier le dossier « javascript » de l’archive directement dans votre dossier « squelettes »
- éditer le fichier « squelettes/article.html » de vos squelettes (ou inc-documents.html...) 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="Highslide" class="imageflow">
<BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document} {extension IN png,jpg,gif} {par num titre, date} {unique}>
<img src="[(#LOGO_DOCUMENT||extraire_attribut{src})]" alt="[(#TITRE|texte_backend)][ - (#DESCRIPTIF)]" longdesc="[(#FICHIER|image_reduire{600,600}|extraire_attribut{src})]" />
</BOUCLE_documents_portfolio></div></div><!-- fin docs portfolio -->
</B_documents_portfolio>
- rajouter ces lignes dans le <head>
:
<!-- This includes the ImageFlow and Highslide CSS and JavaScript -->
[<link rel="stylesheet" href="(#CHEMIN{javascript/ImageFlow/imageflow.css}|direction_css)" type="text/css" media="projection, screen, tv" />]
<script type="text/javascript" src="#CHEMIN{javascript/ImageFlow/imageflow.js}"></script>
[<link rel="stylesheet" href="(#CHEMIN{javascript/highslide/highslide.css}|direction_css)" type="text/css" />]
<script src="#CHEMIN{javascript/highslide/highslide-full.js}" type="text/javascript"></script>
<script type="text/javascript">
hs.dimmingOpacity = 0.75;
</script>
Personnalisation
Les éléments du script et le bouton sont conçus pour être sur fond blanc. 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 imageflow.css
- 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é
12 discussions
Bonjour,
Je trouve ce plugin tout a fait génial pour rendre un côté plus sympathique à la diffusion de mes photos. Je l’ai ajouté au squelette de JY Giraud qui correspondait tout à fait à mes besoins (merci à lui).
Etant débutant sous Spip, j’ai cherché à l’intégrer ailleurs que dans mes articles et là, ça coince. Je m’explique :
- Dans mes articles type Galerie, j’utilise le plugin Thickbox personnalisé par JY Giraud (http://jygiraud.free.fr/). Du coup, je voulais utiliser le plugin Imageflow + HighslideJS avec les résumés d’articles pour donner un aperçu sympathique de quelques photos. 2 problèmes se présentent alors :
1) Il n’y a toujours que le premier article qui affiche ses photos, les autres non même si j’ai inclu le code nécessaire dans la boucle.
exemple : http://charlyy83.free.fr/travel/spip.php?rubrique4
2) Même les articles n’ayant rien dans le portfolio affiche le charge 0/0 du plugin, alors que cela ne le faisait pas dans les articles.
exemple : http://charlyy83.free.fr/travel/spip.php?rubrique15
Le code utilisé est en pj dans un fichier image.
Merci d’avance de m’éclairer si vous le pouvez.
Charly, newbe on Spip.
Répondre à ce message
Quelqu’un a-t-il déjà essayé d’activer la navigation à l’aide de Highslide ?
Ca peut éviter de devoir fermer la photographie puis de revenir dans ImageFlow...
Répondre à ce message
Bonjour à tous,
Je parviens à faire fonctionner correctement ce super script, par contre est-il possible d’afficher des photos à l’issue d’une requête mySQL ???
ya pa moyen !!
Help
Merci
Répondre à ce message
Le problème de renommer « squelettes-dist » en « squelettes » est qu’ensuite le squelette rajouté ( Ahunstic pour ma part ) n’est plus pris en compte et l’on retombe sur le squelette par défaut.
Quelqu’un s’est-il déjà trouvé dans ce cas de figure ?
Bonjour
J’ai rencontré le même problème que Blackbird : je ne souhaite pas renommer le dossier squelettes-dist (j’utilise Zpip)
En fait, les adresses faisant référence au dossier javascript sont écrites en dur dans deux fichiers.
Une solution consiste à les remplacer :
Pour le fichier highslide-full.js à la ligne 56 j’ai remplacé « squelettes » par « plugins/zpip »
Pour le fichier imageflow.js à la ligne 157, même modification sans oublier de remonter d’un dossier l’adresse définie dans la même ligne pour le paramètre php img.
En espérant que cela puisse vous aider.
Asteroiide
Bonjour,
J’utilise Zzip également et ne sais pas dans quels fichiers copier les lignes ci-dessus
[(#REM) Portfolio : album d’images ]...
etc ...
et
rajouter ces lignes dans le
:Pour les modif highslide-full.js à la ligne 56 et imageflow.js à la ligne 157, je pense y arriver.
Merci à vous
Bonjour Denis
J’ai collé ces lignes dans contenu/page-sommaire.html car je ne voulais utiliser ce plugin qu’uniquement sur la page d’accueil.
Répondre à ce message
Bonjour,
J’ai installé le plugin avec succès mais je trouve les vignettes de défilement vraiment trop petites...
Quelqu’un a-t-il essayé de modifier la taille des images et de la barre de défilement, est-ce seulement possible et où ? (je galère pour trouver l’info)
Merci d’avance pour votre aide.
Répondre à ce message
Bonjour,
voilà le petit problème que je viens soulever.
J’ai voulu joindre des documents (pdf) à des articles. Normalement, un ’pied de page’ affiche la liste des articles joints. Mais voilà je modifie mon site pour l’utilisation de ce plugin, les articles ne s’affichent plus... (on a le texte et puis c’est tout).
Je pense que le problème vient de la modification du fichier article.html puisque le paragraphe remplacé traite initialement des images et des documents.
Si vous avez une solution pour la cohabitation des deux merci beaucoup.
(je tiens à préciser que si j’enlève ce plugin, j’ai bien le pied de page avec mon pdf et lorsque je refais la modif il disparait).
Salut,
Je ne sais pas quel squelette tu utilises, mais je pense que tu dois supprimer la partie autres documents joints (autres que les images) dans ton squelette article.
Essaie de rajouter ce code après le portfolio imageflow :
ton PDF devrait revenir...
@+
Je ne sais pas par quoi commencer...
Allons à l’essentiel : ça fonctionne nickel !
J’utilise toujours le squelette d’origine livré à l’installation de SPIP.
Et un grand merci pour la réactivité et la qualité de la solution proposée.
Répondre à ce message
Je pense que les explications fournies par l’auteur de l’article sont excellentes et suffisantes, mon cas était singulier, comme je voulais utiliser les documents (images) d’un article déjà existant Fonds d’écran sans modifier le porte-folio ni utiliser les squelettes par mots clefs, j’ai créer un copie de la page article avec les modifications proposées, je l’ai appelée imageflow et je l’appelle avec une url du type http://monsite.fr/?page=imageflow&id_article=xx. J’ai ensuite créer un article en redirection sur cette adresse pour garder ainsi, l’article original avec le porte-folio classique et un nouvel article (le même) mais avec ImageFlow-HighslideJS pour le porte-folio : Images flow.
Voilou, c’est pas très malin, mais cela m’a rendu service. Spip offre beaucoup de possibilités.
Répondre à ce message
Tout simplement excellent ! Sous Firefox, IE8,Chrome,Safari !
Sur un article page= et redirection pour ne pas modifier le porte folio.
Merci c’est très sympa.
Visible là
Je comprends de moins en moins ce qu’il faut faire pour qu’il fonctionne...
Personne ne veut faire un tutos pour les nuls ? Car si ça marche si certains c’est l’installation chez les autres qui est ratée...
Très franchement lorsqu’on ne baigne pas dans SPIP, c’est plutôt confu comme explications.
Merci d’avance.
Salut à tou-te-s,
J’ai compris votre pb : l’adresse du fichier php qui produit l’image avec reflet dans le fichier imageflow.js part du principe que vos squelettes sont dans un dossier « squelettes ». Apparemment vous utilisez les squelettes par défaut de spip qui sont dans un dossier « squelettes-dist ». Il suffit donc de renommer le dossier « squelettes-dist » en « squelettes » pour que ça fonctionne...
Stéphane
Effectivement... J’ai renommé le dossier squelette-dist en squelette et... Ca fonctionne !
Je m’en veux de ne pas avoir trouvé ça...
Merci beaucoup.
Répondre à ce message
J’ai exactement le même problème que Richard.
Version spip 2.0.10
Squellette d’origine
Portfolio installé
Dossier javascript dans /squelettes-dist
Dans le dossier /squelettes-dist
j’ai trouvé les deux fichiers (article et inc-doc...)
j’ai modifié le bloc portfolio dans inc-doc...
j’ai créé une balise < head > ... < / head> en début de fichier inc-doc... (car il n’y en a pas) et j’arrive au résultat suivant :
- j’ai des cases vides avec une croix rouge que je peux faire défiler...
- Lorsque je clique sur une case vide. S’affiche : chargement... Mais rien ne vient non plus...
(copie d’écran ci joint)
J’avais sauvegardé mon fichier inc-doc... que j’ai remis en place. Mais le porfolio ne fonctionne plus (plus d’affichage dans les articles...) Ce n’est pas très grave car pour l’instant je teste...
Donc si vous avez une petite solution pour installer ce plugin qui me ravirait... Merci d’avance.
Un petit ajout si ça peut aider.
Mon post précédent était pour IE.
Sous Firefox c’est un peu pareil sauf qu’il n’y a plus les cadres.
Au fait, le dossier macosx on en fait quoi ?
Merci d’avance
le dossier macosx est un dossier invisible sur mac créé par le système, il n’est d’aucune utilité pour sur un site web, on peut le supprimer sans souci
Répondre à ce message
Désolé c’est illisible. J’essaie de trouver un moyen pour vous mettre le script à disposition.
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 : |