Piwigo.org

cljosse · 2010-09-09 15:10:47

Bonjour.

Je propose un petit script pour adapter automatiquement les photos à la taille de l'écran.

Procédure:
Creer un script Affiche_script.js :

jQuery(document).ready(
function (jQuery) {
//===================================================================
jQuery(window).resize(function (event, ui) {
if (typeof (event) == 'undefined') return;
var Image_height;
var rapport;
var Img_exist;

var sel0 = jQuery("#theImg").position();
if (!sel0) sel0 = jQuery("#theImage").position();
if (!sel0) return;
ntop = sel0.top
winheight = jQuery(window).height();
Image_height = (winheight - ntop) - 20;

W0 = jQuery("#theImg").width(); ;
if (W0) {
Img_exist = true;
H0 = jQuery("#theImg").height(); ;

} else {
Img_exist = false;
H0 = jQuery("#theImage").children('img').height();
W0 = jQuery("#theImage").children('img').width();
if (!W0) return;
}
rapport = (W0 / H0);

var Imgage_Width = parseInt(Image_height * rapport);

if (!Img_exist) {
// pour les themes dark,sylvia
jQuery("#theImage").children().height(Image_height + "px");
jQuery("#theImage").children().width(Imgage_Width + "px");
} else {
// pour les themes Gally
jQuery("#theImage").height(Image_height + "px");
jQuery("#theImg").width(Imgage_Width + "px");
jQuery("#theImg").height(Image_height + "px");
jQuery("#theImgContainer").height(Image_height + "px");
initializeImageMode('resize');

}

});

//===================================================================
jQuery(window).resize();
jQuery(window).resize();

});

2°) l'enregistrer sous
theme/default/js/Affiche_script.js

3°) dans themes\default\local_head.tpl

{html_head}
{known_script id="jquery" src="themes/default/js/jquery.packed.js"}
{known_script id="Affiche_Script" src="themes/default/js/Affiche_script.js"}
{/html_head}

4°) dans themes\default\themeconf.inc.php

'local_head' => 'local_head.tpl',

5°) dans dans themes\gally-default\local_head.tpl ajouter:

{html_head}
{known_script id="script" src="themes/default/js/Affiche_script.js"}
{/html_head}

6°) dans themes\gally-default\themeconf.inc.php

'local_head' => 'local_head.tpl',

Et voila maintenant les photos s'adaptent automatiquement à la hauteur de la fenêtre de l'explorateur.
Et pour avoir le plein écran utiliser la touche F11.

Dernière modification par cljosse (2010-09-09 15:23:42)

Gotcha · 2010-09-09 16:13:40

Excellente nouvelle !

Pour voir le résultat, direction la galerie de cljosse.

Merci.

:-)

Zaphod · 2010-09-09 18:04:23

Ca semble intéressant.
Je vais tenter le coup sur ma galerie test.

Zaphod · 2010-09-09 18:17:34

Soit j'ai raté un truc, soit ça ne marche pas avec Sylvia, soit j'ai fait des modifs dans mon thème qui rendent le script inefficace.

Gotcha · 2010-09-09 18:56:46

Et avec un thème comme "dark" est-ce que cela fonctionne ?

ddtddt · 2010-09-09 19:00:52

Gotcha a écrit:
Et avec un thème comme "dark" est-ce que cela fonctionne ?

dark s'appuis sur default donc cela doit fonctionner

Par contre cela ne dois pas fonctionner avec les thèmes de flop25

LucMorizur · 2010-09-09 21:09:21

Voilà un thème récurrent...

Merci cljosse pour cette proposition :-)

cljosse · 2010-09-10 10:50:30

Bonjour.

ddtddt a écrit:
Par contre cela ne dois pas fonctionner avec les thèmes de flop25
.

Tu peux préciser quel theme?
J'ai testé pure_sky,flop_mauve, les tests sont OK.

Zaphod a écrit:
Soit j'ai raté un truc, soit ça ne marche pas avec Sylvia, soit j'ai fait des modifs dans mon thème qui rendent le script inefficace.

Je pense que le script précédent ne marche pas avec le theme utilisé par Zaphod, du fait que la photo a été mise dans un tableau...
Je propose un autre script qui remplace le script précédent.

jQuery(document).ready(
function (jQuery) {
//===================================================================
jQuery(window).resize(function (event, ui) {
if (typeof (event) == 'undefined') return;
var Image_height;
var rapport;
var Image = jQuery("#theImage").find("img");
if (Image.length == 0) return;
var TheImg = jQuery(Image).get(0);
var sel0 = jQuery(TheImg).position();
if (!sel0) return;
ntop = sel0.top
winheight = jQuery(window).height();
Image_height = (winheight - ntop) - 20;

W0 = jQuery(TheImg).width();
H0 = parseInt(jQuery(TheImg).height());
if (H0 == 0) return;
rapport = (W0 / H0);

var Imgage_Width = parseInt(Image_height * rapport);
jQuery(TheImg).height(Image_height + "px");
jQuery(TheImg).width(Imgage_Width + "px");

try {
// pour les themes Gally
initializeImageMode('resize');
} catch (e) { }
return;
});

//===================================================================
jQuery(window).resize();

jQuery(window).resize();

});

A+

ddtddt · 2010-09-10 11:15:20

cljosse a écrit:
Bonjour.
ddtddt a écrit:
Par contre cela ne dois pas fonctionner avec les thèmes de flop25
.
Tu peux préciser quel theme?
J'ai testé pure_sky,flop_mauve, les tests sont OK.

