[Plugin] ColorBox - Zoom sur vos photos et diaporama

bazooka07 · mars 2014

Dans la grande lignée qui a fait suite à la célèbre bibliothèque Lightbox, permettant de faire un zoom ou de faire défiler vos images/photos sur les pages Web, il existe le célèbre Colorbox.
Colorbox a quelques avantage : il est léger avec ses 10Kb de code et fait du téléchargement de photos en temps caché, ce qui donne un effet surgissant impressionnant.

Ce plugin amène un petit plus.
Quand vous uploadez une photo ou image sur votre site, Pluxml peut créer une miniature de celle-ci. Pour une photo monimage.jpg, la miniature s'appellera monimage.tb.jpg.
Quand l'utilisateur clique sur une balise <img src="monimage.tb.jpg" />, le plugin essaiera d'afficher dans un popup l'image monimage.jpg.
Ce principe est valable aussi pour les extensions .png et .gif. Et cela marche aussi pour une galerie de photos.
Ainsi il est inutile de mettre dans la page HTML un groupe de balises tel que <a href="monimage.jpg" rel="lightbox"><img src="monimage.tb.jpg" /></a> comme on le fait habituellement.

Télécharger le plugin

Voir l'entrepôt de plugins

06/01/16 version 1.35 les images s'affichent en plein écran sur une tablette. Plus quelques retouches cosmétiques dans les thèmes. Optimisation de code.

02/01/16 version 1.30 quelques corrections mineures + possibilité de créer facilement une galerie de photos à partir de son serveur ou de Flickr

08/10/15 version 1.21 Gestion de plusieurs galeries sur une page amélioration code javascript

05/10/2015version 1.2 Mise à jour pour Pluxml 5.4 et ColorBox 1.6.3 - Prise en compte des miniatures dans les flux RSS

05/04/2014 Correction de bugs (options mal prises en compte dans le panneau de config). Mise à jour de la bibliothèque colorbox.min.js.
Ajout d'une option activée par défault pour activer le responsive design (cas des tablettes)
Testé sur Android 4.2, iphone et sony xperia
28/03/14: Ajout d'un hack pour télécharger jQuery sans souci avec une URL type src="//ajax.googleapis.com/...

Stéphane · mars 2014

Bonjour

Intéressant s'il n'est plus nécessaire de spécifier rel="lightbox".
A tester.
Merci pour le partage

Jos · mars 2014

En effet, merci pour le partage.

Dudy · mars 2014

Bonjour merci pour le plugin
mais chez moi ça ne marche pas, il faut juste l'activer et configurer ou il faut faire quelque chose d'autre?
procédure effectué :
j'ai activer le plugin
j'ai envoyer la photo dans media
j'ai créer l'article en utilisant la miniature .tb
j'ai envoyer mon article
il y a la photo mais sans lien
merci pour votre aide

bazooka07 · mars 2014

@Dudy,

Il faut aller sur le panneau de config, et validez en cliquant sur le bouton "envoyez" même si tu ne changes rien.

Envoie moi le lien avec la page incriminée si le problème persiste.

Dudy · mars 2014

bazooka07 a écrit:

@Dudy,

Il faut aller sur le panneau de config, et validez en cliquant sur le bouton "envoyez" même si tu ne changes rien.

Envoie moi le lien avec la page incriminée si le problème persiste.

merci pour ta réponse
oui c'est la première chose faite après l activation du plugin, par contre le plugin charge bien dans la page (code html)

Stp je peu t'envoyer privé le lien je ne peu pas le rendre public pour le moment, merci pour ta compréhension

Dudy · mars 2014

C est ok je chargé 2 fois la libraire JavaScript

Dudy · mars 2014

après quelques essaie je corrige c est n'est pas le javascript mais le bug se créer en activant le plugin MybetterUrls (configuration avance-->Activer la réécriture d'urls )

voir ici (lien pas à jour)
j 'ai fait une nouvelle install juste avec les plugins
Colorbox
MyBetterUrls

user : demo
pass : demo
merci

bazooka07 · mars 2014

@Dudy,

J'ai vu le problème.
Ce n'est pas myBetterUrls qui est en cause mais PluXml.
ColorBox a besoin de jQuery.
Dans colorBox.php, j'ai précisé la source de script de jQuery en utilisant la technologie CDN chez Google comme ceci :

[== JavaScript ==]
document.write('<scr'+'ipt type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></scr'+'ipt>');

Quand la ré-écriture d'Urls est désactivée, il n'y a pas de souci.
Par contre, si la ré-ecriture est activée, Pluxml transforme le code ci-dessus en :

[== JavaScript ==]
document.write('<scr'+'ipt type="text/javascript" src="http://giannidicaprio.com/ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></scr'+'ipt>');

La racine de Pluxml sur ton site étant :

