Un loup blessé

Aller au contenu | Aller au menu | Aller à la recherche

Mot-clé - Javascript

Fil des billets - Fil des commentaires

mardi 3 février 2009

Attention : PlayVidZik ne fonctionne pas correctement avec Dailymotion

Il semblerait que j'ai fait une bourde ! Manuellement, vous pouvez supprimer le signe underscore '_' qui apparait en trop dans les codes après insertion ou alors en attendant que je modifie les plugins, vous pouvez faire une petite modification dans le code :

Vous allez modifier le fichier quicktags.js qui se trouve dans le dossier wp-includes

Vous allez modifier le fichier toolbar.js qui se trouve dans le dossier /ecrire/js/

Dans les deux cas, sous DotClear et Wordpress, cherchez cette ligne :


case "2": var inter = permalien.split("/video/"); var stock = inter[1]; var vpID = stock.substr(0,6); break;

et remplacez là par :


case "2": var inter = permalien.split("/video/"); var stock = inter[1]; var vpID = stock.substr(0,5); break;

Avec cette modification, cela devrait fonctionner à nouveau.

Je mettrais les plugins à jour lorsque j'aurais un peu de temps...

mercredi 28 janvier 2009

Quelques petits changements dont Feedburner, Google et sidebarres...

Je fais des petites modifications depuis un certain temps, voici un petit résumé :

Ceux dont les flux sont extériorisés chez Feedburner doivent le savoir, Feedburner ayant été racheté par Google, il faut migrer ses flux (ou Google le fera au plus tard le 28/02). Tant qu'à faire, je me suis dit que je pouvais utiliser le "MyBrand" devenu gratuit (la possibilité d'utiliser son nom de domaine).

En résumé, mes flux sont devenus : Edit : Je n'utilise plus FeedBurner

Pour les billets au format RSS : http://flux.1loup.net/ULBrss

Pour les billets au format Atom : http://flux.1loup.net/ULBatom

Pour les commentaires au format RSS : http://flux.1loup.net/ULBrssCommentaires

Pour les commentaires au format Atom : http://flux.1loup.net/ULBatomCommentaires

Google devrait normalement faire une redirection des anciennes URL Feedburner vers les nouvelles mais je ne sais pas jusqu'à quand donc mettez vos agrégateurs à jour...

Les compteurs Feedburner montent et descendent, j'ai lu ici et là que c'était normal, il faut compter une semaine à 10 jours avant que cela redevienne stable.

Dans la série Google... j'ai rajouté en fin de page un champ de recherche. La fonction "Rechercher" de DotClear ne fonctionnant que sur un seul mot, les personnes cherchant quelque chose de particulier (sur plus d'un mot) peuvent maintenant effectuer leur recherche via Google.

Screenshoot de la recherche Google

J'ai viré des trucs que j'estimais que cela ne servait à rien :

Screenshoot des suppressions

Exit donc la barre AddFeed pour s'abonner aux flux, la barre Wikio pour s'abonner au flux RSS et le bouton pour me "favoriser" via Technorati !

J'ai enlevé également le script/marqueur PaperBlog qui ralentissait un peu trop à mon gout le bousin.

J'ai rajouté dans "Mon sapin de Noël" (ma sidebarre de gauche) le logo "Mon blog se nourrit de vos commentaires", le logo "Ad-Free Blog" (Blog sans Pub) et un logo "Free Hugs" (je n'ai pas attendu de le mettre pour le pratiquer avec ceux qui le veulent...).

Screenshot des 3 logos installés en plus

Les MyBlogLog, Who's Hot, Criteo Autoroll, Blogasty, Blogcatalog, Pijoo et BlogItExpress semblent avoir disparu des sidebarres ? Et bien non : J'ai tout rassemblé dans une iframe qui devient visible en cliquant sur le bouton "Trombinoscope" en haut à gauche ! Avantages : ce bouton est placé à cet endroit par CSS alors que dans le code, il est en fin de page. Le chargement du blog n'est donc plus ralenti par les appels à tous ces services.

Screenshot du bouton de l'iframe des trombinoscopes

C'était les Geekeries du jour :hysterique:

lundi 6 octobre 2008

Ajout dans le code du plugin Captcha

Sous Dotclear 1, vous utilisez ce captcha accessible ?

Je vous conseille maintenant un ajout :

Sur le forum DotClear, un nouveau venu a réclamé la possibilité de rajouter une boite d'alerte lorsque le résultat du captcha est incorrect. Il est vrai qu'il n'est pas rare que certains commentateurs ne s'aperçoivent pas qu'ils ont oublié de remplir le captcha et repartent sans s'être aperçu que leurs commentaires n'ont pas été validés.

J'ai proposé une modification et je l'ai mis en pratique ici même depuis plusieurs jours. Pour le voir en action, tapez un commentaire sans remplir le captcha. Après avoir cliqué sur "envoyer", vous devriez voir apparaitre un message d'alerte genre :

Alerte captcha incorrect

Si vous souhaitez faire pareil, voici le guide :

Il va falloir modifier le fichier postcon.php qui se trouve dans /dotclear/ecrire/tools/captcha/. Si votre DotClear n'est pas installé dans le répertoire /dotclear/ et/ou que vous avez renommé le répertoire /ecrire/, adaptez le chemin en conséquence.

