Trucs / Astuces / PC / Mac / Internet - Un loup blessé

lundi 16 juin 2008

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 !

Billet écrit à 07:38 par 1loup dans la catégorie Trucs / Astuces / PC / Mac / Internet

YES... déjà 21 commentaires :: Comme d´hab, pas de trackback

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

↓

Commentaires et trackbacks

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:", '<span class="shortcut">C</span>lose' par '<span class="shortcut">F</span>ermer'
au niveau du "next:", '<span class="shortcut">N</span>ext' par '<span class="shortcut">S</span>uivant'
au niveau du "prev:", '<span class="shortcut">P</span>revious' par '<span class="shortcut">P</span>récédent' ou '<span class="shortcut">P</span>ré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)

↑

Rajouter un commentaire

vendredi 13 juin 2008

TripTracker slideshow et Jesse Metcalfe

Lorsque je vous ai présenté les lightbox-like dans mon billet sur ClearBox et ShadowBox, j'ai omis de vous parler du TripTracker slideshow. Voici donc le troisième script, à mon avis intéressant, pour l'affichage de vos images. Je lui fait un billet particulier car il est particulier. A la fois plus simple et plus compliqué !

Pour commencer, un petit exemple : En cliquant sur le lien suivant, vous aurez une idée du rendu...

Slideshow Jesse Metcalfe

En dehors de la beauté du choupinou Jesse Metcalfe, vous aurez constaté un effet lightbox et des boutons de navigations : Première image, image précédente, Play, image suivante, dernière image, envoi du lien de l'image par mail, lien de l'image, fermeture !

C'est plus compliqué par rapport à ClearBox et ShadowBox, dans le sens où il ne suffit pas de rajouter un rel="lightbox" dans le lien d'une image pour générer l'effet. Pour le slideshow Jesse Metcalfe que je vous ai présenté, il a fallu coder ceci :


<script type="text/javascript"
	src="http://slideshow.triptracker.net/slide.js"></script>
<script type="text/javascript">
<!--
  var viewer = new PhotoViewer();
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/1.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/2.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/3.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/4.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/5.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/6.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/7.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/8.jpg');
  viewer.add('http://1loup.net/share/IMG/JesseMetcalfe/9.jpg');
//--></script>
<a href="javascript:void(viewer.show(0))">Slideshow Jesse Metcalfe</a>

Par contre, il y a un autre moyen de générer des slideshows rapidement et simplement avec TripTracker slideshow, c'est d'utiliser un bookmarklet. Attention, on ne définit pas les images miniatures/maxi à inclure, le script prend tous les liens qui ont pour cible une image dans un même "album". Cette technique n'est donc pas utilisable dans un billet isolé car sinon, en page d'accueil, toutes les images vont se retrouver dans l'album. C'est par contre très intéressant dans les galeries d'images. Il suffit alors de rajouter ce lien :


<a href="javascript:s=document.createElement('script');s.src='http://slideshow.triptracker.net/slide-bookmark.js';s.type='text/javascript';void(document.getElementsByTagName('head')[0].appendChild(s));">nom de votre lien</a>

Mieux... en bookmarkant ce lien dans vos favoris, lorsque vous visitez une galerie et que le webmaster n'a pas inclus de slideshow, il suffit de cliquer dans votre favoris/marque page et le script va construire un album sur la galerie d'images.

Du coup, j'ai aussi inclus ce script dans mes galeries ! En cliquant sur une miniatures, vous aurez le slideshow par la clearbox, en cliquant sur le lien situé au centre avant et après les miniatures, c'est le TripTracker slideshow qui se déclanche.

Sous DotClear 1 et avec le plugin Gallery, il suffit d'ouvrir le fichier /share/gallery/themes/default/galleryGal.php et à l'endroit où vous souhaitez voir apparaitre le lien, de rajouter ceci :


<div class="ttss">
<a href="javascript:s=document.createElement('script');s.src='http://slideshow.triptracker.net/slide-bookmark.js';s.type='text/javascript';void(document.getElementsByTagName('head')[0].appendChild(s));">TripTracker Slideshow</a>
</div>

puis d'éventuellement mettre une règle pour la classe ttss dans votre feuille de style afin de personnaliser la présentation.

C'est pas génial ?

Le script est gratuit mais il existe une version payante pour ceux souhaitant une version "unbranded".

Billet écrit à 02:48 par 1loup dans la catégorie Trucs / Astuces / PC / Mac / Internet

YES... déjà 4 commentaires :: Comme d´hab, pas de trackback

Tag(s) : Choupinou - , Javascript -

↓

Commentaires et trackbacks

1. Le vendredi 13 juin 2008 à 10:25, par MarcelD

Jesse Metcalfe
Va falloir que je m'y mette au slideshow!

2. Le vendredi 13 juin 2008 à 18:19, par Guillaume

j'ai une gallerie de photos sous gallery (gallery.sourceforge.net/) et ce n'est malheureusement pas compatible avec «le lien» en javascript... dommage

3. Le mercredi 20 août 2008 à 17:48, par Pepere

Bonjour et merci pour cet article

Je souhaiterais utiliser ce slideshow sur mon site en PHP mais je rencontre un probleme pour lequel vous pourrez peut etre m'aider.

Mes photos sont stockées dans un base de données et passées dans le PHP via une boucle while.
J'ai donc un truc du genre:

---------------------------------

$requete = mysql_query("SELECT sid, titre, url FROM " . GALLERY_TABLE);
while (list($sid, $titre, $url) = mysql_fetch_array($requete)
{
<script type="text/javascript">
</script>

<a href="javascript:void(viewer.show(0))"><img src="<?php echo $url ?>"></a>
}
---------------------------------

Le probleme, c'est que dans ce cas, ca m'affiche uniquement la derniere photo (logique).
Comment avoir autant de viewer.add('<?php echo $url ?>'); qu'il y a de photos ?

Je suis une bille en js et je patauge

Merci de votre aide

4. Le jeudi 21 août 2008 à 03:46, par 1loup

>Pepere: Oh là là ! Php+Sql+Javascript, je me sens dépassé là... Je débute en javascript, je me dépatouille à peine en php et je ne sais pas faire une requête Sql !

En regardant ce que tu as écrit, je me dis que cela ne peut pas marcher !
Spontanément, il faudrait que ce soit un truc du genre :

---------------------------------

$requete = mysql_query("SELECT sid, titre, url FROM " . GALLERY_TABLE);
<script type="text/javascript">
</script>

<a href="javascript:void(viewer.show(0))">Lien pour déclencher l'animation</a>

---------------------------------

Tu vois, ce serait plutôt imbriqué comme cela

SAUF que je ne sais pas comment faire appel à du php à l'intérieur du javascript !
Si cela peut t'aider à chercher dans une autre voie...