Honnêtement je n'ai pas regarder, c'est juste parce que il me semblais que flop25 ne partait pas de default comme thème parent donc que dans ce cas (comme pour simple) cela ne devais pas fonctionner

j'interprète avec le fait que tu définis un fichier local dans chaque thème parent

Patricia · 2010-09-10 15:34:05

Bonjour le Forum

Pourquoi ne pas inclure ce script dans un Plugin ? Les "Bidouilles" dans les fichiers j'aime pas trop ! Surtout quand tous fonctionne bien.

cljosse · 2010-09-10 15:58:01

Bonjour.
C'est effectivement ce que je suis en train de faire.
Je proposais ce script en attendant la réalisation du plugin, et pour avoir des retours d'informations sur la compatibilité entre les différents themes.

A+

Zaphod · 2010-09-11 00:54:42

Je testerai la nouvelle version...
D'un autre côté j'ai du me planter dans l'éxecution car même sur Sylvia base, ou simple-black j'ai essayé et ça n'a pas marché.
(pour info je ne teste pas sur ma vraie galerie mais sur une galerie secondaire vouée aux tests...)

Je ferai ça au calme demain ou après demain en reprenant de zéro...

Merci en tous cas pour la modif proposée.

Dernière modification par Zaphod (2010-09-11 00:55:23)

Patricia · 2010-09-11 11:35:17

Bonjour le Forum et cljosse

Je suis très intéressée par ce futur plugin. Serait il possible dés le départ d'inclure une option ?
Si oui la voici : que ce plugin fonctionne avec un ou des statues !

Je m'explique, j'ai demandé plusieurs fois la possibilité de la gestion de l'affichage en fonction du statue, mais cela est resté sans effet.

Sur mon site les non inscrits voient les images en 128 X 128 (les miniatures).
Les inscrits non confirmés voient les images en 200 X 200 sans accès à la personnalisation.
Les inscrits confirmés voient les images en 200 X 200 avec accès à la personnalisation, mais une grande majorité n’ont pas le ‘reflexe’ de la personnalisation.

Donc avec ce plugin il serait bien que lorsque l’Utilisateur a un statue d’inscrits confirmés qu'il bénéficie d’un affichage automatique jusqu’au moment ou il personnalise son affichage.

Votre avis.

Zaphod · 2010-09-12 13:49:28

Je viens d'essayer le nouveau script, déja, ça marche :
http://www.audreyetjulien.fr/test/

J'ai changé le "-20" du script à "-40" pour permettre d'afficher la légende en-dessous.

Ceci dit quelques défauts :
- si l'écran est plus haut que ce que la photo permet, la photo est agrandie, ce que je ne souhaite pas.
- si j'essaie de redimensionner plusieurs fois la fenêtre, l'image finit par être déformée (ratio H/L non respecté)

Pour être top, il faudrait aussi pouvoir tenir compte de la largeur de la fenêtre.

C'est quand même très prometteur.
C'est rapide et la qualité du redimensionnement est correcte.
Pour moi ce genre de script est quasi indispensable, car beaucoup de gens ont des netbooks/tablettes à la résolution très faible (surtout avec la manie des écrans larges, la hauteur est souvent très faible).

Or il faut aussi pouvoir afficher correctement sur des grands écrans...

Zaphod · 2010-09-12 13:52:48

J'ai ajouté un

if (Image_height >= H0) Image_height=H0;

De manière à ce que l'image ne soit pas agrandie.

Ca a un défaut, c'est que si on redimensionne la fenêtre à la hausse, l'image n'est plus agrandie.
(il faudrait comparer à la taille réelle de l'image, et pas la taille d'affichage.)

Le défaut de ratio est moins visible qu'avant, du coup, mais il est toujours réel.
(je ne comprends pas pourquoi, vu le code).

Dernière modification par Zaphod (2010-09-12 13:55:45)

Piwigo.org

Annonce

#1 2010-09-09 15:10:47

Adaptation automatique des photos à la taille de l'explorateur

#2 2010-09-09 16:13:40

Re: Adaptation automatique des photos à la taille de l'explorateur

#3 2010-09-09 18:04:23

Re: Adaptation automatique des photos à la taille de l'explorateur

#4 2010-09-09 18:17:34

Re: Adaptation automatique des photos à la taille de l'explorateur

#5 2010-09-09 18:56:46

Re: Adaptation automatique des photos à la taille de l'explorateur

#6 2010-09-09 19:00:52

Re: Adaptation automatique des photos à la taille de l'explorateur

Gotcha a écrit:

#7 2010-09-09 21:09:21

Re: Adaptation automatique des photos à la taille de l'explorateur

#8 2010-09-10 10:50:30

Re: Adaptation automatique des photos à la taille de l'explorateur

ddtddt a écrit:

Zaphod a écrit:

#9 2010-09-10 11:15:20

Re: Adaptation automatique des photos à la taille de l'explorateur

cljosse a écrit:

ddtddt a écrit:

#10 2010-09-10 15:34:05

Re: Adaptation automatique des photos à la taille de l'explorateur

#11 2010-09-10 15:58:01

Re: Adaptation automatique des photos à la taille de l'explorateur

#12 2010-09-11 00:54:42

Re: Adaptation automatique des photos à la taille de l'explorateur

#13 2010-09-11 11:35:17

Re: Adaptation automatique des photos à la taille de l'explorateur

#14 2010-09-12 13:49:28

Re: Adaptation automatique des photos à la taille de l'explorateur

#15 2010-09-12 13:52:48

Re: Adaptation automatique des photos à la taille de l'explorateur

Pied de page des forums