PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 12/03/2014 15:43:42

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

[Plugin] ColorBox - Zoom sur vos photos et diaporama

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/...

Dernière modification par bazooka07 (07/01/2016 00:39:05)

Hors ligne

#2 12/03/2014 16:07:40

Stéphane
Consultant PluXml
Lieu : pas loin de Toulouse
Inscription : 07/08/2007
Messages : 6 290
Site Web

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

Bonjour

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


Ancien responsable de PluXml  cool

Hors ligne

#3 14/03/2014 12:01:20

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

En effet, merci pour le partage.

Hors ligne

#4 27/03/2014 15:41:05

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 361

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

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

Dernière modification par Dudy (27/03/2014 15:44:45)

Hors ligne

#5 27/03/2014 18:19:36

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

@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.

Hors ligne

#6 27/03/2014 18:36:48

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 361

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

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

Hors ligne

#7 27/03/2014 19:48:12

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 361

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

C est ok je chargé 2 fois la libraire JavaScript

Hors ligne

#8 27/03/2014 20:53:16

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 361

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

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

Dernière modification par Dudy (06/04/2014 08:39:50)

Hors ligne

#9 28/03/2014 01:24:57

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

@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.

Hors ligne

#10 28/03/2014 01:54:52

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

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/..."

Hors ligne

#11 28/03/2014 08:54:31

Dan
Membre
Inscription : 18/07/2008
Messages : 108

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

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 ! smile

Dernière modification par Dan (28/03/2014 08:55:02)

Hors ligne

#12 28/03/2014 09:29:26

Stéphane
Consultant PluXml
Lieu : pas loin de Toulouse
Inscription : 07/08/2007
Messages : 6 290
Site Web

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

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


Ancien responsable de PluXml  cool

Hors ligne

#13 28/03/2014 12:36:17

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

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.

Si vous utilisez le plugin tinyMCE, vous risquez de rencontrer le même souci 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.

Dernière modification par bazooka07 (28/03/2014 12:44:12)

Hors ligne

#14 28/03/2014 13:46:53

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 361

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

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

Hors ligne

#15 02/04/2014 06:37:38

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 361

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

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

Hors ligne

#16 02/04/2014 09:32:37

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

@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.

Hors ligne

#17 02/04/2014 18:49:40

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 361

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

@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

Hors ligne

#18 03/04/2014 01:58:31

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

@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.

Hors ligne

#19 03/04/2014 07:06:48

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 361

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

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

Hors ligne

#20 03/04/2014 07:38:37

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 361

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

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é?

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?

Hors ligne

#21 03/04/2014 10:11:13

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

@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- … ments.html

Hors ligne

#22 03/04/2014 11:12:23

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 361

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

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+

Hors ligne

#23 03/04/2014 14:17:09

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

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.

Hors ligne

#24 04/04/2014 12:05:47

Dudy
Membre
Lieu : Neuchâtel - Suisse
Inscription : 20/01/2007
Messages : 361

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

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

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/1218 … responsive
bonne journée

Hors ligne

#25 05/04/2014 17:17:29

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 182
Site Web

Re : [Plugin] ColorBox - Zoom sur vos photos et diaporama

@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- … ments.html
Cliquez sur une photo pour démarrer le slide show.

Dernière modification par bazooka07 (05/04/2014 17:18:19)

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2018 PluXml.org, tous droits réservés