[Plugin] ColorBox - Zoom sur vos photos et diaporama

bazooka07bazooka07 PluXml Lead Developer, Moderator
janvier 2016 modifié dans Plugins
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/...
«1

Réponses

  • StéphaneStéphane Member, Former PluXml Project Manager
    Bonjour

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

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • JosJos Member
    En effet, merci pour le partage.
  • DudyDudy Member
    mars 2014 modifié
    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
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @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.
  • DudyDudy Member
    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
  • DudyDudy Member
    C est ok je chargé 2 fois la libraire JavaScript
  • DudyDudy Member
    avril 2014 modifié
    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
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @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.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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/..."
  • DanDan Member
    mars 2014 modifié
    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éphaneStéphane Member, Former PluXml Project Manager
    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

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    mars 2014 modifié
    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.
  • DudyDudy Member
    merci bazooka je vais essayer ça ce soir et je donnerai le verdict :D
  • DudyDudy Member
    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
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @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.
  • DudyDudy Member
    @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
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @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.
  • DudyDudy Member
    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
  • DudyDudy Member
    [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?
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @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
  • DudyDudy Member
    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+
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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.
  • DudyDudy Member
    @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
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    avril 2014 modifié
    @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.
  • DudyDudy Member
    @bazooka
    tu est trop fort :)
    je savais que j'allais suscité ta curiosité :D
    ça marche super bien maintenant aussi avec iphone et sony xperia
    merci
  • 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.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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++
  • Merci pour le partage. Je connaissais pas colorbox. :8

    a+
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    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/
Connectez-vous ou Inscrivez-vous pour répondre.