Entre la ligne 65 et 70, trouvez cette ligne :


$GLOBALS['error_captcha'] = $GLOBALS['form_err'] = __('rÈsultat du captcha incorrect');

Rajoutez à la suite, sur la ligne du dessous :

echo '<script type="text/javascript">alert("ATTENTION\nCaptcha incorrect - Votre commentaire est exclu\nVeuillez recommencer, en retapant juste le captcha.");</script>';

Remplacez par :


$GLOBALS['error_captcha'] = $GLOBALS['form_err'] = __('résultat du captcha incorrect') . __('<script type="text/javascript">alert("ATTENTION\nCaptcha incorrect - Votre commentaire est exclu\nVeuillez recommencer, en retapant juste le captcha.");</script>');

Et c'est tout, sauvegardez et réuploadez le fichier postcon.php ainsi modifié :hysterique:

(Vous pouvez modifier les phrases de l'alerte mais évitez les accents, Opera et Internet Explorer n'aiment pas trop :( Je me suis cassé le cul à faire des phrases sans participe passé en "é" !)

Mekbrun, Fiuuu, SLB : Je peux faire la modification sur vos blogs si vous le désirez, laissez juste un commentaire ici.

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 !

vendredi 13 juin 2008

TripTracker slideshow et Jesse Metcalfe

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 !

Player TripTracker slideshow

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 ? :hysterique:

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

jeudi 8 mai 2008

Clearbox et Shadowbox en remplacement de Lightbox2

Cela fait plusieurs semaines que je travaille sur ce billet, testant beaucoup de chose afin d'essayer de faire quelque chose d'exhaustif. Attention, ce billet est très long, très lourd, limite insipide par endroit. Aussi, un petit sommaire ne fera pas de mal :

01 Pourquoi abandonner Lightbox2, la référence ?

02 Quels sont les autres possibilités ?

03 Pourquoi avoir choisi Clearbox et Shadowbox ?

04 Tests de ClearBox et ShadowBox

05 Résultats des tests

06 Conclusions ?

07 Comment installer ShadowBox et ClearBox (DotClear 1&2, WordPress) ?

08 Remplacement du plugin LightBox pour DotClear 1

09 Utilisation de ClearBox et ShadowBox

10 Et vous...

Cela vous permettra de lire ce billet en plusieurs fois si vous en avez envie, chaque numéro de "chapitre" est cliquable.

  • Pourquoi abandonner Lightbox2, la référence ?

Parce qu'il est un peu lourd par rapport à ce qu'il fait (Plus de 200Ko tous javascripts confondus). Il est vraiment très bien puisqu'il passe partout (tous les navigateurs de tous les OS) mais ne faire QUE les images, c'est maintenant insuffisant !

  • Quels sont les autres possibilités ?

Il y en a une quantité phénoménale. Après pas mal d'heures à les tester, j'ai retenu Shadowbox et Clearbox. Petit tour rapide sur l'exclusion des autres :

(Cliquez ici si vous n'êtes pas intéressé par cette liste et passer à la suite.)

Lightbox Slideshow : Dérivé de Lightbox, ajout de la fonction slideshow. Toujours avec Prototype, ne fait que les photos.

Extrait Lightbox Slideshow

LightBox 2 de DrMickey utilisant LightBox2 et LightView donne un sildeshow aux coins arrondis, très joli mais toujours sous Prototype.

Extrait LightBox 2 de DrMickey

Un LightBox personnalisé : Avec Moo.Fx mais ne faisant que les photos.

Extrait Lightbox personnalisé

Videobox : Un lightbox pour les vidéos mais sous Mac OS X dans Firefox, aucune vidéo de visible (celle de Google) alors qu'elle est bien visionable si je l'ouvre dans un nouvel onglet.

Extrait Videobox

Lightview : Découvert pour MarcelDugomier sous WordPress, qui n'arrivait pas à installer "simplement" LightBox, le plugin pour WordPress est facile d'utilisation mais depuis, après quelques essais, il s'avère décevant ! En faisant un test sur une vidéo mov en H264, celle-ci est toute aplatie malgré les tailles transmises. De plus, la licence "sans modification possible du script" est gênante. Le summum de l'impossible pour moi : le CSS est INVALIDE et l'auteur ne comprend pas ce que cela veux dire :ouhla:

Extrait Lightview

Lightwindows : L'un des plus intéressant sur le plan des fonctionnalité mais sous prototype et pas de slideshow. Hihihi, les mov ne fonctionnent pas sous Internet Explorer 6 !

Extrait Lightwindows

Moodalbox : Contenu mixte, avec Mootools, pas de slideshow

Extrait Moodalbox

Slightbox : Ne fait apparemment que les photos et pas de slideshow. (Au moment où j'écris, le serveur ne répond plus, je ne peux pas mettre d'extrait :( mais je laisse une place en espérant que le site réponde à nouveau)

Extrait Slightbox

mooSlideBox 3 : Pas convaincu du tout par l'aspect, utilise mootools. L'animation qui surgit par le bas, c'est une bonne idée mais j'ai comme l'impression que mon écran n'est pas utilisé au maximum de ses capacités (et devoir cliquer sur le "close" :( )

Extrait mooSlideBox 3

Slimbox : Clone de Lightbox mais avec Mootools donc plus léger mais ne fait que les images.

Extrait Slimbox

Multibox : Multiformats. Utilise Mootools. Gèle la fenêtre de Firefox sous Mac OS X.

Extrait Multibox

Multifaceted Lightbox : Ne fais pas que les photos mais pas très "multi" non plus. Bouton close obligatoire. Bof !

Extrait Multifaceted Lightbox

Leightbox : Lien close obligatoire. Assez moche selon mes gouts.

Extrait Leightbox

Glassbox : Trop compliqué à utiliser à mon gout.

Extrait Glassbox

SqueezeBox : Si j'ai bien compris, c'est encore en béta, il n'y a pas assez d'explications sur le site pour que je juge le truc. Fonctionne avec Mootools.

Extrait SqueezeBox

MediaBox : Utilise Mootools, multiformat, ne fait pas les images mais possibilité de le coupler avec Slimbox.

Extrait MediaBox

LITbox : L'utilisation ne me convient pas.

Extrait LITbox

LighboxXL : Multiformat. Comme Lightbox, fonctionne avec Prototype.

Extrait LightboxXL

Lighbox++ : Multiformat. Comme Lightbox, fonctionne avec Prototype.

Extrait Lightbox++

PrettyPhoto : N'est pas très beau selon mes gouts et ne fait que les photos. Par contre, jQuery ET le javascript est très petit.

Extrait PrettyPhoto

iBox : Multiformat. Pas de galerie ni de slideshow.

Extrait iBox

SmoothBox : Comme Thickbox mais avec Mootools. Multiformat.

Extrait SmoothBox

jQuery Lightbox : Lightbox en jQuery mais ne fait que les photos, pas de slideshow.

Extrait jQuery Lightbox

HighSlide JS : Très joli mais me parait beaucoup trop compliqué à utiliser ! Multiformat. Bouton close obligatoire.

Extrait HighSlide JS

FrogJS Javascript Gallery : Fonctionne avec Prototype. Uniquement les photos.

Extrait FrogJS Javascript Gallery

GreyBox : Ne me convient pas du tout, j'ai trouvé cela vraiment moche, les boutons de navigation tout en haut ne me plaisent pas non plus. (multiformat)

Extrait GreyBox

GreyBox Redux : Pas très intéressant en dehors de la taille réduite par rapport à l'original.

Extrait GreyBox Redux

Suckerfish Hoverlightbox et Suckerfish Hoverlightbox Redux : Ne me plaisent pas visuellement.

Extrait Suckerfish Hoverlightbox

FrontBox : Ne me plait pas du tout visuellement. (multiformat)

Extrait FrontBox

Slightly ThickerBox : Evolution de ThickBox, sous jQuery. Je trouve cela moche.

Extrait Slightly ThickerBox

Lytebox : Multiformat. J'ai longtemps testé car le slideshow est vraiment très bien mais les lyteframes posent vraiment trop de problèmes suivant les navigateurs utilisés.

Extrait Lytebox

GmapsOverlay : Un lightbox pour les Google Maps, utilisant Mootools.

Extrait GmapsOverlay

SlimBox Extended version : Bof, encore avec Mootools. (multiformat)

Extrait SlimBox Extended version

Bumpbox : Encore avec Mootools, me semblait bien sympa avec l'animation qui "tombe" mais ni le flash ni les pdf ne fonctionne sur ma config !

Extrait Bumpbox

PopBox : Je n'ai pas franchement approfondi le sujet.

Extrait PopBox

FancyBox : Seulement images, en jQuery, pas de Slideshow.

Extrait FancyBox

FancyZoom : Kif Kif et en plus je n'aime pas trop.

Extrait FancyZoom

nyroModal : Très sobre, je n'ai pas vu s'il était possible de faire des slideshows et j'avoue ne pas avoir tout compris. (Utilise jQuery) A étudier ?

Extrait nyroModal

Control.Modal : Pas tout compris non plus. Utilise Prototype.

Extrait Control.Modal

TinyBox : Utilise prototype. Ne semble faire que les photos. Bouton close obligatoire.

Extrait TinyBox

Milkbox : Utilise Mootools, seulement photos, pas de slideshow.

Extrait MilkBox

RoeBox : Combinaison de LightBox et SlimBox, seulement les photos, pas de slideshow.

Extrait RoeBox

Awesome Box : Ne fait que les photos, pas de slideshow.

Extrait Awesome Box

Splash : Je n'aime pas trop les couleurs utilisées pour les boutons mais je note qu'il y a un slideshow. Dommage que les grandes images ne soient pas redimensionnées à la taille de l'écran.

Extrait Splash

Thickbox : Contenu mixte, avec jQuery donc plus léger mais ne fait pas de slideshow. Visuellement, je n'aime pas.

Extrait Thickbox

Facebox : Utilise jQuery mais ne me plait pas visuellement. Possède un slideshow.

Extrait Facebox

  • Pourquoi avoir choisi Clearbox et Shadowbox ?

Shadowbox est compatible avec Lightbox et je n'ai donc pas besoin de changer les codes de mes très nombreuses images, il prend le relai. On peut l'utiliser avec le couple Prototype-Scriptaculous, avec jQuery, avec Mootools... j'ai choisi jQuery car mes essais avec Mootools n'ont pas été satisfaisants et jQuery est plus léger que Prototype-Scriptaculous.

J'ai même essayé avec le Protoculous effect packer gzippé disponible dans le Protopack (28Ko seulement), tout est Ok sur un hébergement 1and1 mais ne marche pas avec un hébergement Free par exemple, donc jQuery est plus à même de convenir à plus de monde.

Clearbox fait de très jolis slideshow et permet d'ouvrir des frames simplement au survol de la souris (choix "click" ou "over").

On retrouve dans un slideshow, la flèche gauche pour reculer d'une image, en haut à gauche le bouton play pour lancer le slideshow, en haut à droite le bouton "close" :

Extrait Slideshow Clearbox 1

Voici la flèche vers la droite pour avancer d'une image et le bouton play qui est devenu un bouton "pause" une fois le slideshow lancé, une barre de défilement avançant au rythme du temps qui reste avant de passer à l'image suivante :

Extrait Slideshow Clearbox 1

En se déplaçant dans la partie inférieure de l'image, les miniatures qui composent la galerie s'affichent avec la possibilité de cliquer pour passer directement à l'image en question :

Extrait Slideshow Clearbox 1

Pour voir le slideshow en action, cliquez sur ce lien, attendez que toute la page soit affichée puis cliquez sur une image de cette galerie.

Clearbox et Shadowbox retaillent les très grandes images qui ne peuvent s'afficher dans votre écran et vous les présentent dans un format compatible avec la résolution de votre écran.

Les frames sur les pages web distantes sont plus sympa avec Shadowbox, les grandes images qui ne doivent pas être retaillées aussi.

Les CSS des deux sont valides W3C et l'ensemble des javascripts Shadowbox+Clearbox ne fait (en Ko) que moins de la moitié de mon Lightbox d'origine.

J'ai rencontré de nombreux scripts où il fallait impérativement cliquer sur le bouton "close" pour quitter alors que ClearBox et ShadowBox (comme beaucoup d'autres) se ferment aussi en cliquant à l'extérieur (dans la zone sombre).

Attention, tout n'est pas parfait non plus avec Shadowbox, les ascenseurs obtenu avec les codes <pre></pre> sont bien masqués (le contenu des box passent au dessus) mais non grisé sous Firefox/Mac OS X. Je positionne donc un ascenseur entre la série des Clearbox et celle des Shadowbox afin de voir. Le problème semble résolu avec Firefox 3 béta 5, à suivre.

  • Tests de ClearBox et ShadowBox

Le plus simple est donc de tester en direct live une certaine quantité de contenu sur différents navigateurs d'OS différents, GO GO GO :

(Cliquez ici si ces tests ne vous intéressent pas et passer à la suite.)

Le flv "seul" (14) n'est pas géré par Clearbox, il est juste là pour vérifier que le navigateur propose de télécharger le fichier. Tandis qu'une des fonctionnalité intéressante de Shadowbox est d'utiliser un FLVplayer intégré.

Je teste sur plusieurs type de vidéos (Youtube, Google...) car lors de mes tests avec LyteBox, j'ai constaté que cela fonctionnait avec YouTube mais pas Google alors que les deux sont pourtant des animations flash.

La page Web de ClearBox est très longue à obtenir car en Hongrie.

Si vous souhaitez multiplier les tests, voire que je teste autre chose comme les pdf transformés en swf, je vous conseille plutôt d'aller sur une page de test où vous n'aurez pas besoin d'attendre l'affichage complet de mon thème qui contient pas mal de "parasites" (au sens long à afficher) dans les sidebarres. (Les effets de type Lightbox ne pouvant se déclencher qu'une fois la page complètement chargée)

Avec Clearbox :

Contenu Web2.0 :
(01) Une vidéo YouTube - (02) Une vidéo Google - (03) Une vidéo DailyMotion - (04) Une vidéo wat.tv - (05) Une bande annonce trouvé sur le net - (06) La page web de Clearbox

Photos, Gallerie, Slideshow
(07) Une photo trop grande retaillée par défaut - (08) La même photo trop grande en taille normale, scrollable
(09) Une galerie Jake1 - Une galerie Jake2 - Une galerie Jake3
(10) Une galerie avec Preview et "start" - -

Flash et dérivés
(11) Un MP3 lu par NeoLao - (12) Une vidéo flv avec le neoplayer - (13) Une animation flash simple - (14) Une vidéo flv

Formats divers
(15) Une video wmv - (16) Une vidéo mov H264 - (17) Une vidéo mpg


Texte de test compris dans des balises pour obtenir l'affichage d'ascenceurs et voir ce que cela donne avec les effets Shadowbox et Clearbox...

Avec Shadowbox :

Contenu Web2.0 :
(18) Une vidéo YouTube - (19) Une vidéo Google - (20) Une vidéo DailyMotion - (21) Une vidéo wat.tv - (22) Une bande annonce trouvé sur le net - (23) La page Web de Shadowbox

Photos, Gallerie, Slideshow
(24) Une photo trop grande retaillée par défaut - (25) La même photo trop grande en taille normale, déplaçable, à la manière des "GoogleMaps"
(26) Une galerie Jake1 - Une galerie Jake2 - Une galerie Jake3

Flash et dérivés
(27) Un MP3 lu par NeoLao - (28) Une vidéo flv avec le neoplayer - (29) Une animation flash simple - (30) Une vidéo flv

Formats divers
(31) Une video wmv - (32) Une vidéo mov H264 - (33) Une vidéo mpg

Vous pouvez bien entendu me rapporter des configurations sous lequel cela ne fonctionne pas ou pas bien. Merci de me transmettre l'O.S., le navigateur et leurs versions. Si cela ne fonctionne pas du tout ou si c'est légèrement dégradé. Attention, avant de mettre en cause l'effet Shadowbox ou Clearbox, vérifiez que le contenu s'affiche lorsque vous ouvrez le lien dans un nouvel onglet ou une nouvelle fenêtre, et donc qu'il ne vous manque pas un codec ou que le site de partage de vidéo n'est pas en carafe !

  • Résultats des tests :

(Pour aller directement aux conclusions : ↓ )

1 - Sous WINDOWS XP SP2

a - Internet Explorer 6 :

(15) Téléchargement proposé du fichier WMV, pas de lecture, alerte de sécurité

Légère dégradation de l'effet Shadowbox (fondu au noir / bordure basse de l'iframe) sur tous les tests

(33) Les boutons du player mpg ne sont pas présents.

b - Firefox 3 béta 5

(15) No video apparait pendant le chargement de la vidéo WMV et après sa diffusion, les boutons du player ne sont pas présents.

(31) Comme (15)

c - Opera 9.26

Aucune des animations ClearBox (01)(17) ne s'arrêtent avec le bouton "close", le son continue et si on relance une autre vidéo à la suite, pendant le chargement de la suivante, on revoit les images de la précédente.

L'effet Clearbox est comme "au ralenti" avec un P4 à 2,4GhZ et un P4 à 3GhZ.

d - Internet Explorer 7

(15) Téléchargement proposé du fichier WMV, pas de lecture, alerte de sécurité

(16)(17) Pas d'autoplay des vidéos mov et mpg.

(32)(33) Mov et Mpeg continuent de jouer le son après le "close", les boutons des players ne sont pas présents.

e - Firefox 2.0.014

(15) La vidéo WMV s'ouvre en externe dans le Windows Media Player (c'est peut être un paramétrage chez moi)

(16)(17) Pas d'autoplay des mov et mpg.

f - Safari 3.1

(15) Ouvre le WMV dans Windows Media Player et retourne en page d'accueil pour le navigateur.

(16)(17) Pas d'autostart des mov et mpg.

(31) WMV non lu, le symbole Windows Media apparait dans la frame mais rien ne se passe.

2 - Sous Windows 2000 SP2

Résultats sous réserve, le PC de test ne possède pas de carte son. J'ai considéré le test comme Ok si l'animation/la vidéo se charge et est visionable.

a -Internet Explorer 5 : Pas d'effet Clearbox ni Showbox.

b - Firefox 2.0.0.6 :

(01) à (14) Ok

(15) à (17) non testés, les codecs ne sont pas installés

(18) à (30) Ok

(31) à (33) non testés, les codecs ne sont pas installés

3 - Sous Mac OS X 10.4.11 (Tiger)

a - Firefox 3 béta 5

(15) Ecran noir sur le WMV

(25) Le déplacement est "bizarre"

(31) Parfois l'écran reste noir au lieu d'avoir le WMV et comme (32)(33)

(32)(33) Les vidéo MOV et MPG restent en surimpression après le "close" et il faut un clic supplémentaire pour les faire disparaitre.

Mais bon, ce n'est qu'une béta et la très bonne nouvelle, c'est que les ascenseurs (overflow:auto des <pre></pre>) ne restent plus visible comme sous les versions 2.

b - Opera 9.50 beta

Le 1/4 inférieur bas de l'écran n'est pas assombri avec les clearbox comme si la taille de la fenêtre n'était pas transmise au script correctement.

Il arrive parfois qu'en lançant une animation, on voit la précédente pendant le chargement.

(14) Ne propose pas de télécharger le flv mais présente une erreur

(15) Les boutons du player WMV apparaissent en haut avant de reprendre leurs places.

c - Safari 3.1.1

(14) Le contenu "hexa" du flv est présenté dans la frame.

(15) Pas d'autostart sur le WMV.

d - Firefox 2.0.0.14

Les overflow:auto des balises <pre></pre> font que les ascenseurs restent visibles (ne sont pas assombris).

(13) Légère dégradation de l'animation au lancement, peut être due à l'ascenseur juste en dessous.

(15) Pas d'autostart, les boutons du player apparaissent en haut avant de reprendre leurs places en bas.

(15)(16)(17) Manque une zone grise sur le côté droit des player.

(33) La lecture du MPG provoque l'apparition d'artefacts colorés en dessous (sur la page web qui a été assombrie).

  • Conclusions ?

Je pense faire une mise à jour de ce tableau récapitulatif dès que j'aurais un peu plus de tests et en particulier un sous Linux et l'autre avec Internet Explorer 8 ou en fonction des retours d'utilisateurs...

Une zone blanche est "Configuration non testée", une zone verte pour "Tout est Ok", une zone jaune pour "Légère dégradation acceptable", une zone rouge pour "Ne fonctionne pas correctement ou pas du tout". J'ai encadré de bleu la zone systématique à problème qui concerne les MOV, MPEG et WMV aussi bien avec ClearBox (15,16,17) qu'avec ShadowBox (31,32,32).

Tableau récapitulatif des tests effectués

Shadowbox et Clearbox sont donc les deux qui me conviennent le mieux : Plus léger que Lightbox, compatible Lighbox, plus complet que Lightbox.

Le slideshow de la ClearBox me botte grave. C'est probablement uniquement pour lui que j'ai intégré le script. Faire des liens qui s'ouvrent sur des domaines externes rien qu'au survol, c'est sympa aussi. Pour tout le reste (et surtout pour l'affichage de flash et dérivés), ShadowBox est pas mal du tout. Evitons d'intégrer des vidéos WMV et MPG, le rendu est vraiment trop variable. Attention avec les MOV aussi. Opera a encore du mal avec les effets de type LightBox. Internet Explorer 5 sous Windows 2000 est "tout rouge" mais c'est normal, il n'est pas prévu pour, le test était là surtout pour montrer qu'en restant avec un vieil OS (W2000) mais avec un navigateur récent et soucieux des standards (Firefox), on pouvait obtenir quelque chose de tout à fait acceptable.

  • Comment installer ShadowBox et ClearBox (DotClear 1&2, WordPress) ?

- Pour la ClearBox, les modifications que j'ai effectuées sont principalement de la traduction de Hongrois (que nous parlons tous depuis le berceau, n'est-ce pas ?), les chemins des images et la suppression de l'url du fichier "ClearBoxé". En effet, lorsque l'url est assez longue, la box était bien centrée mais l'url provoquait un agrandissement sur la droite inesthétique :

