Limiter agrandissement image
2 participants
Communauté francophone - Jimdo :: Utiliser Jimdo :: Utilisation des éléments Jimdo :: Images / Galeries d'images
Page 1 sur 1
Limiter agrandissement image
Bonjour,
Il me semble ne pas avoir vu ce sujet sur ce forum, voici donc ma question :
Quelqu’un saurait si il est possible de limiter la taille de l’agrandissement d’une image contenue dans une « galerie d’images » lorsque l’on clique dessus.
Concrètement, mes images contenues dans mes galeries d’images font 2000 pixels de largeur et, lorsque je clique dessus, l’agrandissement effectué est trop grand à mon goût. Est-il donc possible de limiter la taille de l’agrandissement SANS changer la taille originale de mes images (2000 pixels).
Merci d’avance pour vos réponses !
M2M
Il me semble ne pas avoir vu ce sujet sur ce forum, voici donc ma question :
Quelqu’un saurait si il est possible de limiter la taille de l’agrandissement d’une image contenue dans une « galerie d’images » lorsque l’on clique dessus.
Concrètement, mes images contenues dans mes galeries d’images font 2000 pixels de largeur et, lorsque je clique dessus, l’agrandissement effectué est trop grand à mon goût. Est-il donc possible de limiter la taille de l’agrandissement SANS changer la taille originale de mes images (2000 pixels).
Merci d’avance pour vos réponses !
M2M
Re: Limiter agrandissement image
Il faut juste changer la taille du fichier d'origine. Le script qui gère les diaporama n'est pas facilement accessible. Si vous modifiez cela avec du code, vous aurez d'autres soucis successifs.
Re: Limiter agrandissement image
Merci pour la réponse!
Mince si cela est complexe...
Et changer la taille du fichier semble évident mais le problème est que je travail sur mac avec un écran Rétina (haute définition): je n'arrive pas à avoir une image nette (sur mon ordi) si mon image d'origine fait moins de 2000 pixels de largeur...et ceci malgré de nombreux tests!
Mince si cela est complexe...
Et changer la taille du fichier semble évident mais le problème est que je travail sur mac avec un écran Rétina (haute définition): je n'arrive pas à avoir une image nette (sur mon ordi) si mon image d'origine fait moins de 2000 pixels de largeur...et ceci malgré de nombreux tests!
Re: Limiter agrandissement image
La responsivité positive, c'est un sujet d'actualité !
La galerie de jimdo, version agrandie, se dimensionne selon la taille de l'écran du visiteur en tenant compte de la résolution d'écran. La grande image importée > permet de s'afficher sur un écran retina comme sur un GSM.
Pour ajouter de la marge autour de l'image, il faudrait contraindre le script du diaporama à rajouter cette marge. Et nous n'avons pas accès au script.
Il serait simple de rajouter de la marge (de la m^me couleur que le fond du diaporama) directement sur chaque fichier importé. Dans ce cas, l'image serait aussi réduite sur un GSM, il faut que cela convienne. De plus, la marge sera toujours un peu visible, car il est impossible de faire correspondre le profil colorimétrique de l'image avec celles des ordinateurs des visiteurs.
Une solution serait de changer les marges avec du CSS, mais on va certainement créer des soucis en chute de dominos. (je travaille sur une prestation similaire depuis une semaine…)
Il existe des diaporamas qui peuvent s'intégrer en widget, et peut-être certains permettent d'ajouter cette marge.
Ce serait sans doute la solution la plus simple.
Mais…
Ce qu'il faut garder à l'esprit, c'est que vous faites un site pour les visiteurs. Les visiteurs le consultent sur des navigateurs très divers, avec des résolutions très diverses. ils "voient" forcément quelque chose de différent que vous. En fait, ils utilisent ce qu'il trouve sur votre site pour le consulter à leur façon.
Il faut penser votre site avec cette dynamique, quitte à renoncer à certains aspects, "qu'est-ce que je veux montrer ?", "à quoi je peux renoncer ?"
La galerie de jimdo, version agrandie, se dimensionne selon la taille de l'écran du visiteur en tenant compte de la résolution d'écran. La grande image importée > permet de s'afficher sur un écran retina comme sur un GSM.
Pour ajouter de la marge autour de l'image, il faudrait contraindre le script du diaporama à rajouter cette marge. Et nous n'avons pas accès au script.
Il serait simple de rajouter de la marge (de la m^me couleur que le fond du diaporama) directement sur chaque fichier importé. Dans ce cas, l'image serait aussi réduite sur un GSM, il faut que cela convienne. De plus, la marge sera toujours un peu visible, car il est impossible de faire correspondre le profil colorimétrique de l'image avec celles des ordinateurs des visiteurs.
Une solution serait de changer les marges avec du CSS, mais on va certainement créer des soucis en chute de dominos. (je travaille sur une prestation similaire depuis une semaine…)
Il existe des diaporamas qui peuvent s'intégrer en widget, et peut-être certains permettent d'ajouter cette marge.
Ce serait sans doute la solution la plus simple.
Mais…
Ce qu'il faut garder à l'esprit, c'est que vous faites un site pour les visiteurs. Les visiteurs le consultent sur des navigateurs très divers, avec des résolutions très diverses. ils "voient" forcément quelque chose de différent que vous. En fait, ils utilisent ce qu'il trouve sur votre site pour le consulter à leur façon.
Il faut penser votre site avec cette dynamique, quitte à renoncer à certains aspects, "qu'est-ce que je veux montrer ?", "à quoi je peux renoncer ?"
Re: Limiter agrandissement image
Merci pour cette réponse bien détaillée !
Dans l’idée, j’avais fait des essais en ajoutant une marge à mes images et, sachant que j’ai adapté à mes diaporamas un fond blanc, en ajoutant des marges blanches cela résolvait le problème de colorimétrie mais pas celui, vous avez raison, des GSM. De plus, les vignettes deviennent bien sur trop petites, plus assez lisibles...
Bref, mon sujet de méditation du soir sera effectivement : "qu'est-ce que je veux montrer, à quoi je peux renoncer ?"...
Bonne soirée
M2M
Dans l’idée, j’avais fait des essais en ajoutant une marge à mes images et, sachant que j’ai adapté à mes diaporamas un fond blanc, en ajoutant des marges blanches cela résolvait le problème de colorimétrie mais pas celui, vous avez raison, des GSM. De plus, les vignettes deviennent bien sur trop petites, plus assez lisibles...
Bref, mon sujet de méditation du soir sera effectivement : "qu'est-ce que je veux montrer, à quoi je peux renoncer ?"...
Bonne soirée
M2M
Re: Limiter agrandissement image
Je n'avais pas pensé aux vignettes…
Si vous voulez tester mon adaptation par code (malgré mes réticences) :
Cela va rajouter une marge autour des images (agrandies seulement) proportionnelle à la hauteur de la fenêtre navigateur, mais seulement pour des largeurs de fenêtre supérieures à 700px (pas les GSM)
Vous pouvez changer la valeur 5vh dans une mesure de 1 à 20 environ (100vh = hauteur de la fenêtre courante)
Si vous voulez tester mon adaptation par code (malgré mes réticences) :
- Code:
<style>
@media(min-width:700px){.pswp__img{padding:5vh;}}
</style>
Cela va rajouter une marge autour des images (agrandies seulement) proportionnelle à la hauteur de la fenêtre navigateur, mais seulement pour des largeurs de fenêtre supérieures à 700px (pas les GSM)
Vous pouvez changer la valeur 5vh dans une mesure de 1 à 20 environ (100vh = hauteur de la fenêtre courante)
Re: Limiter agrandissement image
Alors j’ai pu tester votre adaptation et il y a un problème :
Cela crée des marges égales de chaque coté et, en sachant que l’image va s’adapter à ce nouvelle espace, elle se déforme car cette espace et l’image ne sont plus homothétiques (ce qui est logique…). En gros, plus je vais ajouter de la marge, plus mon image en s’adaptant va « s’étirer ».
La petite solution que j’ai essayée ensuite a été d’ajouter des marges en haut et en bas de l’image de manière à créer un format carré, ce qui permet donc de régler le problème de l’homothétie et les vignettes restent lisibles (le fait de ne pas ajouter de marge à droite et à gauche ne réduit pas la taille de la vignette mais ajoute simplement de l’espace en haut et en bas entre chaque « ligne d’images »).
Finalement cela fonctionne mais, c’est la où vous aviez raison, en visualisant le résultat sur un ordinateur portable de taille « classique, » l’image agrandie est visuellement trop petite lorsqu’elle est parfaite sur mon 27 pouces…
Bref "qu'est-ce que je veux montrer, à quoi je peux renoncer ?" est de nouveau d’actualité… !
En tout cas, un grand merci pour votre aide !!
Cela crée des marges égales de chaque coté et, en sachant que l’image va s’adapter à ce nouvelle espace, elle se déforme car cette espace et l’image ne sont plus homothétiques (ce qui est logique…). En gros, plus je vais ajouter de la marge, plus mon image en s’adaptant va « s’étirer ».
La petite solution que j’ai essayée ensuite a été d’ajouter des marges en haut et en bas de l’image de manière à créer un format carré, ce qui permet donc de régler le problème de l’homothétie et les vignettes restent lisibles (le fait de ne pas ajouter de marge à droite et à gauche ne réduit pas la taille de la vignette mais ajoute simplement de l’espace en haut et en bas entre chaque « ligne d’images »).
Finalement cela fonctionne mais, c’est la où vous aviez raison, en visualisant le résultat sur un ordinateur portable de taille « classique, » l’image agrandie est visuellement trop petite lorsqu’elle est parfaite sur mon 27 pouces…
Bref "qu'est-ce que je veux montrer, à quoi je peux renoncer ?" est de nouveau d’actualité… !
En tout cas, un grand merci pour votre aide !!
Re: Limiter agrandissement image
L'image ne doit pas se déformer avec ce code. Le problème doit être ailleurs. (il me semble avoir lu un truc sur les écrans rétina à ce sujet…) > ici retina et flexbox
Mais de toute façon, c'est un problème sans solution parfaite, car le problème est de vouloir contrôler comment nos visiteurs voient notre contenu : cela dépend d'eux, pas de nous.
Mais de toute façon, c'est un problème sans solution parfaite, car le problème est de vouloir contrôler comment nos visiteurs voient notre contenu : cela dépend d'eux, pas de nous.
Sujets similaires
» Image d'aperçu et pop-up d'agrandissement différents
» Tourner une image
» Agrandissement des photos ne fonctionne plus
» IMAGE MAP => Mobile
» Agrandissement de la tètière sur design Bordeaux
» Tourner une image
» Agrandissement des photos ne fonctionne plus
» IMAGE MAP => Mobile
» Agrandissement de la tètière sur design Bordeaux
Communauté francophone - Jimdo :: Utiliser Jimdo :: Utilisation des éléments Jimdo :: Images / Galeries d'images
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum