[Plugin] ColorBox - Zoom sur vos photos et diaporama

bazooka07

Bonjour,

Version 1.35
Une petite mise à jour pour afficher les photos en plein écran lorsque qu'on utilise une tablette.
Plus quelques retouches cosmétiques dans les thèmes

Comme d'hab. le lien est en début du fil de discussion

A++

Dudy

Bonjour Bazooka07
merci pour la mise à jour

j'ai ajouter ton script dans un article

[== HTML ==]
<div id="pl_gallery" data-src="data/medias/photo"></div>

mais j'ai juste un carré noir et pas de photo
j'ai aussi essayer avec le chemin absolu et relatif mais il n'y a pas de photo
ou je fais faut?
merci

Dudy

ops c'est bon j'ai trouvé excuse moi
super marche très bien
juste le nom du dossier_photo, pas de chemin

jmglz

@bazooka07 en suivant les instructions du post "plugin" COLORBOX que j'ai installé avec le thème MPHOTO de @cfdev , j'ai maintenant les posts de la page d'accueil qui ouvrent des photos en miniatures avec possibilité d'agrandir la photo à une taille normale, exemple :

http://www.gleizes.net/index.php?article158/aquarelles-acryliques-2015

c'est déjà mieux qu'avant, mais j'aurais préféré que les photos ouvrent sur une galerie, pour éviter de revenir en arrière pour visionner les autres miniatures. Est-ce possible ?

jmglz

@cfdev @bazooka07

après vérifications, sauf erreur de ma part, les "galeries" des plugin COLORBOX et ARTGALERIE ne fonctionnent pas avec le thème mphoto ?

(je n'ai pas rencontré de soucis en faisant des essais avec le thème par defaut)

bazooka07

@jmglz,

Il ne faut pas mettre de liens.
Quand le plugin colorBox rencontre la balise <img .... src=".....tb.jpg" alt="...." />, avec l'attribut src qui finit par tb.jpg, il considère que c'est une miniature et calcule le lien vers l'image en enlevant ".tb". Quand il trouve plusieurs vignettes, il considère qu'il s'agit d'une galerie.

[== PHP ==]
// <a href="data/medias/travaux/aquarelles-2015/rose11_2014-e1445942167199-480x640.jpg"><img src="data/medias/travaux/aquarelles-2015/rose11_2014-e1445942167199-480x640.tb.jpg" alt="" /></a>
// Pour faire une galerie avec une série de vignette, faire comme ceci :
<img src="data/medias/travaux/aquarelles-2015/rose11_2014-e1445942167199-480x640.tb.jpg" alt="" />

voir démo ici :
http://jeveuxpartir.free.fr/pluxml/index.php?article64/aquarelles-et-acryliques
L'édition de l'article dans Tinymce, en mode plein écran, ressemble à cela :


Sur une tablette, on affiche en plein écran automatiquement.

Il faut créer les vignettes avec la même hauteur. Pluxml n'est pas bien commode pour faire cela avec un lot de photos. A améliorer !

Tu peux mettre des photos plus hautes que l'écran, colorBox s'adaptera.
http://jeveuxpartir.free.fr/pluxml/index.php?static24/quebec
Tu reconnais les photos

jmglz

@bazooka,

Merci pour les explications. Le résultat de ton essai "galerie" est parfait, mais le serait-il avec le thème MPHOTO qui impose une vignette pour générer un lien en page d'accueil ?

J'ai lu et relu ton post et je pense comprendre les explications (notamment l'importance de revoir la taille des photos) mais je n'arrive toujours pas à faire fonctionner la galerie COLORBOX en modifiant les photos en miniatures et en changeant de thème pour éviter le lien du thème MPHOTO.

Les galeries fonctionnent avec ARTGALERIE, mais en utilisant un autre thème que MPHOTO.

Je vais donc continuer à chercher...Tu as aimé mes photos du Canada, moi j'ai aimé les tiennes de Valence

A+

jmglz

@bazooka