Aspect d'une ClearBox avec une url longue

Si vous souhaitez retrouver ce texte, dans le fichier clearbox.css, cherchez :


CB_Text {
text-align: center;
display:none;
}

et supprimez la ligne avec "display:none;"

J'ai aussi modifié les images : Bouton précédent d'origine et Bouton suivant d'origine originales en Bouton précédent modifié et Bouton suivant modifié, plus parlant, non ?

- Pour la ShadowBox, les modifications que j'ai effectuées sont principalement les chemins des images.

Je vous propose donc un pack sous forme de fichier archive au format zip. Après téléchargement, dézippez le, uploadez à la racine de votre blog le dossier "clearshadow".

Si vous ne positionnez pas ce dossier à la racine ou que vous changez son nom, il vous faudra changer les chemins des fichiers .js et .css en recherchant les occurrences de /clearshadow/ dans les codes qui suivent en partie A et dans les fichiers : clearbox.css, clearbox.js et shadowbox.js.

Les morceaux de code à rajouter sont :

Partie A, après la balise <head> et avant la balise </head> de votre thème, rajoutez ceci :

Pour un fonctionnement avec jQuery (conseillé) :

(Les 4 premières lignes sont pour la ShadowBox, les 2 dernières pour la ClearBox)


<link rel="stylesheet" type="text/css" href="/clearshadow/shadow/shadowbox.css" />
<script type="text/javascript" src="/clearshadow/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox-jquery.js"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox.js"></script>
<link type="text/css" rel="stylesheet" href="/clearshadow/clear/clearbox.css" />
<script src="/clearshadow/clear/clearbox.js" type="text/javascript"></script>