[== HTML ==]
http://giannidicaprio.com/pluxml/

Cette ré-écriture n'a pas lieu d'être. Pour moi, je pense à un bug de Pluxml mais il faut que j'étudie le code dans PluXml.
Si tu as Firefox, tu peux afficher le source de la page html générée en appuyant sur Ctrl-U pour les 2cas.

Provisoirement , tu peux remplacer la valeur de src dans colorBox.php pour utiliser le CDN chez Micro$oft comme ceci :

[== JavaScript ==]
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"

Cela empêchera Pluxml de faire la ré-écriture sur cette adresse.

J'étudierai le problème ce week-end.

bazooka07 · mars 2014

Bonjour,

Pour ceux qui ont un peu de temps et qui maitrisent PCRE :
Dans la page index.php à la racine du site, il y a un appel de fonction comme ceci:

[== PHP ==]
# On applique la réécriture d'url si nécessaire
if($plxMotor->aConf['urlrewriting']) {
	$output = plxUtils::rel2abs($plxMotor->aConf['racine'], $output);
}

Il faut étudier les masques de remplacement dans core/lib/class.plx.utils.php la fonction rel2abs à la ligne 608 qui ne prend pas en compte les adresses absolues type src="//googleapis.com/..."

Dan · mars 2014

Pour ma part, ce plugin ColorBox fonctionne très bien (je n'utilise pas la ré-écriture d'Urls)
Un grand merci, c'est très pratique et rapide à utiliser !

Stéphane · mars 2014

bazooka07 a écrit:

Il faut étudier les masques de remplacement dans core/lib/class.plx.utils.php la fonction rel2abs à la ligne 608 qui ne prend pas en compte les adresses absolues type src="//googleapis.com/..."

Effectivement une nouvelle évolution à prendre en compte: issue #65

Merci de l'avoir signaler

bazooka07 · mars 2014

Bonjour,

@tous,
Pour contourner le probléme, voici 3 solutions :
- télécharger la version 1.01 du plugin
- dans le dossier plugins/colorBox/colorBox.php, à la ligne 79, remplacer l'expression src=" par src'+'="
- Si vous n'avez pas de mettre la main dans le cambouis, dans core/lib/class.plx.utils.php, après la ligne // replace root-relative URLs vers la ligne 607, remplacer (href|src)=(["\']).? par (href|src)=(["\'])\.? - Attention de ne pas se tromper

Je vous préconise d'utiliser la solution n°2 qui est la plus rapide et la moins risquée.

[del]Si vous utilisez le plugin tinyMCE, vous risquez de rencontrer le même souci[/del] concernent les plugins utilisés pour la partie publique du site. Ceux pour le back-office ne sont par concernés.

@Dan,
Plusieurs plugins utilisent jQuery. Si un plugin a déjà téléchargé jQuery, colorBox ne le rechargera pas.
En général, les plugins utilisent une adresse absolue type http://ajax.googleapis.com, alors qu'une adresse type CDN sans le http est plus rapide en téléchargement. Dans le 1er cas, on impose un serveur, dans le 2ème cas on laisse aux routeurs le choix du serveur le plus proche du visiteur.

Dudy · mars 2014

merci bazooka je vais essayer ça ce soir et je donnerai le verdict

Dudy · avril 2014

bazooka07 a écrit:

Bonjour,

@tous,
Pour contourner le probléme, voici 3 solutions :
- télécharger la version 1.01 du plugin
- dans le dossier plugins/colorBox/colorBox.php, à la ligne 79, remplacer l'expression src=" par src'+'="
- Si vous n'avez pas de mettre la main dans le cambouis, dans core/lib/class.plx.utils.php, après la ligne // replace root-relative URLs vers la ligne 607, remplacer (href|src)=(["\']).? par (href|src)=(["\'])\.? - Attention de ne pas se tromper

Je vous préconise d'utiliser la solution n°2 qui est la plus rapide et la moins risquée.

Bonjour
j'ai suivi a la lettre le deux solutions, il y a rien qui change, ça ne marche pas avec les URLs activé,pour le moment j'utilise slimbox2. mais il faut tout ajouter à la main dans la balise rel=, c est long....
bonne journée

bazooka07 · avril 2014

@Dudy,

Sur ton site de test, tu as toujours l'ancienne version de Colorbox.
Il faut installer la dernière version 1.01 en date du 28/03/2014.
Voir le lien sur le 1er post.

Dudy · avril 2014

@bazooka
oui sur le site de test c'est bon, mais sur un autre avec des autres plugins activé ne marche pas,
je vais essayer de trouver le bug en désactivant tous les autres plugins,
je te tiens au courant, merci pour ton aide

bazooka07 · avril 2014

@Dudy,

