13'sportif

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

Mot-clé - Lightbox

Fil des billets - Fil des commentaires

mar. 10

Plugin Lightbox pour Dotclear

Le plugin LightBox officiel est disponible pour DC2-RC1 !

J'ai appris il y a peu qu'un plugin LightBox officiel avait été ajouté au SVN de DC2 par Olivier.
Celui-ci est très malin !
Et pour l'utilisateur c'est surtout super simple et efficace avec zéro prise de tête :-)
En plus ça carbure au jQuery !

Du coup, j'ai fait une version compatible DC2-beta7 en attendant la version stable.

Dans ce plugin l'utilisateur à le choix avez le choix entre 2 plugins jQuery correspondants chacun à des types d'effet différent :

LightBox

Le plugin jQuery LightBox déjà utilisé dans la version officiel et dans dcjQueryLightBox.

Facebox

Le plugin jQuery Facebox, dont l'effet est plus sobre, mais il dispose d'un slideshow permettant de faire défiler automatiquement les images d'un album.

Installation pour DotClear-2beta7

Démonstration

  • En mode album photo : Cliquer sur l'une des miniatures

Bete Foret Lac

Plus d'info sur le plugin officiel de DC2 sur ce fil du forum de Dotclear.

déc. 6

Nouvelle version du plugin dcjQueryLightBox

Une nouvelle version de plugin est disponible !

Voici une nouvelle version du plugin dcjQueryLightBox qui utilise une autre déclinaison de LightBox pour jQuery. La version 0.4 de ce script semble bien plus dans l'esprit des plugins jQuery en étant mieux codé et bien plus paramétrable que le script qui était utilisé jusqu'à maintenant.

Custumisation

Avec cette nouvelle version, il est maintenant possible de custumiser le plugin en modifiant les options suivantes à la fin du fichier jquery.lightbox-0.4.min.js.
L'emplacement du fichier dépend de la version de Dotclear :

  • Dans /share/dcjQueryLightBox/js/ pour la Dotclear1.
  • Dans /plugins/dcjQueryLightBox/js/ pour la Dotclear2.
var lbOpt = {
  //overlayBgColor: '#000',
  //overlayOpacity: 0.8,
  //imageLoading: 'http://www.ajaxload.info/images/exemples/25.gif',
  //imageBtnClose: 'http://example.com/images/close.gif',
  //imageBtnPrev: 'http://example.com/images/prev.gif',
  //imageBtnNext: 'http://example.com/images/next.gif',
  //containerResizeSpeed: 400,
  txtOf: 'sur'
};

Installation pour DotClear-1.2.7

Pour utiliser le plugin sous 1.2.6 et précédent, il faut commenter ou supprimer la ligne 52 du fichier "index.php" :
dcNonce::form().

Installation pour DotClear-2beta7

Démonstration

  • En mode album photo : Cliquer sur l'une des miniatures

Bete Foret Lac

J'ai aussi fait une version pour la svn de DotClear2, à tester donc :

Notes

[1] Risque de ne pas fonctionner si votre hébergeur est en PHP5

sept. 30

Plugin dcjQueryLightBox pour DotClear

Une nouvelle version de plugin est disponible !


Après Slimbox, voici dcjQueryLightBox un nouveau clone de Lightbox JS pour DotClear qui utilise la librairie jQuery alors que slimbox utilise mootools ;-)

Pourquoi dcjQueryLightBox ?

jQueryLightBox est un clone compact de Lightbox JS utilisant la librairie jQuery.

jQueryLightBox est 100% compatible avec Lightbox2 et permet d'obtenir la même type d'effet visuel. Je le trouve même plus joli. Par contre, la page se charge plus rapidement. Parce qu'au lieu d'avoir 103 Ko de Javascript (4 fichiers) à télécharger, il n'y a que 39 Ko avec jQueryLightBox (2 fichiers js) !