Pour un fonctionnement avec le Protoculous effect packer gzippé (à vous de vérifier la compatibilité de votre hébergement) :


<link rel="stylesheet" type="text/css" href="/clearshadow/shadow/shadowbox.css" />
<script type="text/javascript" src="/clearshadow/protoculous.js.gz"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox-prototype.js"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox.js"></script>
<link type="text/css" rel="stylesheet" href="/clearshadow/clear/clearbox.css" />
<script src="/clearshadow/clear/clearbox.js" type="text/javascript"></script>

Pour un fonctionnement avec Mootools, Yahoo! User Interface Library, Ext ou Dojo Toolkit, consultez le site de l'auteur pour obtenir les fichiers "adapters".

Partie B, ensuite, juste après la balise <body>, rajoutez sur la ligne suivante :

(Pour la ShadowBox)

<script type="text/javascript">window.onload = Shadowbox.init;</script>

Pour DotClear 1, partie A et B se font dans le fichier template.php

Pour DotClear 2, j'ai mis la partie A dans _head.html et la partie B dans _top.html mais attention, les thèmes DotClear 2 peuvent déjà avoir jQuery d'inséré donc vérifiez. Si dans le thème au niveau du _head.html, vous trouvez un code du genre :

<script type="text/javascript" src="tpl:BlogThemeURL/../default/js/jquery.js"></script>