Tu dois avoir un plugin qui télécharge jQuery sans s'occuper des autres. jQuery n'aime pas être téléchargé plusieurs fois.
Pour vérifier, laisse les plugins qui mettent le bazar, ouvre la page web dans ton navigateur et affiche le source de la page (taper Ctrl-U au clavier pour Firefox, et sûrement pour Chrome), puis chercher jquery après avoir taper Ctrl-F
Dans l'idéal, il faudrait utiliser une ligne comme ceci pour télécharger jquery :

[== javascript ==]
<script type="text/javascript">
  if (typeof jQuery === 'undefined')
     document.write('<scr'+'ipt type="text/javascript" src'+'="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></scr'+'ipt>');
</script>

@staff
Peut-être mettre le code ci-dessus sur le wiki pour utiliser correctement jQuery.

Dudy · avril 2014

Bonjour
@bazooka, oui j'ai bien cette ligne

[== JavaScript ==]
<script type="text/javascript">
		if (typeof jQuery === 'undefined') // src'+'=" is a hack for abusing PluXml in plxUtils::rel2abs function
			document.write('<scr'+'ipt type="text/javascript" src'+'="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></scr'+'ipt>');
	</script>
	<link href="http://alristorantino.ch/fr/plugins/colorBox/colorBox/styles/style1/colorbox.css" rel="stylesheet" type="text/css" media="screen" />
	<script type="text/javascript">
		<!--
		$(document).ready(function() {
			$("a[rel^='lightbox']").colorbox({
rel: 'lightbox*'});

			var thumbnails = "img[src$='\\.tb\\.jpg'], img[src$='\\.tb\\.png'], img[src$='\\.tb\\.gif'], img[src$='\\.tb\\.jpeg']";
			$(thumbnails).colorbox({
rel: 'lightbox*',
href: function() { return $(this).attr('src').replace(/\.tb(\.\w+)$/i,'$1'); },
title: function() { var t = $(this).attr('title'); return (t) ? t : $(this).attr('alt'); }
			});
			$(thumbnails).css('cursor', 'pointer');

		});
		// -->
	</script>
	<script type="text/javascript" src="http://alristorantino.ch/fr/plugins/colorBox/colorBox/jquery.colorbox-min.js"></script>
	<script type="text/javascript" src="http://alristorantino.ch/fr/plugins/colorBox/colorBox/i18n/jquery.colorbox-fr.js"></script>
	<script type="text/javascript" src="http://alristorantino.ch/fr/plugins/jquery/jquery.min.js"></script>

tu peux regarder ICI
j'ai désactivé le plugins slimbox 2 que j' utilise dans les photos
comme plugins activé j'ai :
MyBetterUrls - Version 1.2 (29/08/2013)
MyContact - Version 1.5.5 (13/12/2013)
MySocialButtons - Version 1.3 (13/11/2012)
MyMailComment - Version 1.2.1 (13/03/2013)
CKEditor - Version 1.5 (02/08/2013)
Colorbox - Version 1.01 (28/03/2014)
jQuery 1.4.4 - Version 1.7.1 (24/12/2011)

j'ai remarqué dans les informations de Puxml j'ai ce message :
Impossible de vérifier les mises à jour tant que 'allow_url_fopen' est désactivé sur ce système
est ça serait le problème ou rien avoir?
est ce que je dois envoyer un mail à l’hébergeur ou c'est moi qui doit l'activé?
merci bonne journée

Dudy · avril 2014

[ins]Impossible de vérifier les mises à jour tant que 'allow_url_fopen' est désactivé sur ce système
est ça serait le problème ou rien avoir?
est ce que je dois envoyer un mail à l’hébergeur ou c'est moi qui doit l'activé?[/ins]
je l'ai activé chez l’hébergeur,et j'ai toujours le même message, peut être que je dois attendre pour que le changement soi prise en compte?

bazooka07 · avril 2014

@Dudy,
Effectivement ColorBox ne démarre pas.
Tu peux désactiver, voir le supprimer quand tout sera ok, le dernier plugin jQuery 1.4.4.
C'est une vieille version et il vaudrait mieux qu'il soit au début.
ColorBox n'a pas besoin de lui
Mais ce qui m'inquiète plus, c'est ton théme.
Tu utilises BootStrap3 qui télécharge en dernier jQuery sans se poser de question.
Je trouve cela à la fin de la page web:

[== html ==]
<script src="http://alristorantino.ch/fr/themes/Bootstrap3/js/jquery.js"></script>

Regarde dans ton thème pour mettre cette ligne en commentaire et remplace là par le code que j'ai donné dans mon dernier post.

Peux tu me donner l'adresse où tu as téléchargé ce thème ?

allow_url_open empêche à ton site d'aller télécharger un fichier sur un autre site. C'est une mesure de sécurité contre le piratage.
Ton site ne peut pas vérifier qu'il utilise la dernière version de PluXml. Ce n'est pas gênant.