Comme jQuery est déjà utilisé dans DotClear, ce plugin est donc sans doute plus adapté que ceux qui utilisent d'autres librairies javascript, et à fortiori si jQuery est déjà utilisé dans le thème : on évite aussi de multiplier les librairies et les risques conflit entre elles.

Le plugin peut s'utiliser en mode wiki et est non intrusif.

Installation pour DotClear-1.2.7

Pour utiliser le plugin sous 1.2.6 et précédent, il faut commenter ou supprimer la ligne 52 du fichier "index.php" :
dcNonce::form().

Installation pour DotClear-2beta7

Démonstration

  • En mode album photo : Cliquer sur l'une des miniatures

Bete Foret Lac

J'ai aussi fait une version pour la svn de DotClear2, à tester donc :

sept. 21

Plugin Slimbox pour DotClear2

Après la version pour DotClear 1.2.x, voici la version pour DotClear2 ;-)

Slimbox est un clone ultra compact (utilisant le framework mootools) du populaire script de visualisation d'images Lightbox JS 2.0.

Plugin Slimbox pour DotClear

Pourquoi Slimbox ?

Slimbox est 100% compatible avec Lightbox2 et permet d'obtenir la même visualisation animée des images. Donc visuellement, il n'y a pas de différence entre Lightbox et Slimbox. Par contre, la page se charge beaucoup plus rapidement. Parce qu'au lieu d'avoir 103 Ko de Javascript (4 fichiers) à télécharger, il n'y a que 27 Ko avec Slimbox (2 fichiers js) !

Le plugin peut s'utiliser en mode wiki et est non intrusif.

Installation pour DotClear-2beta7

Démonstration

  • Mon thème n'utilise plus le plugin Slimbox mais dcjQueryLightBox, et l'effet n'est pas tout à fait le même, donc la démo ci-dessous est obsolète...

Fleur Fleur

août 9

Plugin Slimbox pour DotClear 1.2.x

Voici la version pour DotClear 1.2.x, mais ce plugin est aussi disponible pour DotClear 2

Slimbox est un clone ultra compact (utilisant le framework mootools) du populaire script de visualisation d'images Lightbox JS 2.0.

Plugin Slimbox pour DotClear

Pourquoi Slimbox ?

Slimbox est 100% compatible avec Lightbox2 et permet d'obtenir la même visualisation animée des images. Donc visuellement, il n'y a pas de différence entre Lightbox et Slimbox. Par contre, la page se charge beaucoup plus rapidement. Parce qu'au lieu d'avoir 103 Ko de Javascript (4 fichiers) à télécharger, il n'y a que 27 Ko avec Slimbox (2 fichiers js) !

Tout comme le plugin Lightbox JS pour DotClear, il peut s'utiliser en mode wiki (en remplacement un fichier du core) et est totalement non intrusif.

Installation pour DotClear-1.2.7

Installation pour DotClear-1.2.6 et les versions précédentes

Utilisation

  • La démarche d'installation est explicitée dans la partie administrative du plugin. Elle consiste en un seul petit copier-coller dans le fichier template de votre thème.
  • La démarche d'utilisation est elle aussi expliquée dans cette même partie. Utilisable pour toutes les images de votre blog et pas seulement celles de vos billets. L'intégration avec la syntaxe wiki permet en plus de l'utiliser sans connaître une once d'XHTML.

Démonstration

  • Mon thème n'utilise plus le plugin Slimbox mais dcjQueryLightBox, et l'effet n'est pas tout à fait le même, donc la démo ci-dessous est obsolète...

Herbes vivaces Citrouilles Craquelures

Les images proviennent de Flickr’s Desktop Wallpaper Pool.

Historique des versions du plugin

  • 0.2 (21/08/2007) :
    • Mise en place du contrôle de sécurité introduit dans la version 1.2.7 de Dotclear.
  • 0.1 (18/08/2007) :
    • Création d'un bouton "Copier" au moment de l'installation permettant de copier les fichiers nécessaires (js, css et images) dans un dossier share de DotClear.
    • Localisation du plugin (EN et FR).