alors il ne faut pas insérer dans le partie A, cette portion de code :

<script type="text/javascript" src="/clearshadow/jquery-1.2.3.pack.js"></script>

Il faut, par contre, laisser cette portion de code :

<script type="text/javascript" src="/clearshadow/shadow/shadowbox-jquery.js"></script>

Pour WordPress, partie A et B sont à mettre dans header.php mais en faisant attention car votre thème utilise peut être déjà jQuery ou Prototype/Scriptaculous. Il faut donc choisir l'adapter en fonction de votre thème et supprimer dans le code que je vous donne la librairie déjà incluse par votre thème.

Il existe aussi deux plugins ShadowBox pour WordPress : Shadowbox JS et Shadowbox mais rien pour ClearBox.

Et voilà ! Si vous aviez précédemment installé une lightbox, il faut bien évidemment supprimer le code qui la concernait.

  • Remplacement du plugin pour DotClear 1

Pour ceux ayant installé le plugin LightBox JS 2.0 d'Alconis sous DotClear 1, il faut supprimer ces lignes comprises entre <head> et <head> :


<link rel="stylesheet" href="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/js/lightbox.js"></script>

mais pas besoin d'enlever le plugin

Si vous utilisiez les balises rel="lightbox", pas besoin d'y toucher, Shadowbox les reconnait.

