Seules contraintes : il nous faut des images ayant la même largeur et il nous faut numéroter les images. Il suffit pour cela de mettre des chiffres en tant que titre de l’image, et c’est dans cet ordre que les images vont apparaître. Seules les images nommées de la sorte seront prises en charge par le plugin, les images sans titre ou avec un titre commençant avec une lettre seront ignorées. Notez qu’il ne prend en compte que les fichiers gif, jpg et png.
Le fonctionnement
Il y a deux modèles : portrait et paysage. Les dimensions par défaut sont 200px x 258px et 400px x 258 px, respectivement.
Nécessite CFG et Saisies.
Vous pouvez personnaliser la présentation via CFG.
Il suffit d’insérer un modèle avec le numéro de l’article en question, par exemple <diapospoXX> pour les portraits ou <diapospaXX> pour les paysages, où, bien entendu XX représente le numéro de l’article.
Il s’agît tout simplement d’un div au positionnement relative dont on cache les éléments qui dépassent grâce un overflow:hidden. Dans son intérieur un autre div positionné en absolute prend la largeur de la somme des largeurs de toutes les images de notre diaporama, et les repositionne à des intervalles de 7000 millisecondes (plus ou moins 7 secondes).
Un clic sur le numéro force la présentation de l’image respective et un survol sur l’image arrête le défilement. Dès que votre souris sort des limites de l’image, le défilement recommence.
Bien entendu, ça reste à améliorer ;-). Vos suggestions (ou vos critiques) seront les bienvenues.
diapos.zip
RSS 2.0
Vos commentaires
# Le 10 juin à 01:56, par Béat
Bonjour,
Je suis en train de mettre en place le diaporama sur un site en construction. Je l’ai personnalisé comme décrit dans mon message ci-dessous (20 mars). Il fonctionne parfaitement sous Firefox 3.6.3 et sous Safari 5.0. Cependant... (il y a toujours un cependant :-) ... sous Safari l’affichage des numéros de commande disparait lorsqu’on arrive sur la page. Pour le faire réapparaitre, il faut tantôt recharger la page, tantôt vider le cache, et cela plusieurs fois pour que finalement, de manière aléatoire les numéros finissent par revenir ! Jusqu’à la prochaine fois.
# Le 10 juin à 12:00, par Luis Speciale
Je ne reproduis pas. D’abord sur Safari 4.xx, puis je me rends compte que il faut télécharger la 5. Je la télécharge et je ne reproduis toujours pas. Puis je cherche votre ancien message, où vous dites, justement, avoir changé les css des numéros. Diantre !
Cela-dit… (il y a souvent un cela-dit ‡-) comment voulez-vous que je vous aide si vous avez personnalisé le monstre mais je ne peux pas le voir ? Par télépathie ? Divination ? Magie ? Téléportation ? Allez, jusqu’à la prochaine fois, vous aussi ‡-)
Très cordialement ‡-)
# Le 10 juin à 12:32, par Béat
Merci de votre rapide réaction.
Dans mes modifications, je n’ai touché qu’au fichier CSS, je serais bien incapable de faire autre chose. Pour en avoir le coeur net, j’ai rechargé le fichier CSS d’origine : hélas, le phénomène est toujours là, même après avoir vidé le cache.
Je ne peux malheureusement pas vous donner d’url pour constater de visu car je développe en interne avec MAMP. Toutefois, votre réaction est précieuse, car vous me confirmez que tout fonctionne normalement du côté de Safari. C’est toujours ça... mais je dois dire que je ne vois pas encore comment je vais résoudre ce problème...
Cordialement
# Le 10 juin à 13:42, par Luis Speciale
Jamais désespérer ;) Si vous avez remis les CSS d’origine, vidé les caches (à la poigne de préférence tmp et local), vérifié que vous avez la dernière version du plugin et le problème persiste il faut jeter l’ordinateur (c’est une blague stupide). Non. Dans l’ordre.
D’abord voilà le problème : il y a une CSS (sûrement une ul li ou bien une du type #ID .classe. élément) qui prend la priorité parce qu’elle a plus de points en ce qui concerne sa spécificité. (voir au hasard, http://articles.nissone.com/2007/04...).
Avez-vous Firefox installé avec Firebug ? Si, oui cherchez quelle CSS prend le pas, sinon courez vite chez Mozilla, téléchargez les deux et prenez le temps de comprendre Firebug (une heure à tout casser pour piger le comportement de base). Vous m’en direz.
Forza, Béat ‡)
Répondre à ce message
# Le 18 mai à 11:09, par ECastro
Bonjour,
Je suis en train de concevoir un site sur SPIP et je suis en train de rencontrer quelques problèmes au niveau de votre plugin. Avant de poster ce message, j’ai bien sûr vérifié que j’ai installé et activé CFG et Saisies. Je suis en SPIP 2.1.0, mes images portent des numéros comme sur le screen en haut de cette page, elles sont de la même dimension, j’ai attribué le numéro de l’article dans la balise
Lorsque je vais sur CFG pour personnaliser la présentation, j’ai d’abord cette interface ’incomplète’au lieu de celle de vos screens. Ca, c’est le soucis numéro 1. =)
Vient ensuite un soucis sur l’affichage de la galerie dans mon article. Au lieu de faire aussi beau que vous ou les autres, mes images s’affichent les unes à la suite des autres. Est-ce lié au premier problème ?
Merci d’avance pour votre aide, bonne journée à vous.
# Le 18 mai à 12:38, par Luis Speciale
Il y a un problème, je crois, avec votre version de CFG. En ce qui concerne la copie d’écran de la configuration de CFG, vous avez raison, j’avais oublié de la changer. Je viens de le faire et voilà ce que vous devriez avoir à l’écran.
# Le 18 mai à 14:16, par ECastro
Merci de cette réponse très rapide, ça fait plaisir. =)
Alors, j’ai réinstallé CFG et votre plugin diapo, du coup, je n’ai plus l’interface que j’avais lorsque je souhaitais configurer les diapos. Un problème de résolu, je suis rassurée.
Par contre, demeure le soucis des images qui ne se mettent pas en diapo, mais qui s’affichent les unes à la suite de autres , tandis que les chiffres permettant d’aller d’une image à une autre sont toujours en dessous.
# Le 18 mai à 16:20, par Luis Speciale
Avez-vous vidé le cache ? Avez-vous d’autres plugins installés ? Avez-vous renseigné les dimensions des images dans la configuration ? Votre site est-il visible ?
# Le 18 mai à 16:41, par ECastro
Oui, je vide le cache régulièrement, et j’ai, effectivement, plusieurs plugins installés (CFG, le vôtre, Couteau Suisse, Menus déroulants Babbibel, Saisies et Porte plume). Pensez-vous que c’est dû à un problème d’incompatibilité ?
J’ai renseigné les mêmes dimensions que vous (400/300 et 300/400).
Hélas, mon site n’est pas encore visible, car je suis actuellement en train de travailler sur son contenu et son ergonomie.
# Le 18 mai à 17:10, par Luis Speciale
Essayez de désactiver tous les autres plugins, videz manuellement tmp et local et voyez si ça persiste. Vous avez aussi la possibilité de créer un nom de domaine dynamique (de mémoire, no-ip.com). Ça vous permettra de visualiser votre développement en local via le Web.
# Le 25 mai à 14:09, par ECastro
Bonjour.
J’ai fini par y arriver : le diapo s’affiche ! Merci de vos conseils.
Cependant j’ai encore quelques soucis... Des nouveaux, en fait :
- Si j’ai plus de 20 diapos, le ’compteur’/nombre est caché car la fenêtre est trop petite.
- J’aurais voulu savoir comment faire pour gérer les images horizontales et verticales dans un même article.
- Quand le diaporama défile, il n’affiche pas toujours l’image entière, mais la moitié d’une et de la suivante.
Voici un exemple de diaporama (le site est en construction) ou encore ici. (Dans le dernier lien, il n’y a que des images horizontales. Si vous allez sur le numéro 7, vous verrez que l’image est coupée en deux).
# Le 25 mai à 14:43, par ?
A) Mettez en moins de 20
B) Pas possible de gérer H et V dans le même article
C) J’ai regardé vos images et j’ai pris 3 au hasard
corrida001-aac55.jpg
corrida016-5397b.jpg
corrida015-c4869.jpg
Aucune n’a les mêmes dimensions.
Aucune n’a les dimensions du cadre .fenetrepa (height:300px ; width:400px)
Utilisez un programme comme Photoshop ou Gimp pour les rendre homogènes.
Je veux bien vous aider si vous faites comme c’est expliqué. Si vous faites autrement je crains que je ne puisse pas faire grand chose pour vous aider.
Par ailleurs votre site ne valide pas ni les CSS ni le HTML. Vérifiez ça avant de vous lancer dans des tests de nouveaux plugins ou autres parce que si vos fondements ne sont pas bons vos résultats ne le seront jamais. Pour ce faire utilisez Firefox et ces extensions
http://chrispederick.com/work/web-d...
http://getfirebug.com/
Cordialement
Répondre à ce message
# Le 6 mai à 17:04, par cmak
bonjour,
j’ai crée un article et j’ai télécharger des images comme vous me l’avez dis. Pour les autres plugins j’ai jamais eu de problème car je suivais à la lettre les indications mais pour Diopos ça ne passe pas pour l’instant. Mais je suis pré à faire tout mon possible car jusqu’à maintenant j’ai pas réussi à faire des photos dans mon site à part bien sur les photos à l’intérieur des articles.
Merci.
# Le 6 mai à 19:01, par Luis Speciale
Avez vous mis
<diapospaXX>(XX représentant le numéro de l’article) dans le texte de l’article ?Répondre à ce message
# Le 6 mai à 16:03, par cmak
bonjour,
je suis nouveau et je voudrais utiliser "DIAPOS" mais les explications sont pas trop detaillés donc je voudrais savoir la marche à suivre sur mon espace privé ! je suis très motivé pour réaliser ce diapos sur mon site. Je suis à votre écoute.
Merci d’avance.
# Le 6 mai à 16:19, par Luis Speciale
Inversons les rôles : je serai à votre écoute une fois que vous ayez rencontré un problème ;-). Installez le plugin et ajoutez quelques images avec les mêmes paramètres (taille, résolution, etc). Une fois-là, si ça ne marche pas, dites-moi quels problèmes vous rencontrez.
Cordialement
Répondre à ce message
# Le 27 avril à 17:52, par association raconte nous
Bonjour,
ce diaporama génial et d’une grande simplicité (pour preuve j’ai réussi à le mettre en oeuvre sur mon site !!).
J’ai une petite question, je souhaiterais que le diaporama soit centré sur la colonne dans laquelle il apparait. (voir www.raconte-nous.org). Etant novice sur spip je ne sais dans quel fichier intervenir (peut être le css) et quelle ligne modifier ou ajouter. Quelqu’un pourrait-il m’eclairer ?
merci d’avance !
# Le 4 mai à 23:48, par association raconte nous
Bon finalement j’ai dû tricher en insérant mon diaporama dans un tableau que j’ai centré sur ma page avec un div align=center.
Pas forcément "noble" mais efficace !!
Répondre à ce message
# Le 20 mars à 01:08, par Béat
Magnifique petit diaporama sans chichis. Il a l’avantage de pouvoir s’insérer facilement dans le fil d’un article. Bravo. J’ai pu facilement modifier la css pour l’adapter à mon design (j’ai sorti les numéros du cadre de la photo pour les placer dans un bandeau en-dessous).
Suggestion pour les évolutions futures : avoir les légendes qui défilent en même temps que les images (la zone Descrition est disponible ;-)
# Le 20 mars à 02:07, par ?
Merci. Je vais voir ça.
# Le 15 avril à 19:19, par charles
Bonjour,
tout d’abord bravo pour ce plugin et sa simplicité !!
J’ai une question pour Béat : je suis novice sur spip et j’aimerais moi aussi placer les numéros dans un cadre sous la photo pourrais-tu m’indiquer les modifs à effectuer dans la CSS ?
# Le 15 avril à 22:21, par Béat
@ Charles
Le site pour lequel j’ai fait cette modif n’est pas en ligne, il tourne pour l’instant sur un serveur interne. Je mets une capture d’écran du résultat en fichier joint. J’ai modifié la css « diapo.css.html » il y a près d’un mois et ne suis plus en mesure de commenter ces modifs (ah, la mémoire ;-) Mais si tu compares la css originale avec la mienne tu comprendras bien où il faut agir. Voici donc ma version modifiée :
[(#REM) <style> ]#CACHE{0*3600*100,cache-client}
#HTTP_HEADER{Content-type: text/css; charset=iso-8859-15}
#HTTP_HEADER{Vary: Accept-Encoding}
#SET{largeur_imagespa,#CONFIG{diapos/largeur_imagespa,400px}}
#SET{hauteur_imagespa,#CONFIG{diapos/hauteur_imagespa,258px}}
#SET{largeur_imagespo,#CONFIG{diapos/largeur_imagespo,200px}}
#SET{hauteur_imagespo,#CONFIG{diapos/hauteur_imagespo,258px}}
#SET{marges_imagespa,#CONFIG{diapos/marges_imagespa,1em 1em 1em 1em}}
#SET{marges_imagespo,#CONFIG{diapos/marges_imagespo,1em 1em 1em 1em}}
.cadrepa {margin:[(#CONFIG{diapos/marges_imagespa}|sinon{1em 1em 1em 1em})];float:left; clear:both; position:relative; z-index:1900; background:#999; border-bottom: 3px solid #999;}
.cadrepo {margin:[(#CONFIG{diapos/marges_imagespo}|sinon{1em 1em 1em 1em})];float:left; clear:both; position:relative; z-index:1900; background:#999; border-bottom: 3px solid #999;}
.fenetrepa {width:[(#CONFIG{diapos/largeur_imagespa}|sinon{400px})]; height:[(#CONFIG{diapos/hauteur_imagespa}|sinon{258px})];overflow:hidden; position:relative;padding-bottom:20px;}
.fenetrepo {width:[(#CONFIG{diapos/largeur_imagespo}|sinon{200px})]; height:[(#CONFIG{diapos/hauteur_imagespo}|sinon{258px})];overflow:hidden; position:relative;padding-bottom:20px;}
.cadre_imagepo, .cadre_imagepa {position:absolute; top:0; left:0;}
.cadre_imagepo img, .cadre_imagepa img {float:left;}
.choix_image {position:absolute; bottom:-3px; right:0; height:20px; z-index:2000; text-align:center; font-size:11px; line-height:20px; background:#999; display:none;}
.choix_image a {display:inline-block; float:left; width:20px; height:20px; text-decoration:none; background:#999;}
.choix_image a.active{width:20px; height:20px; font-weight:bold; background:#dedede; color:#386dab;}
.choix_image a:hover{font-weight:bold;}
[(#REM) </style> ]
Répondre à ce message
# Le 16 mars à 19:36, par KMk
Bonsoir, Luis,
Eh bien, le plugin à nouveau téléchargé et installé, caches vidés, nettoyage des fichiers dans tmp et local éliminés... ça maaaarrrrche !
Je continue à suivre les messages sur ce plugin, pour découvrir les nouveautés que vous annoncez.
Merci beaucoup pour le suivi que vous avez apporté à mes réponses.
Cordialement,
KMk.
Répondre à ce message
# Le 16 mars à 17:23, par Luis Speciale
Je viens de trouver ! C’était ma fôôte ! Une nouvelle version devrait être générée automatiquement d’ici une heure je crois. Pour celles et ceux qui ne veulent pas attendre il suffit de modifier diapos_pipelines.php comme suit :
<?phpfunction diapos_insert_head($flux){
$flux .= '<script type="text/javascript" src="'.find_in_path('diapos.js').'"></script>';
$flux .= '<link rel="stylesheet" href="'.generer_url_public("diapos.css").'" type="text/css" media="projection, screen, tv" />';
return $flux;
}
function diapos_header_prive($flux){
$flux .= '<script type="text/javascript" src="'.find_in_path('diapos.js').'"></script>';
return $flux;
}
?>
Mais si vous avez un peu de patience, c’est mieux parce que ce n’est pas tout : d’autres choses ont été modifiées.
Mille excuses ;)
Répondre à ce message
# Le 15 mars à 19:39, par KMk
Bonjour, Luis,
jquery.js.Mystère...
@ bientôt, KMk.
# Le 15 mars à 19:58, par Luis Speciale
Déjà je vois que les feuilles de style ne sont pas chargées. Vous devriez avoir les numéros des images en bas oui, mais a droite, dans un fond jaune. Vous utilisez quel navigateur ? Si vous avez Firefox, chargez l’extension Firebug. elle vous permettra de voir ce qui cloche.
Le plugin est correctement installé, je pense, parce qu’on a les numéros (les Titres).
Répondre à ce message
# Le 14 mars à 19:11, par KMk
Bonjour,
Bon... mes images sont en .jpg. Je viens d’essayer autre chose et j’ai trouvé la source d’une partie de l’invisibilité du diaporama : il faut télécharger les images non pas avec « Joindre un document » sous l’article, mais avec le bloc « Ajouter une image ou un document » quand l’article est ouvert.
Cependant, pour le moment, j’obtiens mes images en ligne, sans animation...
On progresse, mais le but n’est pas encore atteint. Une petite idée ?
Cordialement,
KMk.
# Le 14 mars à 22:50, par Luis Speciale
Vous avez vos images correctement présentées, je veux dire avec les numéros (les titres en bas à droite) ? Si tel est le cas c’est peut-être un problème avec JQuery.
Répondre à ce message