Je te confirme, le plugin COLORBOX ne fonctionne pas avec le thème MPHOTO (j'ai réussi le test avec le thème défaut). J'aimerais bien que @cfdev apporte cette amélioration à MPHOTO

bazooka07

@jmglz,

Quand je regarde le code source de la page qui est générée (en tapant Ctrl-U au clavier sous Firefox), je ne suis pas trop surpris.
La librairie de JQuery est chargée 3 fois :
[list=*]
[*]Par le plugin colorBox, à travers le CDN, en regardant si JQUERY n'est pas déjà installé[/*]
[*]Par un plugin nommé JQuery, qui déboule sans savoir si JQuery est déjà installé. et qui télécharge depuis ton serveur. En plus, on ne sait pas de quelle version il s'agit !! [/*]
[*]Tout en bas de la page. Apparemment par le créateur du thème[/*]
[/list]

Moi et d'autres ont répété à plusieurs reprises la façon de télécharger proprement la librairie JQuery :

[== HTML ==]
<script type="text/javascript"> <!-- tu mets le nom de ton plugin, là !  -->
   if (typeof jQuery === 'undefined')
     document.write('<scr'+'ipt type="text/javascript" src'+'="//code.jquery.com/jquery-1.11.3.min.js"></scr'+'ipt>');
</script>

Il y a des scripts un peu plus simple. Celui-là passe avec Plumxl 5.3 qui avait un bug sur la réécriture des urls. Au fil du temps, on adapte le numéro de version.

Cela dénote un certain manque de savoir de gens qui ne s'occupent pas des autres.
Eh oui, eux seuls utilisent Jquery :mad: :mad: :mad:

Tu peux déjà commencer à désactiver le plugin jQuery. Ensuite, dans footer.php du théme, tu remplaces la ligne qui charge JQuery par le bout de code HTML ci-dessus. Comme cela, si tu désactives colorBox, le thème continuera à tourner. Il semble qu'il utilise bootstrap et qu'il a besoin de Jquery.

Les 3 scripts javascript, tout à la fin, gagneraient à être regroupés. Je suis béat d'admiration devant la complexité du script img.js
Si Bootstrap n'est pas utilisé ou n'utilise pas jQuery, ces 3 scripts sont à revoir, l'utilisation de Jquery, qui est une bibliothèque assez lourde, ne se justifie pas. C'est un peu prendre un canon pour tuer une mouche.

A++

jmglz

@bazooka07

J'ai commencé à retirer le plugin Jquery pour voir, et n'ai constaté aucune modif dans le comportement du site (évidemment puisque tu m'as dit qu'il était activé de 3 façons différentes) Ok

Ensuite, dans footer.php du théme, tu remplaces la ligne qui charge JQuery par le bout de code HTML ci-dessus. Comme cela, si tu désactives colorBox, le thème continuera à tourner. Il semble qu'il utilise bootstrap et qu'il a besoin de Jquery.

J'ai ensuite retiré le plugin COLORBOX pour vérifier comment le thème MPHOTO allait se comporter et je n'ai pas constaté de changement dans la présentation, j'en conclus donc que le thème MPHOTO n'a pas besoin de bootstrap pour fonctionner (l'ajout du code dans footer.php me parait donc inutile)

Après avoir réactivé le plugin COLORBOX sans le plugin Jquery, je continue donc mes essais....

et en incluant ton code.... la galerie marche finalement, bravo

Le soucis venait bien du thème MPHOTO

bazooka07

Je suis content pour toi.

L'inspecteur de Firefox ou de Chrome rend bien service pour voir le code des pages HTML rendues par un thème ou des plugins

La taille de tes photos d'acrylique fait un peu rikiki par rapport aux photos du Québec

Si tu veux modifier le cadre des photos, n'hésite pas à me demander.

jmglz

@bazooka encore merci,

Je n'hésiterai pas à te demander de l'aide (notamment pour mieux utiliser mes photos Flickr avec Pluxml)

J'apprécie PluXml pour sa simplicité, après avoir fait des essais de plusieurs CMS (Nuke, Wordpress etc..) et j'aimerais qu'il reste toujours accessible à tous et pas seulement aux geeks (les novices ne souhaitent pas passer des heures avec les codes..).

Je souhaite que les modérateurs fassent toujours en sorte que les "ressources" (plugins, thèmes, templates..) proposées par les contributeurs soient utiles, efficaces et fonctionnelles (en indiquant notamment toujours la dernière mise à jour compatible avec la version correspondante de Pluxml).

Je ne suis pas geek, j'aime comprendre et la simplicité me paraît l'atout essentiel pour l'avenir de PluXml

jmglz

@bazooka Bonjour,

Oups j'ai un petit soucis avec certaines galeries, plugin ColorBox capricieux ?

Certaines ne marchent pas, exemple :

http://gleizes.net/index.php?article161/cubisme-2012

D'autres marchent, exemple :

http://gleizes.net/index.php?article160/toi-moi

j'ai modifié la taille des photos, du premier lien, sans succes ?

Quelle est le problème ?

Merci

bazooka07

@jmglz,

L'extension des images est JPG au lieu de jpg.
Le selecteur de JQuery est sensible à la casse d'après la doc
C'est ennuyeux !
Renomme les fichiers en jpg. Je verrai pour corriger ce problème
A++

bazooka07

Pense à recréer les miniatures

jmglz

@bazooka,

Merci J'ai compris, mais dans mes recherche du soucis, j'avais réduit la taille des photos...Maintenant je vais les ajuster à la bonne taille du thème MPHOTO qu'elle est à ton avis la taille idéale ?

Merci

bazooka07

Pour les photos : 100 x 750. Si l'écran est trop petit, colorbox s'adapte.
Pour les vignettes : 133 x 100 ou 250 x 188, pour conserver le même ratio.

A++

jmglz

@bazooka

Super, encore merci et bon week-end

jack31

Bonsoir,

A mon tour d'avoir quelques problèmes.

Ma galerie apparaît mais un clic sur les photos ne donne rien. Pas comme chez Bazooka07.

Voir ici...
http://orgues-barbarie-toulouse.org/tips.html

Pluxml 5.5
Thème Défaut

bazooka07

Bonjour,

Le plugin Owlslider insère du code dans la page html pour charger la bibliothèque "http://code.jquery.com/jquery-2.1.3.min.js".
D'après le source sur github (fichier owlslider.php ligne 85), il y a une option dans son panneau de config pour désactiver le chargement de cette bibliothèque.
Sinon désactive ce plugin pour que cela marche.

A++

jack31

Merci Bazooka, ça marche.

Je me doutais bien qu'il y avait bataille entre plugins. Lol !

Dans la même veine, j'ai ici un post ouvert concernant le même genre de problèmes mais avec plxMyCoinSlider cette fois.

http://forum.pluxml.org/viewtopic.php?pid=50424#p50424

Les images s'affichent en double ou en mosaïque que j'active la librairie jQuery du plugin ou pas.

La question est de savoir d'où vient ce problème.

Suricat

Bonjour,

Sur quelques articles, j'ai des miniatures que je veux faire pointer vers les articles correspondant. ColorBox générant automatiquement un lien vers l'image d'origine sur chaque miniature, le lien vers un article n'est alors plus actif.

J'ai donc modifié le fichier colorBox.js pour ne pas générer de lien automatiquement sur les miniatures ayant comme parent un lien ne pointant pas vers une image.

Je partage le code pour ceux que ça pourrait intéresser...

Voici le code avant :

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

Voici la code après :

[== JavaScript ==]
    options.title = function() { var t = $(this).attr('title'); return (t) ? t : $(this).attr('alt'); };
    options.rel = 'lightbox-art*';
    options.href = function() { return $(this).attr('src').replace(/\.tb(\.\w+)$/i,'$1'); };
    $("article img[src$='\\.tb\\.jpg'], article img[src$='\\.tb\\.png'], article img[src$='\\.tb\\.gif'], article img[src$='\\.tb\\.jpeg']").filter(
    function(){	  
        var ParentA = $(this).parent("a");	  
        if(ParentA){ 	  	
            var _href=ParentA.attr("href"); 	    
            if(_href.indexOf(".jpg")==-1 && _href.indexOf(".png")==-1 && _href.indexOf(".gif")==-1 && _href.indexOf(".jpeg")==-1){ return false; }
        }	  
        return (true);	
    }).colorbox(options);