Toujours pour ceux ayant installé le plugin LightBox JS 2.0 d'Alconis sous DotClear 1, vous aviez peut-être patché le fichier class.wikixhtml.basic.php afin d'insérer les ligthbox en wiki. Je vous propose alors de le patcher à nouveau, pour DotClear 1.2.1 à 1.2.8, remplacez votre fichier par celui-çi (une fois décompacté, bien entendu, pour remplacer celui dans /inc/classes/ que vous aurez au préalable sauvegardé - A vos risques et périls).

Comme avant, vous pourrez obtenir l'effet lightbox avec cette syntaxe wiki : [lien|url||titre||LIGHT] ou un album avec [lien|url||titre||album].

Pour le paramétrage des ShadowBox et ClearBox, il suffit de rajouter le contenu du "rel" comme celà (en wiki) : [lien|url||titre|||rel] avec rel=clearbox ou rel=shadowbox, exemple : [lien|url||titre|||shadowbox; width=320; height=240;] rajoutera un effet shadowbox avec une taille de 320 par 240.

Et comme moyen mnémotechnique, j'utilise "1-2-3" : il y a 1 signe "|" entre le lien et l'url, 2 signes "|" entre l'url et le titre et enfin 3 signes "|" entre le titre et le paramètre "rel".

Plugin Gallery : Sous DotClear 1, j'avais modifié le fichier /share/gallery/themes/default/galleryGal.php en transformant cette ligne :


