Plugin AutoShadowBox et AutoClearBox pour WordPress

Depuis mon billet sur les lightbox-like, certains d'entre vous sous WordPress ont peut être adopté le plugin Shadowbox JS de Matt Martz ou installé mon pack ShadowBox / ClearBox.

Je vous propose d'améliorer le plugin (et mon pack) et de définir que tous les liens qui pointent vers des images (jpg, jpeg, png, gif et bmp), vidéos (flv, mov, wmv et mp4) et les animations flashs (swf) s'ouvrent avec l'effet shadowbox et ceci sans avoir besoin de rajouter le paramètre rel="shadowbox" dans le code par l'ajout d'une fonction "autoshadowbox" ! Si vous préférez la ClearBox, on va faire un "autoclearbox" (mais uniquement sur les images).

En gros, lorsque vous insérez une image (miniature ou de taille moyenne) ou une vidéo par "ajouter un média", c'est un lien qui est rajouté et le morceau de code que je vous propose va inclure tout seul le code pour la shadowbox.

De même, si dans un billet vous insérez plusieurs images, il va les lier dans un album et vous pourrez passer d'une image à l'autre (voire d'une vidéos à l'autre) directement par la box.

Après avoir installé le plugin Shadowbox JS ou mon pack, télécharger ce dossier zippé AutoClearShadow.zip.

Dézippez-le, vous allez obtenir deux fichiers : AutoClearBox.php et AutoShadowBox.php.

Uploadez dans /wp-content/plugins/ l'un des deux suivant que vous souhaitez travailler avec ShadowBox ou avec ClearBox et aller activer le plugin dans votre interface d'administration.

Lorsqu'ensuite dans vos billets vous aurez une image ou une vidéo dans un lien, il s'ouvrira au clic dans un effet shadowbox.

Paramètre intéressant : le rel="shadowbox" ou rel="clearbox" ainsi rajouté n'est pas en dur dans le code des billets mais il est rajouté "à la volée" si bien que si dans quelques temps vous choisissez de ne plus fonctionner avec shadowbox ou clearbox mais avec un autre lightbox-like, en enlevant ce plugin autoshadowbox ou autoclearbox, les rel="shadowbox" et rel="clearbox" disparaissent d'eux mêmes.

Sur le même principe, il est possible d'adapter ce petit bout de code pour un autre lightbox-like, demandez-moi si vous avez besoin d'aide, je peux vous faire un auto"ce que vous voulez"

Je vous rappelle au passage que la Shadowbox est compatible avec la Lightbox et que si votre blog est déjà rempli de rel="lightbox", la Shadowbox prend le relai si vous désinstallez Lightbox. Pas besoin de revoir tout vos rel="lightbox" en "dur", laissez-les ainsi, shadowbox les interprétera comme des rel="shadowbox" ! J'ai même fait le test avec un lien contenant un rel="lightbox" et mon plugin AutoShadowBox d'activé : c'est Ok, Shadowbox prend toujours le relai !

Par 1loup, lundi 16 juin 2008 à 07:38 :: Trucs / Astuces / PC / Mac / Internet :: #1226 :: rss

Tag(s) : Javascript - , PHP - , Plugin - , WordPress -

TripTracker slideshow et Jesse Metcalfe Passage sous Firefox 3

Trackbacks

Aucun trackback.

Pour faire un trackback sur ce billet, changez tb.php par tada.php dans ceci :
http://1loup.net/tb.php?id=1226

Commentaires

1. Le samedi 2 août 2008 à 23:08, par dalipas

Merci pour ce tuyau que je me suis empressé d'installer sur mon blog !!!

2. Le mardi 5 août 2008 à 02:33, par 1loup

>Dalipas: Cela fait toujours plaisir d'apprendre que ce que l'on fait sert à quelqu'un.

3. Le vendredi 8 août 2008 à 12:49, par Dalipas

Dis-moi si c'était pas abuser... Pourrais-tu me dire comment je peux traduire l'AutoShadowBox afin de remplacer cancel, previous, next, close, par leurs homologues français ? Ben oui je sais je suis un peu puriste (non, non, pas chauvin) mais j'aime bien une certaine harmonie... Merci !!

4. Le vendredi 8 août 2008 à 20:22, par 1loup

>Dalipas: Il n'y a pas de traduction pour l'autoshadowbox puisque cela tourne en tache de fond. C'est la ShadowBox qu'il te faut traduire. Attention, je n'ai pas testé ce qui suit...

A ta place, voici ce que je ferais :

* dans shadowbox.js, cherche "text:", tu vas ensuite trouver ce que tu cherches. Je remplacerais :

