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 by date of activity
169 discussions
Hello,
J’ai installé le plugin diapo avec spip 1.9.2. Tout marche, sauf que sous internet explorer 7, il y a une petite icone d’image manquante (mais si je fais un clic droit et que je recherche les propriétés, j’obtiens : protocole HTTP, type non disponible, taille non disponible, dimensions 28 X 30 pixels) qui se met juste en dessous des icones de navigation. Rien sous Firefox. Une idée de l’origine du problème et de sa correction possible ?
Bon, il semble que le problème soit là :
<img id="diapo_loading" style="display:none" src="[(#CHEMIN{'img_pack/loading.gif'})]"/>
Je n’ai pas ce fichier. Peut-être qu’il appartient à une ancienne version ?
Je vais essayer en attendant d’en mettre un autre. Mais si vous avez une meilleure solution, je suis preneur.
j’ai ajouté l’image dans le svn, ca devrait etre dans le packet d’ici peu.
@++
Reply to this message
Merci pour ce plugin !
Est il possible d’accélérer la cadence de défilement quand on passe sur les flêches ?
désolé je me suis trompé de page
Reply to this message
Bonjour,
Super, ça marche bien.
Maintenant, j’ai ajouté thickbox, je l’ai activé dans SPIP, mais cela n’a rien changé sur le site. Faut il ajouer quelquechose dans le squelette? J’ai la version 1.0 de diapo et j’ai bien mis jQuery...
Merci
Pascal
Ok, thickbox fonctionne...
Désolé d’avoir posté trop vite.
Par contre, comment avoir le même effet que sur http://www.bourgogne-nivernaise.com/Album-photo.html lorsque l’on change d’image en cliquant sur sa vignette???
Merci
Pascal
hello,
regarde le script sur le site, il y a 3 modifs dedans (/plugins/diapo/diapo.js)
j’ai integré la librairie (interface avec juste les effets souaités) et fait les appels DropOutRight/DropInLeft au lieu du show/hide
@++
Salut
Comment obtenir le diaporama avec le fond grisé dès que l’on clique sur une image (mais pas sur sa vignette) ?
Par défaut, il faut avoir consulté la 2é ou 3é planche d’image, revenir sur la 1ère planche et là, en cliquant sur l’image agrandie, le diaporama avec le fond grisé se lance.
Résultat visible ici.
Ca serait plus simple de pouvoir lancer le diaporama en fond grisé dés l’affichage de la première planche d’image...quelqu’un aurait une idée ou une piste ?
Merci
Reply to this message
Bonjour,
Je reprends les démarches pour ceux qui comme moi sont lents... et je pose ma question à la fin.
Installer la dernière version du plugin et le complément jquery (voir adresse dans un commentaire)
Activer les plugins.
S’assurer qu’il y a bien dans le fichier inc-head.html :
[(#REM) Balise permettant aux plugins d’inserer des appels javascript ou css ]
#INSERT_HEAD
Placer des documents dans l’article : ATTENTION IL FAUDRA EN PLACER PLUS DE 8 pour voir la barre de menu au dessus des images. J’ai mis du temps à comprendre pourquoi elle n’apparaissait pas.
L’autre solution est d’aller changer le nb d’images souhaitées dans Modeles/diapo.html ici :
<BOUCLE_docs(DOCUMENTS){id_article}{pagination 8}{par num titre}>
Enfin : ajouter dans le corps du document ou xx est le numéro de l’article (et pas celui du document...)
Et là ça marche !
J’ai quand même un problème :
Avec le fichier article.html d’origine, le diaporama automatique fonctionne. Avec mes styles css, ça marche pas :
Quelque’un aurait une idée de pourquoi :
voir en test ici qq jours :
http://www.simple-et-sauvage.com/plantes/spip.php?article24
Merci pour ce beau plugin, en espérant ne pas dire de bêtises dans mon petit récap, et que ça serve à qq’1.
désolé il manque un bout (code bouffé) à la phrase Enfin... que je reprend ici :
Enfin : ajouter
<diapoxx>
dans le corps de l’article ou xx est le numéro de l’article (et pas celui du document...)Re désolé pour le bruit
Finalement mon diaporama automatique fonctionne !
J’en profite pour signaler que sous max osX il n’y a pas de décalage dans ton diaporama de démo; les vignettes sont bien à côté de l’image. (par contre moi j’ai des pb de styles, mais je me débrouillerai)
OK merci.
J’ai aussi des soucis de feuille de style, en particulier avec IE.
Bon, c’est juste un debut de toutes facons, il y a plein de choses à faire encore sur ce plugin.
Il faut entre autre :
- permettre plusieurs diaporamas sur une meme page
- pouvoir utiliser plusieurs modeles
- pouvoir passer des parametres (nb de photo par page / couleur / ...)
bref, c’est juste un début...
ca c’est un bug.
En fait les boutons devraient etre ajoutés en javascript, vu qu’ils sont sans effet sans javascript...
Ca sera pour la prochaine version.
Salut, je suis débutant en SPIP.
J’ai SPIP V. 1.9.1
J’ai suivi toutes vos explications. J’ai installé tous les plugins (Thickbox v1 , jQuery et Diapo_1_9 dans spip et les ai activés dans mon espace privé spip.
Je n’ai pas vu apparaître de raccourci typographique “diapo” dans mon espace privé spip.
J’ai uploadé 8 photos sur mon espace privé spip. J’ai écrit ce qu’il fallait dans le corps de mon article=4 (dans la partie “Texte” de l’article dans mon espace privé SpIp). Et résultat, mon Diapo est un catastrophe. Je ne comprends pas. Puis je avoir de l’aide SVP ? Regardez :
Salut,
heu, bon, il y a un petit bug, mais il doit y avoir autre chose... tes vignettes font 520px de large !
J’ai fait des correction, il faudrait mettre à jour et voir ce que ca donne, mais il te faudrait surtout aller dans la configuration avancée et voir comment sont gérées les vignettes (GD2 ? vignette auto ?)...
Si ca ne marche pas mieux, tu peux essayer de mettre des vignettes “manuellement” sur tes images.
@++
Bill j’ai maintenant les miniatures. J’ai bien le GD1 et GD2, et j’ai choisi “Convert” dans Spip (config avancée). J’ai 9 images et je ne comprends pas pourquoi il ya une 10ème miniature ki ne s’affiche pas vient s’ajouter.
De plus, le super effet de page grise quand on clique sur une image ne fonctionne qu’avec la 1ere image uniquement. Je ne comprends pas. Aurais-tu une idée Bill ?
Ben c’est beaucoup mieux la !
je vois bien un diapo avec 9 photos, pas de probleme “fonctionnel”, c’est quoi cette histoire de 10eme image ?
Bon, le squelette de la dist n’est pas assez large... mais c’est pas trop dur à adapter.
Tu peux aussi reduire un peu plus les images :
- fait une copie de plugins/diapo/modele/diapo.html dans /squelettes/modele/diapo.html et fait tes modifs dedans.
- Il suffit de remplacer 710 et 530 par des valeurs plus petites genre 510 et 330.
Mais le mieux, c’est d’utiliser le plugin squelette_par_motcle et de se faire un squelette article “large” (sans les boites rubrique et mot clé par exemple)
Bonjour Bill,
Super ton plugins “diapo” !
Je suis novice en SPIP et tente de créer un site pour une association.
Malgré une lecture assidue des différents messages, je n’ai pas réussi à régler mon problème d’affichage (voir sur ce site test). Assez bizarrement, la première diapo semble bien prendre en compte les dimensions réduites que tu as indiquées :
mais pas les images suivantes. Est-cela qui explique que les photos s’affichent en dessous des vignettes ? De plus, les images réduites prêtent à confusion : peut-on éviter leur affichage ?
J’ai bien réduit les images comme tu l’indiques, mais rien n’y fait.
As tu une idée ?
PS : je suis en spip 1.9 et utilises ta version SVN
salut,
oui, il faut aussi changer les valeurs dans le css, c’est mal foutu...
fait une copie de diapo.css dans ton repertoire /squelette et modifie en bas les tailles :
il manque aussi un “nettoyeur” en dessous ajoute un
en dessous...
Mais je vais ameliorer tout ca bientot !
@++
Pour afficher la ligne de pagination en dessous avec moins de 9 images : insérer une ligne contenant
avant la ligne 13[(#PAGINATION)]
du fichier plugins/diapo_1_9/modeles/diapo.html ;-)Super ce plugin (j’ai encore deux petits soucis : le diaporama ne démarre que si j’ai auparavant visionné une image autre que celle affichée et le passage des vignettes à droite à vignettes à gauche ne fonctionne qu’en passant par les vignettes en haut, sinon les vignettes se trouvent en partie cachées sous l’image qui reste au même endroit , mais un clic au hasard de la zone vignettes rétablit la situation ! Si je trouve pourquoi je referai un petit coucou) et encore merci.
Pfff..c’est quoi un nettoyeur ? Je suis une bille.
Je me bats depuis 3 jours pour tenter d’afficher correctement le plugin diapo sur ce site. Quel enfer !
J’ai avancé, mais il reste d’importantes zones d’ombre:
- comment corriger l’affichage de l’image absente loading.gif ?
- pourquoi la taille unique (350px) que j’ai appliqué dans diapo.html, diapo.css, article.html n’a d’effet que sur la première image de la galerie ? Dés que je clique sur une vignette au hasard, je retrouve les photos à leur taille originale ? (sauf si l’on choisit “Vignettes à droite” ou “Vignettes à gauche” ...)
- qu’est-ce qu’un “nettoyeur” ?
Merci pour le travail sur le plugin Bill, j’espère que la prochaine mouture sera plus accessible aux novices.
Je répond à une de mes questions :
- Je n’avais pas modifié TOUTES les valeurs dans diapo.htm, pensant qu’il fallait juste modifier les valeurs de diapo_petit, et ben non, il faut modifier TOUTES les valeurs, sans exception pour diapo_grand.
- Pour l’image loading.gif absente du zip, j’ai simplement supprimé la ligne de diapo.html.
- La superposition du menu et de la bordure est corrigé avec les feuilles de style.
- Je sais tjs pas ce qu’est un “nettoyeur”...
J’ai encore un pbm avec la taille des images qui ne tient pas compte des valeurs indiquées (dans squelette et feuille de style) quand je clique sur le lien pour voir les 5 images suivantes...
Problème résolu, j’avais encore oublié de modifier certaines tailles :
- J’ai du modifier les 2 fichiers diapo.html (un dans plugins/diapo/ et l’autre dans plugins/diapo/modeles/), puis diapo.css, diapo_img.html.
- Dans mon squelette Sarka-spip j’ai aussi fait des modifs dans article.html et style.css pour avoir l’affichage souhaité.
- Partout j’ai modifié les valeurs pour la taille des images (en général 710px et 530px) y compris dans article.html (sarka spip) .
Peu importe le texte qui les précéde, j’ai tout fixé à 350px puisque c’était la taille souhaitée. Attention : je n’ai pas modifié la taille des vignettes (90px).
Voilà et ca marche.
Merci pour tout le travail Bill.
Reply to this message
bonjour à tous, j’ai un petit soucis d’affichage avec mon squelette, losque je lance le diaporama, la pop up s’ouvre mais je n’ai pas l’image. Bizarrement ça fonctionne avec dist/article.html (j’ai pourtant fait un copier/coller des boucles.
voici mon source spip (le site est en local)
si quelqu’un pouvait y jetter un coup d’oeil parce que j’avoue que là je bloque
merci d’avance
j’ai fait une mise en ligne pour faciliter les choses
si j’ai bien compris, ca marche avec /dist/artilce.html mais pas avec ton squelette, c’est ca ?
il fait quoi le filtre w3c ?
est-ce que ca marche si tu remplaces
par
Reply to this message
bonjour
Je suis sous sarka et j’ai installé les plugins diapo, JQuery, Thickbox v2 dans spip 1.9.1, tout fonctionne. Petit souci, le diaporama ne se lance que si j’ai cliqué déjà sur une vignette!
Je débute dans spip et j’essaie de modifier la vitesse du diaporama mais pour l’instant je ne trouve pas, pourais-tu me donner la solution?
merci pour tout
yves
Pour le lancement du diapo, ca doit etre un bug, je regarderai à l’occasion.
Pour la vitesse, c’est dans diapo.js vers la ligne 45 : diaposlide(8000);
c’est en millisecondes (donc par defaut 8 secondes)
@++
La chance ! J’ai la même configuration que toi, sauf que je suis passé de sarka 1.8.3 à sarka 1.9.1 (je prépare ce passage sur mon disque dur)
Quand j’ouvre la galerie toutes les images font 150 pixels de large ou de haut que se soit les vignettes ou l’image centrale avec en haut à droite comme si une image manquait.
En désintallant tout et en réinstallant le temps d’une cession il m’est arrivé de cliquer sur une image qui s’est affichée en grand puis que j’ai pu naviguer sur des pages intérieur de la galerie avec des vignettes de taille normale.
J’ai passé une heure à chercher où se trouvait le #INSERT_HEAD, pour ceux que ça intéresse c’est à la racine dans dist/inc-head.html , il y figure bien.
J’ai passé l’après midi là dessus sans parvenir à avoir une belle présentation, toutes les images font à présent 150 pixels.
C’est très frustrant car dans le squelette sarka il n’y a plus qu’une seul endroit pour mmettre les galeries. Le plugin diapo est une belle alternative mais chez moi ça ne marche pas. Si quelqu’un a une piste.
je connais pas sarka, mais il y a sans doute un conflit entre les feuilles de style.
Si le div n’est pas assez large, ca peut aussi empecher l’image de s’afficher.
Si tu peux mettre quelque chose en ligne, donne une url.
@++
En fait dans la dernière version de sarka le créateur dit à propos de la taille des images jointes aux articles sur http://sarka-spip.com/spip.php?article274
"Ouch’... mea culpa : la réponse précédente était incomplète. Si la création de miniatures est désactivée, les images sont par défaut redimensionnées en 150 px.
L’utilisation de la fonctionnalité “création de miniatures” pour déterminer la taille des images dans le corps des articles constitue un détournement de la fonctionnalité.
Lorsque la version paramétrable sera publiée, il deviendra possible de définir deux valeurs pour le redimensionnement des images :
* la valeur proposée dans l’espace privée pour la taille des miniatures utilisées pour les documents joints aux articles (par exemple),
* une valeur propre au squelette pour la taille des images dans les articles.
En attendant, il faut soit activer la création de miniatures, soit se contenter d’un redimensionnement à 150 px."
Chez moi la mise en place de la “galerie diapo” donne un truc comme ça (capture d’écran car pour le moment la nouvelle version est sur mon disque dur).
http://www.gualeni.com/galeriediapo.jpg
Le source de la page article où cette galerie apparait est ainsi :
http://www.gualeni.com/articledidier.txt
Ah ben c’est pas un conflit alors, ou alors un conflit “fonctionnel”.
Effectivement, dans le code, les images sont redimensionnées 2 fois :
- d’abord par diapo qui utilise le cache image
- ensuite par autre chose qui pose des height et width.
Regarde dans ton squelette, tu dois avoir un filtre image_reduire sur la balise #TEXTE
Il faut l’enlever, au moins dans un squelette specifique que tu affecteras à l’article en question (en utilisant le plugin squelettes par mots clés au besoin)
@++
Très fort Plugin Diapo
Effectivement dans mon fichier article.html il y avait
j’ai enlevé “image_reduire” et tout fonctionne parfaitement.
Merci beaucoup !
Didier
ça doit être effectivement un bug, parce que chez moi, c’est la même chose
C’est à présent en ligne !
Merci pour cette galerie qui m’a permis de récupérer mes anciennes galeries “walma” en les transformant en galeries “diapo”.
Reply to this message
Bonjour,
Il semble que le plugin est plus que interessant, le resultat sur la partie admin est magnifique, le probleme c’est que je n’arrive pas a avoir la meme chose dans la partie publique.
Est ce que qlq peut me donner juste un exemple de boucle a inserer pour avoir l’album photo ?
Merci d’avance
si ca marche dans /ecrire et pas sur le site public, c’est sans doute qu’il te manque la balise #INSERT_HEAD dans ton squelette
@++
Reply to this message
Bonjour,
J’ai uploader le plugin + les autres plugins (je suis sous SPIP 1.9.1), au départ j’ai eu du mal a afficher la diapo, mais bon, j’ai bidouiller un peu, et j’ai utilisé la boucle suivante :
mais bon , il reste qlq trucs a regler, par exemple j’ai changé la taille de la croix pour fermer l’apercu mais j’obtiens pas le résultat voulu, j’ai des controur “bleu” dans l’apercu, je sais que c’est une question de style mais bon voila.
mon site : apercu
merci d’avance pour votre aide
Reply to this message
J’ai installé le plugin Diapo sur mon poste de travail (environnement Windows + Easyphp + SPIP 1.9.1 [7385] ). Les plugins additionnels ont également été installés (JQuery, Thickbox v2). Le tout fonctionne parfaitement sur mon poste.
Par contre, une fois le site transféré chez l’hébergeur, ça se corse. Message d’erreur MYSQL : «Erreur sur le site, boucle critère inconnu 8, »
Il semblerait que le critère «diapo 8» de la boucle «BOUCLE_docs_diapo» coince.
En enlevant ce critère le temps de réponse est très long et l’affichage n’est pas celui escompté : article affiché de façon classique.
Problème de chemin d’accès au plugin ?
Merci pour votre réponse.
hello,
si ca marche en local et pas en ligne, c’est qu’il manque un morceau ou que le plugin n’est pas activé.
Peux-tu envoyer un lien vers le site en ligne ?
@++
J’ai omis de signaler que les javascripts du plugin DIAPO ne sont pas activés, pourtant la balise “#INSERT_HEAD” a été ajoutée. Du coup j’ai enlevé le plugin comme le site est en cours d’installation. Je vais reconfigurer le plugin et envoyer le lien dès que possible. Merci.
Reply to this message
J’ai oublié de poser la question , c’est quoi : JQuery
et Tickbox v2 car je n’ai pas trouvé , le résultat de cette recherche me donne le plugin diapo
Jérôme
tiens, moi, j’ai oublié de repondre...
ce sont des plugins, tu peux les trouver sur la zone de telechargement de spip-zone
@++
Reply to this message
Add a comment
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.
Follow the comments: |