<a href="<?php dcGallery::imageURL(); ?>#gallery" title="<?php dcGallery::imageName(); ?>">

en :


<a href="<?php echo $galleryImage->getImageURL(); ?>" rel="lightbox[<?php dcGallery::galTitle(); ?>]" title="<?php dcGallery::imageName(); ?>">

afin d'obtenir l'effet lightbox sur mes galeries. Si j'avais conservé cela, c'est l'effet ShadowBox qui aurait été pris en compte. Comme j'adore le slideshow ClearBox, j'ai remplacé par :


<a href="<?php echo $galleryImage->getImageURL(); ?>" rel="clearbox[<?php dcGallery::galTitle(); ?>,6,start]" title="<?php dcGallery::imageName(); ?>">

et j'obtiens un slideshow qui démarre automatiquement au clic d'une image avec un timer de 6 secondes entre chaque image.

ClearBox et ShadowBox s'utilisent avec le paramètre rel="..." à indiquer dans le lien (href). En regardant le code source de la page de test "http://1loup.net/testclear.html", vous avez pas mal d'exemples à suivre.

Ce n'est pas un plugin, c'est donc à vous de rajouter des morceaux de code dans vos billets. Je ne trouve pas cela intéressant d'insérer systématiquement une shadowbox ou clearbox à chaque insertion d'image à partir des gestionnaires de média comme le font certains plugins. Ce n'est pas franchement pertinent, surtout sur les images de tailles moyennes. Je trouve que c'est plutôt à conserver pour les grandes images ou les galeries, les vidéos... Du coup cela nécessite de mettre un chouilla les doigts dans le code. Personnellement, j'utilise le wiki de DotClear 1, cela ne pose donc pas de problème. Sous DotClear 2, le wiki doit être "patchable" de la même façon mais je n'ai pas encore testé. Il suffit de regarder la fonction "__parseLink" dans le fichier que je fourni, elle comporte deux rajouts qui ne sont pas indentés comme le reste du code et sont entourés de commentaires. Sous WordPress, après avoir inséré votre image, il suffit de passer en mode HTML (ou code) et de rajouter le "rel" au niveau du lien :

Remplacer <a href="... par <a rel="shadowbox" href="... par exemple, au niveau du code de votre image.

  • Utilisation de ClearBox :

- Pour une image, un rel="clearbox" suffira

- Pour une galerie, un rel="clearbox[nomdelagalerie]"

- Pour un slideshow, un rel="clearbox[nomdelagalerie,nombredesecondesentre2images,start]"

- Pour une image non réduite à la taille de l'écran, un rel="clearbox(width,height,click)" (avec width et height les largeur et hauteur de l'image) et en remplaçant click par over, l'ouverture de la clearbox se fera au survol de la souris au lieu du click.

- Pour une animation flash (swf, youtube, dailymotion...) ou la page d'un site web, un rel="clearbox(width,height,click)" aussi.

Je crois que vous ne trouverez pas beaucoup plus d'information sur la page de l'auteur car elle est écrite en Hongrois mais si vous êtes à l'aise avec cette langue et que vous trouvez des infos que j'ai passé sous silence, je vous serais reconnaissant de m'en faire part.

  • Utilisation de ShadowBox :