au niveau du "cancel:", 'Cancel' par 'Annuler"
au niveau du "loading:", 'loading' par 'chargement'
au niveau du "close:", 'Close' par 'Fermer'
au niveau du "next:", 'Next' par 'Suivant'
au niveau du "prev:", 'Previous' par 'Précédent' ou 'Précédent' (puisque je ne sais pas comment il va réagir à l'encodage)

* puis ensuite, tu cherches les raccourcis clavier :

au niveau du keysClose: ['c', 'q', 27] à remplacer par ['f', 'q', 27]
au niveau du keysNext: ['n', 39] à remplacer par ['s', 39]
au niveau du keysPrev: ['p', 37] pas besoin d'y toucher !

5. Le vendredi 8 août 2008 à 21:49, par dalipas

merci infiniment c'est fait et ça marche !!

6. Le vendredi 10 octobre 2008 à 11:19, par fabien

Est-il possible d'ajouter le titre de l'image ou mieux : un commentaire ?
J'ai regardé les fichiers .js mais j'avoue ne pas y comprendre grand chose !

7. Le vendredi 10 octobre 2008 à 18:36, par 1loup

>Fabien: Reformule ta question, j'ai du mal à te comprendre. Tu voudrais que mon plugin rajoute en automatique un titre ou un commentaire sur chaque image ? qu'il prendrait où ?

(parce que si ce n'est pas en automatique, il suffit de rajouter un title="texte à afficher" dans le code de l'img pour que cela fonctionne, non ?)

8. Le samedi 25 octobre 2008 à 15:09, par Rodin Pandarex

Merci infiniment. Ça fait des mois que je cherchais une solution pour mes images telle que celle-ci.
Je dois juste refaire les liens de mes images mais c'est un moindre mal comparé à ce que j'aurais du faire sans ton aide. Merci beaucoup.

9. Le samedi 25 octobre 2008 à 21:56, par 1loup

>Rodin Pandarex: Tant mieux, c'est prévu pour cela
Merci d'avoir pris le temps de laisser un commentaire de retour

10. Le lundi 27 octobre 2008 à 08:20, par fabien

c'est exact... je suis parti chercher un peu loin ce qui était sous mon nez !

11. Le dimanche 30 novembre 2008 à 16:17, par abonne31

Bonjour,
Après avoir lu ce remarquable sujet sur les lightbox, il reste un soucis : mes videeos demeurent en 300x320 et cela donne un timbre poste au proportion bizarre...
Est-il possible de dimensionner la fenetre ?

Merci

jp

12. Le dimanche 30 novembre 2008 à 17:08, par 1loup

>Abonne31: Je crains qu'il te faille abandonner ce plugin "autoshadowbox" pour mettre tes hauteur et largeur manuellement avec cette syntaxe :

rel="shadowbox; width=largeur; height=hauteur;"

en remplaçant largeur et hauteur par celles désirées.

13. Le mardi 2 décembre 2008 à 19:23, par MarcelD

C'est une véritable mine d 'or ce blog!!

14. Le dimanche 5 avril 2009 à 14:17, par Meelili

Bonjour, je viens de lire ton billet qui est tres interessant, j'ai installé le plugin shadowbox, ainsi que l'autoshadowbox, mais meme sans ce dernier, cela ne fonctionne pas du tout sur mon blog. Je suis assez deçue, cela fait quelques jours que j'etudie la question et je n'arrive pas a comprendre ce qui ne marche pas...
Je repasserai par ici pour voir si tu as quelques solutions, car je suis completement perdue...
En tout cas, merci pour toutes ces informations!

15. Le mardi 7 avril 2009 à 08:36, par 1loup

>Meelili: Il faudrait plutôt que tu supprimes autoshadowbox et que tu te concentres sur le plugin shadowbox seul. A ce que je vois, tu sembles avoir trouvé ton bonheur avec le plugin Lightbox.

16. Le mercredi 9 septembre 2009 à 16:01, par abacardo

avant tout bravo, un très bon tuto, intéressant et très claire
Dans mon cas, wordpress 2,8,4 les vidéos s'affichent dans une fenêtre carrée (300x300 ?)
alors qu'à l'origine elles font 536x300 et laissant apparaître un fond blanc pas joli-joli.
Pouvez-vous m'indiquer quels paramètres modifier et où ?

En tout cas merci pour ce blog.

Mon site n'est qu'une maquette, d'où le faux-texte en latin?
la vidéo est en bas de page dans "Deuxième texte"

17. Le vendredi 11 septembre 2009 à 04:36, par 1loup

>Abacardo: Ce comportement ne provient pas de mon plugin AutoShadowbox (qui ne fait QUE rajouter un rel="shadowbox" dynamiquement) mais au plugin Shadowbox !

Soit tu vires mon plugin et tu rajoutes manuellement rel="shadowbox; width=536; height=300;" au niveau du lien (<a href="... ) de ta vidéo

Soit tu vois avec l'auteur du plugin Shadowbox si c'est paramétrable

18. Le mardi 10 novembre 2009 à 16:22, par MatC

Bonjour,

J'ai fait un petit script jQuery qui permet d'ajouter le l'attribut rel à tous les liens href qui pointent vers des images

Ça permet aisément d'utiliser shadowbox (ou autre) sur un ancien projet, ou sans avoir à se prendre la tête à insérer l'attribut. Et ça marche évidemment pour tous les autres blogs/sites (dotclear, etc.)

Voici le code (il faut charger jQuery et shadowbox avant) :

$(document).ready(function () {

$("a[href$=.jpg],a[href$=.jpeg],a[href$=.png],a[href$=.gif],a[href$=.JPG],a[href$=.JPEG],a[href$=.PNG],a[href$=.GIF]").attr("rel", "shadowbox[galerie ]");

});

Seul inconvénient, toutes images sont dans la même galerie, mais au sein d'un billet ça n'est pas trop gênant

Pour ceux qui veulent, j'ai aussi fait une modification qui permet de récupérer le titre des miniatures (attribut title) pour le mettre dans le href afin qu'il soit afficher par shadowbox (pour récupérer le bon titre, je me base sur le nom de l'image du lien et je lui rajoute le préfixe "." et le suffixe "_t" pour aller chercher le bon thumbnail) :

$(document).ready(function () {

$("a[href$=.jpg],a[href$=.jpeg],a[href$=.png],a[href$=.gif],a[href$=.JPG],a[href$=.JPEG],a[href$=.PNG],a[href$=.GIF]").each(function() {

// On récupère le lien de l'image
var hrefurl = $(this).attr("href");
// On supprime le path (tous les caractères présents avant le dernier slash ainsi que celui-ci)
var filename = hrefurl.replace(/(.*)\//g,"");
// On supprime l'extension
var filename = filename.replace(/\.(.*)$/g,"");
// On récupère le title de du thumbnail qui correspond a l'image du lien (le nom du thumbnail est celui de l'image original avec "." en préfixe et "_t" en suffixe)
var imgtitle = $("img[src$=."+filename+"_t.jpg]").attr("title");
// Pour dotclear (si on veut) : On supprime la dernière virgule et tout ce qui est après (c'est la date d'upload de l'image, ajoutée automatiquement au titre de l'image)
var imgtitle = imgtitle.replace(/,(.*)$/g,"");
// On ajoute les deux nouveaux attributs au lien
$(this).attr("rel", "shadowbox[ce1]") ;
$(this).attr("title", imgtitle) ;
});

});

19. Le mercredi 11 novembre 2009 à 03:07, par 1loup

>MatC: Merci d'être passé pour partager.

20. Le dimanche 14 mars 2010 à 00:21, par Tom

Bonjour,
les "grosses" images laisse la clearbox vide pendant le chargement de la photo... faisant croire au visiteur qu'il y a un problème et du coup ce visiteur quitte précipitamment le site...
Dans la version précédente de clearbox, il y avait un gif de chargement avant l'affichage de la photo. Y'a-til un moyen pour afficher un texte ou un gif pour faire patienter le visiteur ?

Merci d'avance

21. Le dimanche 14 mars 2010 à 05:47, par 1loup

>Tom: En s'adressant à l'auteur de la ClearBox peut-être ? (perso, je suis resté avec une très vieille version, je ne sais pas comment fonctionne celle dont tu parles)

Les commentaires de ce billet peuvent être suivis sur ce fil RSS

Ajouter un commentaire

Nom / Pseudonyme :

Email (Non publié) :

Site Web / Blog (Publié) :

Calculette Captcha anti-spam : que donne trente-cinq moins seize ? (chiffres)

Commentaire :

Le code HTML dans le commentaire sera affiché comme du texte, les adresses internet seront converties automatiquement.

Informations supplémentaires :

Ici, c'est chez moi, compris ?
Je ne fais pas de prémodération, le captcha devrait éliminer les spammeurs.
Mais je dis non au langage SMS.
Essayez d'être compréhensible. Je préfère des fautes de frappes, de grammaires, d'orthographes à "KiC Kifè KK".
Pour le reste, ensuite, je fais ce que je veux avec VOS commentaires. Je peux très bien les modifier (je mettrais "Edit") ou les censurer si je l'estime nécessaire.

(Adresse IP enregistrée même derrière un proxy !)

Se souvenir de mes informations