But
Ayant besoin d’une galerie photo pour un site, j’ai d’abord créé un squelette spécifique (incluant un bloc inc-walma...).
Puis, la question s’est posée d’utiliser plutôt les brèves ou les rubriques...
J’ai finalement opté pour un modèle pour me libérer de cette contrainte.
Le résultat est visible sur le site du Pays Bourgogne-Nivernaise (v1) et sur ce site de test
Cette approche permet en plus de personnaliser / réutiliser facilement les développements.
Installation
C’est un plugin, il suffit de le placer en sous-répertoire du dossier /plugins et de l’activer.
Utilisation
Vous disposez alors d’un nouveau raccourci typographique <diapoXX> permettant d’insérer les images de l’article XX sous forme de galerie/diaporama.
Vous pouvez spécifier le mode par defaut :
- <diapoXX|diapo> (équivalent à <diapoXX>) pour le diaporama
- <diapoXX|pause> pour le diaporama en pause
- <diapoXX|left> pour une galerie avec vignettes à gauche
- <diapoXX|right> pour une galerie avec vignettes à droite
- <diapoXX|center> pour une galerie avec vignettes en haut et grande image
Le modèle fonctionne avec JQuery, utilisant des appels AJAX pour la pagination et le chargement des images, mais reste fonctionnel sans javascript.
Personnalisation
Avec la version 2 du plugin, compatible SPIP3 et responsive, les paramètres sont définis dans une page de configuration. Plus besoin donc du fichier mes_fonctions.php.
Avec les versions antérieures :
Vous pouvez definir plusieurs paramètres de personnalisation dans votre fichier mes_fonctions.php :
- le temps de pause du diaporama (en millisecondes, par défaut 8000) :
//temps de pause 5 secondes :
$GLOBALS['diapo_temps']=5000;- le nombre de vignettes par page (par défaut 8) :
//10 vignettes par page :
$GLOBALS['diapo_vignettes']=10;- la largeur maximum de la « grande » (diaporama et center) image (en pixels, par defaut 560) :
//largeur de la grande image 500px maxi :
$GLOBALS['diapo_grand']=500;avec la feuille de style par défaut (diapo.css.html), le diaporama fera 4px de plus en largeur (2px de marge).
- La taille des vignettes (calculée automatiquement si elle n’est pas précisée pour que les vignettes tiennent sur une ligne en mode center).
//largeur et hauteur maxi des vignettes 80px :
$GLOBALS['diapo_vignette']=80;- la largeur maximum de la « petite » image :
$GLOBALS['diapo_petit']=350;Par défaut, il n’y a pas de restriction en hauteur pour les images (petite et grande) mais les vignettes sont réduite en largeur et hauteur.
Vous pouvez préciser également ces paramètres :
$GLOBALS['diapo_grand_h']=400;
$GLOBALS['diapo_petit_h']=300;
$GLOBALS['diapo_vignette_h']=70;Il n’y a pour l’instant pas de véritable gestion de modèles, mais c’est en réflexion. Vous pouvez déjà surcharger le modèle en posant le vôtre dans /squelettes/modeles/diapo.html.
[(Attention : certaines règles strictes (bidouilles) doivent être respectées en attendant mieux.
Regardez les commentaires dans le code des squelettes si vous personnalisez le modèle.
Mais il y a déjà de quoi faire avec la feuille de style et les modèles de pagination.)]
Discussions par date d’activité
169 discussions
Bonjour,
Dans le mode center, vignettes en haut, je voudrais supprimer la possibilité de placer le diaporama en mode icône gauche ou droite, en ne conservant que mode center et diaporama automatique.
En effet, n’ayant que 440 pixels de large pour l’affichage, les modes left et right,malgré les réductions ne se comportent pas bien.
Comment procéder pour cette modification ?
Merci et bravo pour cette contribution.
il suffit de les cacher en css :
@++
Répondre à ce message
Salut !
Toujours un petit bug que j’arrive à reproduire sur ta page demo.
1) Lancer le diaporama avec la flèche ;
2) L’arrêter en cliquant sur un bouton d’option vignettes (et non pas sur le bouton « arrêter diaporama » ;
3) Lancer à nouveau avec la flèche ;
==> le diaporama démarre mais la flèche demeure en place (au lieu de changer en bouton arrêt/pause).
Et une suggestion : Lorsqu’on clique sur une photo pendant le diaporama pour montrer un aggrandissement en Thickbox, le diaporama continue en-dessous du Thickbox. Aussi bien que lorsqu’on referme Thickbox on est deux ou trois photos plus loin. Ne serait-il pas mieux que l’ouverture de Thickbox fasse pauser le diaporama ?
Salut Paolo,
je viens de corriger, merci.
mais bon, c’est pas tres bien foutu ce truc, un coup ca s’appuie sur la classe, un coup sur un flag javascript... à revoir un de ces 4.
pour tickbox, je ne touche à rien puisque c’est tickbox qu’il faudrait modifier...
en fait, de toutes facons, c’est pas du tout adapté :
- le diaporama TB ne tourne que sur les images de la page en cours
- ca fait buguer le diapo de tickbox (meme image 2 fois donc plobleme dans le compte)
- ca n’arrete pas le diapo
il faudrait une version spécifique.
On verra ca plus tard, en 1.9.3, avec jquery UI...
Oui, c’est déjà mieux. Merci. C’est vrai que ce n’est toujours pas très solide. Chez moi j’arrive toujours, en cliquant un peu ci et là de le confondre. (Est-ce que cela aidera de cacher tous les autres boutons, et non seulement les numéros, lorsque le diaporama est en cours ?)
non, ca ne changerait rien, c’est quand le chargement de l’image est en cours et que tu arrete le diapo, la grande image vient remplacer la petite, meme si tu es en droit ou gauche.
sinon je vois que tu as un tickbox sans diaporama, c’est lequel ?
il suffirait sans doute d’ajouter
à tickbox pour arreter les diapos de la page quand on clique sur une image
Là j’ai simplement installé le plugin Thickbox v1 (Auteur : Thickbox (version 1) par Cody Lindley, mis en plugin par Fil. Version : 0.2 SVN [16368] — en test)
Répondre à ce message
Salut !
J’ai encore des problèmes.
Si je reduis la grande image dans mes_fonctions.php, les petites images sont reduites aussi.
Sous Safari, meme les vignettes sont reduites....
(Et Safari met toujours en haut les vignettes, non seulement avec |center. Mais mon Safari montre bien ton site test.)
http://www.schattenparker.net/spip.php?article315
Qu’est-ce que je peux essayer encore ?
C’est avec le Plugin svn stable d’aujourd’hui (22/23 oct 2007), SPIP 1.9.2c [10268] et oui, #INSERT_HEAD est là...
Qu’est-ce que j’ai oublié ?
Holger
Safari Version 2.0.4 (419.3)...
Pardon, il parait que j’avais certains problèmes grace a mon cache de safari...
Il reste seulement la question : Peux-je reduire les images en mode |center sans changer la reduction de |left, |right et |diapo ?
Serait-il possible de reduire les diapos a 300 px dans une certaine rubrique / un certain article, et laisser les autres rubriques / articles reduire les images par défaut ?
Holger
Il parait que la petite image (|left) PLUS les vignettes à gauche/droite ont TOUJOURS la meme largeur
que la grande image (|center).
C’est ca ?
On ne peut pas changer ca ?
→ http://www.schattenparker.net/spip.php?article315
Holger
il n’y a « que » 2 images : la grande (center et diapo) et la petite (left et right)
donc tu ne peux pas avoir center different de diapo, sauf à modifier le code.
tu peux definir leurs hauteurs et largeurs maxi, idem pour les vignettes.
en général, il suffit de spécifier la taille de la grande, le reste est automatique
si elles ne sont pas spécifiées, la largeur de vignettes est calculée :
- diapo_vignette=diapo_grand/diapo_vignettes-2
- diapo_petit=diapo_grand-(diapo_grand’]/nb_vignettes*2)-10
mais tu peux aussi tout spécifier.
Si tu veux avoir la petite en mode center, c’est pas compliqué :
C’est à la fin de $.fn.diapo_mode (dernier else) dans diapo.js.html, il suffit de copier ce fichier dans /squelettes et de remplacer :
par
voila, j’espère que ca répond à ton besoin
@++
Merci merci !
Holger
Attention je viens de corriger un bug dans le javascript.
prend la derniere version (sans doute dans le zip de 18h) avant de reporter la modif dessus.
@++
Répondre à ce message
Il doit y avoir un moyen simple pour faire apparaître les images dans l’ordre alphabétique ? et non pas dans leur ordre d’insertion dans la base...
Merci de nous l’indiquer !
Gérard.
ben en fait, le modele livré était “par num titre”, mais il semble qu’il y ait un petit bug en 1.9.2, je viens de mettre “par num titre, titre, id_document”, ca devrait etre mieux
Ouaip, super, ça marche !
Merci !
Gérard.
... j’ai parlé trop vite !
en fait, j’ai constaté une désynchro entre les 10 vignettes et les images affichées, ça a l’air grave !...
Toujours ici : http://www.declic-armor.fr/spip/spip.php?article20
Merci !
Gérard.
oups...
réparé en 16430
Ok merci ça marche !
Gérard.
Répondre à ce message
Bonsoir,
j’ai téléchargé la dernière version SVN, qui corrige le problème du nombre de vignettes par page qui ne fonctionnait pas, maintenant c’est ok : merci à l’auteur !
Subsiste un petit pb : quand on choisit de mettre les vignettes d’un côté ou de l’autre, l’image grande est toujours décalée dessous, alors qu’au contraire elle devrait remonter !
Une suggestion : faire que le visiteur puisse arrêter le diaporama et revenir à la bonne page en cours, ça n’est actuellement pas le cas...
Merci !
Gérard.
as tu une page montrable ?
normalement, left ou right, c’est l’image petite qui apparait, pas la grande.
Le seul cas, c’est quand on est en diapo et qu’on revient en left ou right juste au moment du rechargement de l’image, sinon “chez moi ca marche” comme on dit.
heu, ca par contre, c’est plus ou moins volontaire.
Disons que c’est le système de diaporama tel qu’il est fait qui veut ca et que ca restera donc une des limites du plugin.
Maintenant, rien n’empêche de faire un autre plugin qui recharge la pagination avec.
Oui ici :
http://www.declic-armor.fr/spip/spip.php?article20
Ah c’est donc ça la différence entre les 2 types d’images ?... je comprenais vraiment pas !
Gérard.
Répondre à ce message
bonjour chez vous
et merci pour ce plugin super !
toutefois car hélas si j’ecris c’est qu’il y a un leger bug sur mon site http://opar.univ-reunion.fr
j’ai installé la version svn de diapo et je suis en spip192c mais j’ai un décalage d’affichage de page en bas de l’ecran fort deplaisant
pourriez vous m’aider car j’ai cherché mais je n’arrive pas a voir ce qui cloche
d’avance merci
un clear:both qui trainait (plus nécessaire depuis que la largeur est fixée).
corrigé
Répondre à ce message
Salut, c’est moi encore une fois,
Je ne sais pas si c’est intéressant pour beaucoup de monde, mais moi, j’aimerais avoir des galeries avec des images assez petits (300 px environ) qui sont integrées dans le texte. Je ne connais pas le mot francais, mais en anglais, c’est “floating text”. Juste comme avec les images (
<imgxx|right>, p. ex.)Dans ce plugin, |left et |right sont utilisés pour la position des vignettes...
Est-ce que j’ai une possiblilité de le faire quand meme ?
J’ai essayé un peu de bricolage (bidouillage ?) avec des
<table>html...→ voir ici
Tout serait bien si j’y arrivais de non seulement reduire les images à 300px, mais tout le bloc diapo. Comment le faire ?
Et j’aimerais bien de reduire les “grandes images” (diapoxx|center) a 300 px utilisant mes_fonctions.php, pour qu’on puisse aussi les cliquer et regarder à toute grandeur. Ca marche déjà. Mais j’aimerais les reduire pour mes galeries dans le texte, mais pas pour des diaporamas ! C’est dommage que |diapo et |center utilisent la meme reduction.
Hmmm.... il y a aucune possibilite de definir la reduction individuellement dans
<diapoxx>, n’est-ce pas ?Voilà.
C’est difficile de s’exprimer en francais... quelqu’un m’a compris ? :-)
Ou bien...
Est-ce qu’il y a une solution plus élégante pour le floating...?
Holger
D’accord, c’est mieux avec
SPIP 1.9.2c + diapo(0.6)
H.
Répondre à ce message
Bonjour ! je suis fan de votre plugin, c’est exactement ce que je cherchais ! Par contre, je n’arrive pas à banir le portfolio par défaut spip comme dans l’exemple sur mon site
http://www.ydille.org/spip.php?article1
Je pourrais bien enlever toute ref aux documents joints dans le article.html, mais alors, quid des pdf et autres odt joints que je dois mettre dans d’autres articles ? Merci !
oui c’est vrai que c’est chiant ca, j’ai pas trouvé comment gerer ca automatiquement (les images intégrées au texte sont elles exclues si je me souviens bien)
il faut virer les boucles BOUCLE_documents_portfolio et BOUCLE_afficher_document et ajouter à la boucle BOUCLE_documents_joints un critère
{extension !IN png,jpg,gif}Ah ben voila !! j’avais bien viré les deux premières boucles : ca paraissait évident... seulement voila, je démarre dans ce genre de trucs et au début cette jungle n’est pas simple : je n’aurai pas trouvé seul le critère (enfin, sa syntaxe surtout !) extension !! Merci beaucoup !!!
au fait, ca vaudrait le coup de le mettre dans la doc si le plugin est tout public !
Répondre à ce message
Bonjour,
Je suis très contente d’avoir trouver ce plugin pour créer une chouette galerie de photo dans Spip. Je viens d’installer le dernier plugin Diapo (avec le dernier Spip) et j’ai toujours la même diapo qui s’affiche (je n’ai pas changé le squelette de base pour le moment) ... le clic sur les vignettes ne fonctionnent pas
c’est par là : http://hecceites.net/hecc/spip.php?article3
Est-ce que vous pouvez m’indiquer ce que j’ai oublié de faire ?
Merci.
c’est parce que c’est pas du tout le dernier Spip, c’est une 1.9.1 !
jquery n’était pas encore intégré à l’époque...
il faut mettre une 1.9.2c (les 1.9.x avant ont toutes une faille de sécurité, donc il faut vraiment mettre une récente) ou la version svn (normalement ca marche aussi)
Mille mercis, c’est fou comme on est heureux quand ça marche !
Je viens d’installer Spip 1.9.2c (module d’installation sur OVH m’avait installer une ancienne version, je n’avais pas fait attention) et tout fonctionne
Il me reste à travailler le squelette
Merci
Répondre à ce message
Salut,
Si j’y mets plusieurs diapoxxx dans un article, il y a un probleme avec les ancres : chaque diapoxxx cree les memes urls pour la pagination et les ancres (« ...&diapo_docs_diapo=1 »).
Je ne sais pas si mon Francais est assez bien pour vraiment decrire le probleme, c’est peut-etre mieux de vous laisser regarder en ligne. Voilà :
http://www.schattenparker.net/spip.php?article303
Le probleme est visible si on clique sur les vignettes du deuxieme diapo.
(Il y a aussi des problemes avec le layout, probleme css je suppose, mais c’est autre-chose.)
oui, c’est normal, pour l’instant ca ne marche pas plusieurs diapo, c’est dans la todo...
il y a le souci de pagination mais aussi des id à remplacer par des class (probleme avec le script qui cherche par id)
Attention, il doit te manquer #INSERT_HEAD car jquery n’est pas chargé.
@++
Dans la todo ?
Alors, j’attends...
:)
Ou est-ce que tu connais un autre plugin avec lequel ca marche déjà, plusieurs diapos sans pré-definition de leurs positions dans la squelette ?
La balise #INSERT_HEAD, elle était déjà là, dans le fichier inc-head.
J’avoue d’ignorer la role qui jouent #insert_head et jquery... c’est nécessaire d’installer jquery pour avoir la bonne position des vignettes ?
Merci,
Holger
alors, déjà, ma TODO fait plusieurs pages et ce script n’est pas sur la première... ca sera donc pas pour tout de suite, désolé.
JQuery : la librairie javascript géniale et ultra légère sur laquelle spip la plupart de ses plugins s’appuient (dont diapo bien sur). Sans JQuery, pas de css, pas javascript, donc pas de diaporama ni de fonctionnement AJAX (sans rechargement de la page).
Mais c’est bien, ca montre que ca marche très bien sans javascript.
Si ca n’a pas d’importance, autant utiliser tickbox, mais je ne sais pas si il sait générer plusieurs galeries.
#INSERT_HEAD (en majuscules, sinon ca ne marche pas comme chez toi), c’est ce qui permet aux plugins de placer leurs petites affaires (css, js...) dans la page.
bref, il faut remplacer #insert_head par #INSERT_HEAD, et tout ira déjà beaucoup mieux.
:)
voila, c’est fait, la dernière version est multi-diapo !
Démonstration ici
Mais mais mais..... c’est incroyable !
La position des vignettes est bonne maintenant, #INSERT_HEAD en majuscules, oui bien sur...
Et ca marche avec plusieurs diapos ! Ca marche ! Incroyable ! C’est parfait pour mon site !
Merci pour avoir fait l’effort.
Derniere question : J’ai lu tous les commentaires, mais je ne suis pas sur ce que je dois faire si je veux que les vignettes soient toujours visibles, meme au debut ? ...Et qu’ils se trouvent à gauche par defaut ?
bon, l’article était pas clair, je l’ai modifié.
la réponse est donc :
<diapoXX|left>le mode
<diapoXX|pause>n’est pas encore opérationnel mais ca ne saurait tarder...J’ai eu un petit soucis, avec align = left ou right, la grande image etait en dessous des vignettes. Je l’ai corrigé en modifiant le modele diapo.html : j’ai deplace la balise /B_docs juste avant le commentaire ! — fin diapo#ID_ARTICLE —
pardon ?
quelle version du plugin ?
dans la derniere version, cette modification n’aurait aucun effet, je ne comprend pas bien.
Quant à moi, je suis très contant maintenant.
L’ explication coment utiliser |left, |right et les autres est très facile à comprendre, maintenant, meme pour les étrangers comme moi.
Merci pour ton travail, Bill !
Holger
Merci, mais ca serait encore plus simple si l’article était dans ta langue maternelle, non ?
Et puisque tu te proposes gentillement, j’accepte avec joie ta proposition de traduction (en allemand ?).
;)
Alors, mais oui, c’est une bonne idée, ca.
Mais euh... comment le mettre en ligne, ici ?
H.
il faut aller dans l’espace privé (lien en bas des pages), en s’inscrivant si ce n’est pas fait, et créer un article à partir de celui-ci (dans la boite langues et traductions : Ecrire une nouvelle traduction de cet article).
sinon, tu t’authentifies et tu cliques sur ce lien : créer une traduction
Une fois fini, tu le proposes à la publication et je le validerai (il sera peut etre déplacé dans le secteur de langue correspondant, ca depend)
Merci !
@++
c’est sur la version SVN « stable »
en fait j’avais un probleme lié a la pagination (à cause des fragments) et la grande image etait en dessous des vignettes lorsque qu’elles etaient à droite ou à gauche ) j’ai donc integre la boucle docs_diapo dans la partie apres de la boucle docs.
peux tu m’en dire un peu plus, car la, je ne vois pas.
c’est si tu n’as pas de pagination que tu as des problemes ?
utilises-tu une version à jour du plugin (une version SVN, ca change regulierement, elle est réputée stable pour dire que c’est celle la qu’il faut utiliser, mais je corrige des trucs toutes les semaines) ?
ben, j’ai téléchargé la version vendredi 5/10.
c’est le critere pagination dans la boucle docs qui cré un div fragment_html.... et ce fragment contient tout ce qui est dans les parties avant, dans, apres et alternative de la boucle. la diapo etait en dehors de ce div fragment_html. En déplaçant, la fin de la partie apres de la boucle docs (<B_docs>) le problème à disparu
Voilà !
La traduction n’est pas encore complète, mais si tu pourrais déjà regarder... j’ai posé quelques questions dans l’article.
H.
réponses dans l’article (bill => ....)
Si pourrais regarder encore une fois la traduction... trois questions de plus...
Autre-chose :
Tu as une idée pourquoi l’image disapparait quand je clique la 8 de la pagination ?
Voir ici : http://www.schattenparker.net/spip.php?article303
(spip 1.9.2, version svn stable du 2 octobre je crois, safari mac osX tiger)
H.
je regarde demain pour l’article.
pour ton site, tu as :
SPIP 1.9.2a @ www.spip.net + diapo(0.4)
il te faudrait :
SPIP 1.9.2c @ www.spip.net + diapo(0.6)
la en plus, il te manque /plugins/diapo/diapo.html j’ai l’impression
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 :
|