Sur la page de photos, essaie de générer les miniatures des photos avec PluXml pour respecter la convention de nommage de fichiers (maphoto.tb.jpg). Avec cet astuce, ColorBox zoome les photos sans avoir besoin de créer un lien '<a href="maphoto-big.jpg" rel="lightbox"><img src="maphoto.jpg" /></a>'. Il suffit simplement d'avoir '<img src="maphoto.tb.jpg" />' pour que cela marche.
Tu as un exemple ici :
http://www.echecs-annonay.fr/assiduite-soutenue-aux-entrainements.html

Dudy · avril 2014

Ciao
alors j'ai mis en commentaire la ligne que tu m'indique

[== JavaScript ==]
<script src="http://alristorantino.ch/fr/themes/Bootstrap3/js/jquery.js"></script>

et colorbox marche super bien, merci bazooka,
je crois que je vais passer un peu de temps pour nettoyé un peu ce code, j'ai fait tellement de changement...
oui pour la galerie photos c est ça que je vais faire, c'est juste une page temporaire,
pour le theme, à la base est celui là de Frederic
http://forum.pluxml.org/viewtopic.php?id=4208
avec beaucoup de changements
merci a+

bazooka07 · avril 2014

Je suis bien content pour toi.

Quand je vois le source de tes pages html, c'est clair qu'un nettoyage de printemps s'impose. ( balises p imbriquées entre autres )
Il y a des outils en ligne qui te listent toutes les erreurs.
Va sur ton moteur de recherche et fais "tidy html"

Je passerai l'info à celui qui a fait le thème dès que j'ai un moment.

Dudy · avril 2014

@bazooka
merci pour le lien, je vais faire un nettoyage de printemps comme tu le dit

je trouve juste dommage que ce Color box ne soit pas responsive, j'ai bien lu la faq sur le site, à part le désactivé avec le Mobile device il y a pas encore de solution
http://stackoverflow.com/questions/12182668/how-to-make-colorbox-responsive
bonne journée

bazooka07 · avril 2014

@Dudy,

Il y a un peu de cela dans le lien que tu cites. Mais il y a des erreurs et des manques.
Il faut régler maxWidth et maxHeight à 100% et choper l'événement rotationchange.

Pour faciliter les choses j'ai ajouté une option pour activer le responsive design. De plus, il y avait quelques bugs dans mon plugin (getParam renvoie une chaîne pour une valeur numérique entre autres).

Téléchargez la dernière version pour tester

J'ai fait un essai sur une tablette propulsée par Android 4.10 en format 1000x600px.
Voici un lien pour la démo :
http://www.echecs-annonay.fr/assiduite-soutenue-aux-entrainements.html
Cliquez sur une photo pour démarrer le slide show.

Dudy · avril 2014

@bazooka
tu est trop fort

je savais que j'allais suscité ta curiosité

ça marche super bien maintenant aussi avec iphone et sony xperia
merci

danielsan · mai 2014

merci bazooka pour ce plugin très pratique.

petite question vu que tu utilises jquery :
j'utilise jquery theme, comment faire en sorte que mon style "modal screen" soit appliqué ?

Merci.

bazooka07 · octobre 2015

Mise à jour du plugin avec Colorbox version 1.6.3 et Pluxml 5.4
Prise en compte des miniatures dans les flux RSS

Voir le lien de téléchargement en début du fil de discussion.
A++

je-evrard · octobre 2015

Merci pour le partage. Je connaissais pas colorbox. :8

a+

bazooka07 · janvier 2016

Bonjour,

Nouvelle version pour corriger quelques bugs mineurs.
Avec une nouveauté :
possibilité de créer simplement une galerie de photos stockées dans un dossier du serveur ou hébergées chez Flickr. Il suffit d'insérer dans l'article ou la page statique une simple ligne de code comme ceci :

[== PHP ==]
<div id="pl_gallery" data-src="dossier_des_photos"></div>

pour des photos stockées sur le serveur

[== PHP ==]
<div id="cb_gallery" data-tags="murspeints,lyon&id=32215553@N02"></div>

pour des photos hébergées chez Flickr. Plus d'options dans le fichier d'aide du plugin.

Meileurs voeux et bonne année à tous

bazooka07 · janvier 2016

Des exemples valent mieux qu'un long discours. Voici quelques liens pour satisfaire votre curiosité :
Galerie dans un article :http://jeveuxpartir.free.fr/pluxml/index.php?article59/demo-d-une-galerie-dans-un-article
Cliquer sur l'onglet "Galeries" donne accès à 5 galeries : http://jeveuxpartir.free.fr/pluxml/

[Plugin] ColorBox - Zoom sur vos photos et diaporama

Réponses