Annonce

  •  » Trucs et astuces
  •  » Adaptation automatique des photos à la taille de l'explorateur

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

cljosse
Équipe Piwigo
2006-11-12
1167

Adaptation automatique des photos à la taille de l'explorateur

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)

Hors ligne

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

Gotcha
Equipe Piwigo
Pierrelatte (26)
2007-03-14
13331

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

Excellente nouvelle !

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

Merci.

:-)


Ayez comme premier réflexe de consulter le wiki.
Ensuite, veuillez effectuer une recherche sur le forum avant de poser votre question.

LE FAIRE EST LE REVELATEUR DE L'ETRE

Hors ligne

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

Zaphod
Équipe Piwigo
Toulouse
2006-11-13
2422

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

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

Hors ligne

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

Zaphod
Équipe Piwigo
Toulouse
2006-11-13
2422

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

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.

Hors ligne

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

Gotcha
Equipe Piwigo
Pierrelatte (26)
2007-03-14
13331

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

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


Ayez comme premier réflexe de consulter le wiki.
Ensuite, veuillez effectuer une recherche sur le forum avant de poser votre question.

LE FAIRE EST LE REVELATEUR DE L'ETRE

Hors ligne

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

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
14884

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

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


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

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

LucMorizur
Membre
Vienne (Isère, 38)
2009-03-01
1969

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

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

Merci cljosse pour cette proposition :-)

Hors ligne

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

cljosse
Équipe Piwigo
2006-11-12
1167

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

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+

Hors ligne

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

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
14884

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

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


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

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

Patricia
Membre
Lens (62) Pas de Calais
2004-04-27
774

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

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.


Bisous de PAT

@ + ou -

Hors ligne

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

cljosse
Équipe Piwigo
2006-11-12
1167

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

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+

Hors ligne

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

Zaphod
Équipe Piwigo
Toulouse
2006-11-13
2422

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

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)

Hors ligne

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

Patricia
Membre
Lens (62) Pas de Calais
2004-04-27
774

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

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.


Bisous de PAT

@ + ou -

Hors ligne

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

Zaphod
Équipe Piwigo
Toulouse
2006-11-13
2422

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

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

Hors ligne

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

Zaphod
Équipe Piwigo
Toulouse
2006-11-13
2422

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

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)

Hors ligne

  •  » Trucs et astuces
  •  » Adaptation automatique des photos à la taille de l'explorateur

Pied de page des forums

Propulsé par FluxBB

github twitter facebook newsletter Faire un don Piwigo.org © 2002-2020 · Contact