Bonjour,
Je suis en train de découvrir colorbox et je bute sur quelques problèmes.
J’ai installé le module pour drupal 6 et le plugin dans librairies.
J’ai voulu faire une galerie par page à partir d’une vue (de views) réunissant des contenus avec champs. Mon premier problème est que je n’arrive pas à faire apparaitre les champs texte sur la popup, seul le champ image est configurable en colorbox. Donc sur la vue, je peux avoir plusieurs champs par contenu (texte et image) mais sur la popup, je n’ai plus que l’image. Alors que je voudrais faire l’inverse, n’avoir sur la vue que l’image avec un preset imagecache et sur la popup, en plus du champ image, au moins un champs texte linkable vers la node complète. Je n’ai pas trouvé comment faire.
Mon autre problème est comment faire pour personnaliser l’affichage. J’ai compris que je pouvais le faire via les CSS. Je suppose que si je choisis comme settings pour la colorbox, l’exemple 1, il faut remanier la css dans le dossier de l’exemple 1 (je n’ai pas encore tester).
Mais si je veux faire deux galeries avec des settings différents, comment procéder ?
Merci de bien vouloir me renseigner
- Vous devez vous identifier ou créer un compte pour écrire des commentaires
Mes questions n’ont guère trouvé d’écho et de mon côté je n’ai pas beaucoup avancé. Je n’arrive même pas à ajouter un lien comme avec lightbox2 (avec view image détail) dans la popup alors qu’on m’avait affirmé que colorbox pouvait faire plus de chose que lightbox. Quelque chose doit m’échapper…
Lamx
43
Pour afficher un titre et quelques commentaires sur une image tu peux mettre dans l’attribut title de ton lien du code html. Seule limite : aucun guillemet anglais (
"). Mais tu peux utiliser les guillemets français « et ».Par exemple :
<a href="ma_grande_image.jpg" rel="mon_groupe" title="<h1 style='color: red;'>Ceci est un titre rouge</h1><p>Ceci un commentaire avec un retour à la ligne<br/> et même un lien <a href='www.google.fr'>gogole</a>."<img alt="Petite image" src="ma_petite_image.jpg" title="Cliquez sur l'image pour l'agrandir">
</a>
Pour moi cela fonctionne sous Drupal 7 (www.galerie-angelique.net/galerie) mais je ne vois pas pourquoi il n’en serait pas de même avec Drupal 6. Tu peux rentrer le code en dur (full html) ou même utiliser les facilités de CKEditor (et probablement d’autres).
Par contre pour associer un texte long avec une image tu devrais sans doute faire une page html dans une boîte colorbox. Là je te laisses découvrir je ne l’ai pas fait.
pjmh
8
Bonjour et merci de réactiver le post.
Ce que j’ai vu correspond à ce que je cherche. En fait depuis j’ai évolué vers drupal 7. Par contre je vois toujours pas comment et surtout où entrer le code html dans l’attribut title. Dans le corps du contenu ?
Lamx
43
Oui. Du moins c’est comme cela que je fais, dans une simple «page de base» avec donc un titre et le corps de page. Personnellement j’utilise CKEditor mais je pense que la manip est la même avec un autre éditeur WYSIWYG. Il faut alors utiliser le format de texte «FULL HTML».
Première méthode
Honnêtement c’est là que cela se complique. Je n’ai pas trouvé de remède miracle pour composer ce code avec un générateur. Tu peux écrire ton texte sur une page réservée aux essais puis retrouver le code HTML en cliquant sur source. Le problème est que l’éditeur produit un code contenant des guillemets anglais (pour borner les noms de classe par exemple) et que reporté tel quel dans le lien colorbox cela ne fonctionne pas. Même en précédent les guillemets avec un anti-slash cela ne fonctionne pas. Il faut absolument changer tout ces guillemets pour des apostrophes.
Seconde méthode
Tu rentres tout le code HTML à la main après avoir cliqué sur le bouton source en faisant bien attention de ne pas mettre de guillemet anglais dans l’attribut title de la balise
<a>.À NOTER : Quelque soit la méthode CKEditor rajoute un attribut «data-cke-saved-href» devant chaque attribut href, avec la même valeur. Je n’ai aucune idée de ce à quoi cela sert mais cela n’empêche pas le système de fonctionner.
Bon courage.
pjmh
8
Encore merci, je vois comment cela marche. Mais il faut rentrer le code à la main pour chaque image, or ce sont des images triées en galerie grâce à views et surtout , je fais ça pour un ami qui ne touche pas au code. Donc je cherchais un système pour générer le code.
Je suppose qu’il faut toucher aux template, trouver un moyen de modifier l’attribut title mais je ne m’y connais pas assez…
Je n’arrive pas à trouver de la documentation là-dessus, sauf dans le google groupe (http://groups.google.com/group/colorbox ) mais rien avec drupal.
Lamx
43
Je me réponds à moi-même juste pour ajouter que l’on peut inclure des guillemets anglais dans le code.
Il faut pour cela décocher l’item «Force cleanup on standard paste» dans le paramétrage de CKEditor (au moins pour le profil wysiwyg Full HTML). En effet le «nettoyage» d’un texte collé remplace les guillemets anglais qui ont un sens particulier en HTML par leurs équivalents affichables, et dans le cas présent il faut justement conserver ces caractères spéciaux. On peut alors composer son texte avec les attributs qui vont bien dans son éditeur préféré et le copier/coller dans l’attribut title du lien.
Ou alors il faut taper le texte directement dans l’emplacement de l’attribut title, ce qui n’est pas très pratique.
pjmh
8
Alors en fait il m’a fallu du temps avant de voir l’intérêt de la chose, d’autant qu’entre temps je suis passée de D6 à D7.
Effectivement par cette méthode dans la page de la vue, je peux entrer l’URL directement selon cette méthode et transformer le titre en lien. Et cela marche très bien.
Mais il me reste un problème à résoudre. Si je définis l’url par :
var url = $(this).attr(‘href’) ;
Cela va m’ouvrir l’image en grand et ce n’est pas exactement ce que je veux.
Je voudrais que ce lien me permette d’ouvrir le node de l’image (la page où il y a l’image en grand avec toutes sortes d’explications).
Alors dans la vue, je peux récupérer le nid de chaque node (ou mieux le path )mais je ne sais pas comment modifier l’url pour que ce ne soit pas celle de l’image mais celle de sa node….
Lamx
43
Alors là j’ai du mal à suivre le cheminement de ta pensée. Colorbox sert à afficher une image dans une boite qui se superpose à ta page, simulant une fenêtre pop-up, elle-même rattachée à un lien (texte ou image). Si l’idée est d’ouvrir une page il n’est plus question d’utiliser ColorBox (ou du moins pas ainsi) mais un lien direct, en pratique une image dont la balise href contient le chemin d’accès à la page. Dans ce dernier cas href devrait contenir quelque chose du style node/xxx xxx étant le numéro de node de la page et l’attribut class du lien ne contient pas colorbox.
Ou alors si l’idée est d’afficher une page sans les entêtes, menu et autres pieds de page, c’est à dire une grande image avec du texte autour (et pourquoi pas d’autres images, de la musique…), mais tout de même en gardant le principe d’une fenêtre pop-up, il faut utiliser la possibilité de ColorBox d’afficher une page HTML. Là je te renvoie à la documentation de ColorBox car je ne l’ai pas fait…
pjmh
8
L’idée est de présenter un travail d’artiste. Une vue regroupe des vignettes d’oeuvres triées par catégorie (type dessins, aquarelles etc…) pour donner une vue d’ensemble. Colorbox permet d’afficher ces images en grand et de les faire défiler de façon attrayante. Ce que je souhaite rajouter c’est un lien (genre «pour en savoir plus sur cette oeuvre») pour accéder, depuis la popup, à la node d’où provient l’image et qui contient des informations complémentaires.
Lightbox pour D6 proposait ce type de lien et je ne sais pas pourquoi avec D7 je n’arrive pas à le faire fonctionner…
Lamx
43
Si tu utilise les URL simplifiées dans la balise «title» du lien tu mets quelque chose du genre :
<p class="ma_classe_css"><a href="mon_alias_de_page">En savoir plus...</a></p>Par exemple si tu fais une page dont l’adresse est www.mon_domaine.fr/bateau consacrée décrivant un tableau (qui représente un lapin ou une marmotte bien sur) le code sera :
<p class="ma_classe_css"><a href="bateau">En savoir plus...</a></p>Tu peux juger de l’effet sur la page Galerie de mon site. J’ai regroupé les œuvres en catégories (poésie, enfants…) et dans les commentaires s’affichant en bas des agrandissements ColorBox de chaque tableaux du groupe «poesie» il y a un lien sur le titre de la poésie vers la page Poésie du site. On est pas loin de ce que tu cherches. Dans mon cas il n’y a qu’une page poésie avec une ancre pour chaque tableau. Mais il suffit de mettre une adresse différente à chaque fois pour ouvrir une page par tableau.
Si tu n’utilise pas les URL simplifiées tu mets node/XXX (où XXX est le numéro de ton node cible bien sur).
<p class="ma_classe_css"><a href="node/XXX">En savoir plus...</a></p>Dans mon cas les images de la page Poésie ne s’affichent pas mais sûrement parce que j’ai tout fait en URL simplifiées.
Donnes-moi l’adresse de ton site je suis curieux de le voir.
pjmh
8
J’ai bien compris la méthode et cela correspond à ce que je cherche mais le problème est qu’il faut rentrer les adresses à la main dans le code. Or ce site je le fais pour quelqu’un qui ne connait rien en code et qui veut seulement rentrer ses images et les disposer comme il a envie.
Les différentes galeries sont triées par vues, et chaque vue est capable de récupérer l’adresse de chaque node, mais je n’arrive pas à trouver un moyen pour faire passer cette adresse à colorbox.
Si j’utilise cette méthode :
$(«a.gallery»).colorbox({rel : ‘gal’, title : function(){
var url = $(this).attr(‘href’) ;
return ‘Open In New Window’ ;
}}) ;
J’obtiens l’ouverture de l’image en grand. J’ai tenté de remplacer l’url par la token [path] et cela marche pour la première image de la galerie (ça ouvre la node) mais ensuite pour chaque vignette il ouvre toujours la même node comme si la requete n’était pas refaite à chaque ouverture d’image.
Et là je cale…
Lamx
43