- Pour une image, un rel="shadowbox" ou rel="lightbox" suffira

- Pour une galerie, un rel="shadowbox[nomdelagalerie]" ou rel="lightbox[nomdelagalerie]"

- Pour une image non réduite à la taille de l'écran, un rel="shadowbox;options={handleLgImages:'drag'}"

- Pour une animation flash (swf, youtube, dailymotion...) ou la page d'un site web, un rel="shadowbox; width=largeur; height=hauteur;" en remplaçant largeur et hauteur par leur valeurs respectives

Vous trouverez, bien entendu, plus de paramétrage et d'options sur la page de l'auteur (en anglais).

  • Et vous...

Vous avez eu bien du courage d'arriver jusqu'ici :ange:

Mais, vous, qu'en pensez-vous ?

Connaissez-vous des scripts de ce genre que je n'ai pas testé ?

Si vous voulez un coup de main pour l'installation et/ou l'utilisation, n'hésitez pas à demander de l'aide dans les commentaires. J'ai écris tellement de trucs et je suis quand même assez geek que je peux trouver cela facile alors que cela peut vous sembler "nébuleux" !

Je préfère ClearBox et ShadowBox, j'ai essayé de vous expliquer pourquoi mais c'est aussi une histoire de goûts et de couleurs, hein... Je ne vais pas me facher si vous trouvez cela immonde et que vous préférez les solutions que j'ai rejeté :pasbien:

Voilà comment un geek fait une incursion dans les Lightbox-like :hysterique:

Rappels des pièces jointes : Le pack ClearBox-ShadowBox et le fichier class.wikixhtml.basic.php pour DotClear 1.

samedi 19 avril 2008

J'adooooooooore...

... ce Rolly de Sony, vidéo découverte chez Edonis :

pas vous ?

jeudi 17 avril 2008

Non, je ne suis pas mort, je suis juste occupé...

entre autre par un négrier :evil: mais comme je l'aime bien et que je vous prépare autre chose...

Dans un premier temps, attendez que la page soit entièrement chargée, hein... (sinon, l'effet voulu ne va pas fonctionner. Et l'effet n'est pas visible en lecture par les flux RSS / Atom non plus, uniquement sur le blog !)

pour vous faire patienter, et vous faire sourire aussi, je vous propose de cliquer sur un lien démontrant qu'il n'y a pas que les chiens qui sont cons, les chats sont pas mal non plus :hysterique:

et perso, j'aime autant les chiens que les chats :ange:

dimanche 3 février 2008

PlayVidZik 0.7.1 - Plugin pour DotClear 1.2 - Insertion de Vidéos et Playlists musicales

Voici donc enfin mon plugin d'insertion de Vidéos et Playlists musicales : PlayVidZik

Il permet d'insérer directement dans l'interface de saisie des billets de DotClear 1.2 des vidéos YouTube, DailyMotion, Google, Stage6, Koreus mais aussi les playlists Deezer et Imeem ainsi que les singles (monotitres) Deezer et Imeem.

Mon but était d'obtenir un code valide XHTML rapidement. Vous l'obtenez maintenant grâce à quelques invites Javascript. Les codes sont normalement compatible tout systèmes (Windows, Mac OS X, Linux) et multi-navigateurs (Firefox, Internet Explorer, Safari, Opera).

Plugin PlayVidZik Commencez par installer le plugin soit avec l'installeur soit avec l'archive. Voir dans les commentaires la version 0.7.5 plus récente

Cette étape passé, il reste une installation manuelle à effectuer : Installation des icônes par clic sur un lien, puis modification du fichier toolbar.js et d'un autre fichier (cela dépends si votre DotClear est 1.2.6 et inférieur ou 1.2.7 et supérieur).

A moins que vous ne préfériez l'installation automatique !

Ensuite, vous aurez deux icônes supplémentaires lors de la rédaction de vos billets.

Bouton d'insertion video La première pour les vidéos. Il suffit de rentrer l'url de la page de la vidéo et si vous ne désirez pas de paramètres supplémentaire de faire Enter sur la question suivante. Lors de l'insertion de vidéos Stage6, il vous sera demandé les tailles (largeur et hauteur) car elles ne sont pas standardisées.

Les paramètres supplémentaires permettent de choisir :

  • le positionnement (droite, gauche, centrée, ou même par CSS)
  • le texte alternatif
  • l'origine des vidéos DailyMotion
  • la présence d'une bordure, l'inclusion de vidéo similaires, les couleurs du player des videos YouTube


Bouton d'insertion audio La seconde pour les playlists musicales. Il suffit de rentrer le code embed fourni par Deezer ou Imeem puis de répondre à deux questions (Positionnement et Couleurs).

Si après coup vous souhaitez changer les tailles par défaut, vous les trouverez en début de code au niveau des width et height - Le texte alternatif est lui compris entre un <p> et un </p> et se repère donc aussi facilement.

Toutes ces étapes sont décrites dans le plugin : L'installation sur la page d'accueil, le mode d'emploi en cliquant sur les points d'interrogations dans des cercles à côté des mots clefs.

Voici la page d'accueil du plugin et le mode d'emploi (aide) :

Si vous avez des questions ou si vous trouvez un bug, les commentaires sont fait pour cela...

- page 1 de 2