WordPress: lightbox2 + champs personnalisés

Posted by Fahdos on May 27th, 2009 in Web & Design

afin de réaliser mon portfolio ” sous wordpress “, j’étais obligé de combiner entre Lightbox 2 et les personnalisés (custom fields) au début je croyais que j’allais bien galérer avant de pourvoir le faire, heureusement et comme d’habitude, j’avais tort, car y avais pas plus facile que ça ;)

Avant tt, faut savoir ce que c’est q les Champs Personnalisés + comment les utiliser, donc veuillez visitez mesdames et mesdames ( j rigole :halo: ) : Utilisations des champs personnalisés

à présent il suffit donc d’ajouter rel=”lightbox[ID-Du-POSTE]”

<a href="<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>" rel="lightbox[<?php the_ID(); ?>]"><img src="<?php echo get_post_meta($post->ID, "image", $single = true); ?>" alt="<?php the_title(); ?>" /></a>

“image” est la clé de la méta-donnée
Et bien sur vous devez avoir un plugin lightbox 2 installé sur votre site/blog wordpress, moi personnellement j’utilise celui la: Lghtbox 2

Update:

J’utilise plus Lightbox 2 mais plutot easy fancybox, en cas d’utilisation d’un plugin qui détecte automatiquement les images veuillez utiliser ce nouveau code.

<a href="<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>"><img src="<?php echo get_post_meta($post->ID, "image", $single = true); ?>" alt="<?php the_title(); ?>" /></a>

12 Responses for "WordPress: lightbox2 + champs personnalisés"

May 28th

Nabil

Eh bien bravo Fahd ! J’aime bien ton travail !

Il se peut que je fasse appel à tes talents de graphiste un de ces jours :)
May 28th

Fahdos

^^ coool alors :D
Jun 23rd

rubio

Bonjour,
J’ai un peu de mal, je n’arrive pas à faire fonctionner Lightbox correctement.

En fait dans le code php que tu donnes, que dois-je modifier exactement en fonction de mon billet? Et où dois-je le placer?

Parce qu’en le collant en fin de billet dans la partie HTML, le billet m’affiche ceci:

ID, « image» , $single = true); ?>
alt=» » />

Et du coup image s’ouvre simplement dans la fenêtre au lieu de l’aperçu lightbox. Merci
Jun 23rd

Fahdos

:?: c’est vraiment bizarre.
bon, comme tu l sais déjà le code Html/php que j’ai publié fonction avec les Champs personnalisés dont la clé de la méta-donnée est “Image” ( tu dois la changer si t’as une autre clé –> c’est l seul changement que tu dois faire ).
normalement ça doit marcher, sauf si ton code contient une erreur ( coté code HTML ), anyway pour mieux t’aider, il est préférable que tu me montre le code que t’utilises.
Jun 23rd

rubio

Bon alors je ne comprends pas, j’ai testé en mettant exactement ce code. Et j’insère bien mes images avec la clé “image”…

Je suis juste en phase de test du blog: http://goomba.fr
Jun 23rd

Fayçal

essaye deja de donner statiquement le numero de ton image à lightbox et n’utilisant pas php…
un truc du genre

[html]
< a rel="lightbox[1234]" href="http://ton_blog.org/wp-content/uploads/2009/06/image.png" rel="nofollow">
< img class="aligncenter size-full wp-image-1234" src="http://ton_blog.org/wp-content/uploads/2009/06/image.png"/ >

[/html]

(tu peux deviner le numero 1234 depuis wp-image-1234 quand tu uploads ton image)
Jun 23rd

Fahdos

j viens de jeter un œil sur ton code source de votre page, et apparemment tu l met au mauvais endroit.
j vois que ton thème utilise la même méthode que j’utilise ” timthumb” :up: ( celle que j’utilise aussi pour générer les thumbnails ) donc j crois que j vais facilement résoudre ton prob, malheureusement j peux pas l faire ce soir, demain matin j vais ” inchhalah ” télécharger le même thème et t’envoyer la partie avec quoi tu dois remplacer ton code original ;)
Jun 23rd

rubio

Je te remercie (c’est pas pressé à la minute de toute façon).
En espérant que ce ne soit pas trop fastidieux à appliquer à chaque billet vu que je ne serais pas le seul auteur sur ce blog.

merci
Jun 24th

Fahdos

:twisted: tu crois pas que ce thème est un tit peu compliqué ?
Bref, essaye de remplacer cette partie dans ( single.php )

[php]
href="<?php echo get_post_meta($post->ID, "image", $single = true); ?>" rel="bookmark">
[/php]

Par celle là ( j’ai juste changé rel=”bookmark” par rel=”lightbox[< ?php the_ID(); ?>]” ce qui donne:

[php]
href="<?php echo get_post_meta($post->ID, "image", $single = true); ?>" rel="lightbox[<?php the_ID(); ?>]">
[/php]

Essaye ce code, 99,99% ça doit marcher ;)
NB: j’ai pas posté tt le code psk d’une raison ou une autre, ça me crée un conflit au blog ^^
Jun 24th

rubio

Je te remercie, ça fonctionne parfaitement!

Oui le thème est un peu compliqué mais bon, je ne serais pas le seul à bosser dessus de toute façon. Mais mon “codeur” est en exams ces jours-ci donc je devais faire sans lui.

Encore merci
Jun 24th

Fahdos

:D y a pas de quoi ^^ heureux d t’avoir aider et bonne chance pour ton nouveau projet. ;)
Jun 24th

rubio

Merci! Projet de blog masculin, en espérant que ça fonctionne!