NPDS : Gestion de contenu et de communauté
Content & Community Management System (CCMS) robuste, sécurisé, complet, performant, parlant vraiment français, libre (Open-Source) et gratuit.
24 visiteur(s) et 0 membre(s) en ligne.
Suivre le code
Autres infos
Activité du Site
Pages vues depuis 25/05/2001 : 110 680 265
- Nb. de membres 8 696
- Nb. d'articles 1 695
- Nb. de forums 26
- Nb. de sujets 8
- Nb. de critiques 92
Tutoriel: lightbox 6960
Bonjour,
Pour vous annoncer la mise en ligne (sur styles.npds.org) d'un tutoriel sur l'intégration d'un script Jquery Lightbox dans votre NPDS
C'est tout simplement le script utilisé depuis quelques semaines sur le site styles.npds.org et qui permet d'avoir un effet de zoom très basique sur une image, le tout sans bug sur les différents navigateurs.
J'ai essayé de répondre aux questions que l'on se pose quand ayant trouvé un script sympa, on désire le mettre dans NPDS.
Bien entendu ceci s'adresse aux débutants, il y a surement plein de considérations techniques que je n'ai prises en compte, et qui devraient améliorer la chose, n'hésitez pas à les proposer ceci étant.
Merci à ceux qui n'ont aidé à trouver ce script.
Bmag
B-Mag
- Visiter ce site web
Liens relatifs
L'article le plus lu à propos de : Styles
Les dernières nouvelles à propos de : Styles
B-Mag
slt
Avec retard, mais je viens de trouver un moyen simple d'editer du code recopiable, de façon claire ds un article. :-(
Donc mise à jour sur style éffectuée.... sans passer par le script SyntaxHighlighter.
Avec retard, mais je viens de trouver un moyen simple d'editer du code recopiable, de façon claire ds un article. :-(
Donc mise à jour sur style éffectuée.... sans passer par le script SyntaxHighlighter.
fouineur
Slt
Comme dit le proverbe vaut mieux tard que jamais :-D
Merci en effet se sera nettement mieux pour les futurs utilisateurs ;-)
Comme dit le proverbe vaut mieux tard que jamais :-D
Merci en effet se sera nettement mieux pour les futurs utilisateurs ;-)
fouineur
Salut
Afin de compléter la documentation, mais avant j'aimerai signaler une erreur de frappe.
Deuxième étape: l'intégrer dans non NPDS.
Deuxième étape: l'intégrer dans mon NPDS.
NON au lieu de MON ;-)
Si non pour en revenir au principal de ma venu :-)
A la fin de la doc tu explique qu'il faut ajouter : rel="lightbox"
Par contre si on met comme ceci : rel="lightbox[plants]"
La différence ?
Ce lit comme un album :
<a href="images/examples/image-2.jpg" rel="lightbox[plants]"><img src="images/examples/thumb-2.jpg" alt="" /></a>
<a href="images/examples/image-3.jpg" rel="lightbox[plants]"><img src="images/examples/thumb-3.jpg" alt="" /></a>
Ou photo par photo :
<a href="images/examples/image-2.jpg" rel="lightbox"><img src="images/examples/thumb-2.jpg" alt="" /></a
<a href="images/examples/image-3.jpg" rel="lightbox"><img src="images/examples/thumb-3.jpg" alt="" /></a>
Bonne journée
Afin de compléter la documentation, mais avant j'aimerai signaler une erreur de frappe.
Deuxième étape: l'intégrer dans non NPDS.
Deuxième étape: l'intégrer dans mon NPDS.
NON au lieu de MON ;-)
Si non pour en revenir au principal de ma venu :-)
A la fin de la doc tu explique qu'il faut ajouter : rel="lightbox"
Par contre si on met comme ceci : rel="lightbox[plants]"
La différence ?
Ce lit comme un album :
<a href="images/examples/image-2.jpg" rel="lightbox[plants]"><img src="images/examples/thumb-2.jpg" alt="" /></a>
<a href="images/examples/image-3.jpg" rel="lightbox[plants]"><img src="images/examples/thumb-3.jpg" alt="" /></a>
Ou photo par photo :
<a href="images/examples/image-2.jpg" rel="lightbox"><img src="images/examples/thumb-2.jpg" alt="" /></a
<a href="images/examples/image-3.jpg" rel="lightbox"><img src="images/examples/thumb-3.jpg" alt="" /></a>
Bonne journée
fouineur
PS :
En faite il existe la façon expliquer sur le site qui lui dit d'utilisé comme ceci :
<a href="images/examples/image-2.jpg" rel="lightbox[roadtrip]"><img src="images/examples/thumb-2.jpg" alt="" /></a>
<a href="images/examples/image-3.jpg" rel="lightbox[roadtrip]"><img src="images/examples/thumb-3.jpg" alt="" /></a>
Je n'ai pas vue de différence avec celle que j'ai proposé au dessus :
<a href="images/examples/image-2.jpg" rel="lightbox[plants]"><img src="images/examples/thumb-2.jpg" alt="" /></a>
<a href="images/examples/image-3.jpg" rel="lightbox[plants]"><img src="images/examples/thumb-3.jpg" alt="" /></a>
;-)
En faite il existe la façon expliquer sur le site qui lui dit d'utilisé comme ceci :
<a href="images/examples/image-2.jpg" rel="lightbox[roadtrip]"><img src="images/examples/thumb-2.jpg" alt="" /></a>
<a href="images/examples/image-3.jpg" rel="lightbox[roadtrip]"><img src="images/examples/thumb-3.jpg" alt="" /></a>
Je n'ai pas vue de différence avec celle que j'ai proposé au dessus :
<a href="images/examples/image-2.jpg" rel="lightbox[plants]"><img src="images/examples/thumb-2.jpg" alt="" /></a>
<a href="images/examples/image-3.jpg" rel="lightbox[plants]"><img src="images/examples/thumb-3.jpg" alt="" /></a>
;-)
Jireck
Citation : fouineur
PS :
En faite il existe la façon expliquer sur le site qui lui dit d'utilisé comme ceci :
Je n'ai pas vue de différence avec celle que j'ai proposé au dessus :
;-)
PS :
En faite il existe la façon expliquer sur le site qui lui dit d'utilisé comme ceci :
Je n'ai pas vue de différence avec celle que j'ai proposé au dessus :
;-)
Bonjour
le nom dans les Crochets si on les met, sert a grouper les images dans la lightbox afin de pouvoir les faire défiler.
donc si tu met
<a href="images/examples/image-2.jpg" rel="lightbox[roadtrip]"><img src="images/examples/thumb-2.jpg" alt="" /></a>
<a href="images/examples/image-3.jpg" rel="lightbox[roadtrip]"><img src="images/examples/thumb-3.jpg" alt="" /></a>
<a href="images/examples/image-2.jpg" rel="lightbox[plants]"><img src="images/examples/thumb-2.jpg" alt="" /></a>
<a href="images/examples/image-3.jpg" rel="lightbox[plants]"><img src="images/examples/thumb-3.jpg" alt="" /></a>
Tu auras deux groupes de 2 images.
de plus si tu veux qu'il y a un "caption" titre sous l'image.
Il suffit d'utiliser la balise title.
(a rajouter dans le tutos, je pense)
/!\ Conseil : il faut "toujours" mettre un balise "alt" et si possible une balise "title"; cela sert autant à l'accessibilité qu'au SEO. /!\
fouineur
Salut,
Merci pour les infos
Si j'ai bien tout capter on fera plutôt comme ceci :
<p><a title="Cliquez sur l'image pour agrandir." href="images/examples/image-3.jpg" rel="lightbox[plants]"><img src="images/examples/thumb-3.jpg" alt="Image d'exemple" /></a></p>
;-)
Merci pour les infos
Si j'ai bien tout capter on fera plutôt comme ceci :
<p><a title="Cliquez sur l'image pour agrandir." href="images/examples/image-3.jpg" rel="lightbox[plants]"><img src="images/examples/thumb-3.jpg" alt="Image d'exemple" /></a></p>
;-)
Les commentaires sont la propriété de leurs auteurs. Nous ne sommes pas responsables de leur contenu.