Presentation de photos panoramiques

[alp352]

Bonjour,
Je vais créer un site de photos, panoramiques principalement, je suis en train de tester quelques pages sur un site provisoire avec le design Prague. Je m'aperçois que les galeries photos sont faites pour des formats classiques, voire carrés. Je souhaite que les photos soient affichées en grand format, qu'on puisse les faire défiler avec la souris, et pouvoir encore agrandir celles qui retiennent l'attention. Les panoramas s'inscrivant dans un format carré, le résultat est qu'il y a un très gros espace entre chaque photo.
Pour contourner ce problème je suis obliger de mettre les photos les unes au dessous des autres image par image, et non en galerie. C'est long, et surtout cela ne permet pas de les visualiser en les faisant défiler. Il faut ouvrir et fermer chaque photo.
Quelqu'un connait-il un autre moyen de résoudre cette difficulté?
Merci de votre aide, et si ma question n'est pas claire, un p'tit tour sur mes pages test...

[FredVig]

Bonjour
> Afficher en grand:
Jimdo importe les images à leur résolution maximum, mais affiche une version légère, adaptée à la largeur du contenant. Il était possible d'accéder au lien de cette haute résolution en changeant "standar" par "origine" dans leur adresse URL, mais il semble que ce ne soit plus possible…

a priori, je chercherai sur deux pistes : insérer les images ailleurs en ftp, et faire des liens vers elles, afin qu'elles ne soient pas re-dimentionnées.
Ou utiliser un widget lié à un site externe d'hébergement comme picasa, Flickr (voir l'aide de Jimdo à ce sujet). Le service crée le diaporama, vous insérez le diaporama dans votre site jimdo dans un widget html (codage nécessaire…)
Exemple avec Flickr : Insertion d'un diaporama Flickr d'un utilisateur commons sur un site jimdo
Le lien depuis le diaporama est récupéré en bas à droite, dans le module de partage. Celui-ci est collé dans un widget html de jimdo.
Il devient possible d'agrandir en plein écran.

>bouger avec la souris
Le diaporama "bouge" les images au clic, je suppose que vous voudriez faire un "drag and drop" pour faire glisser les images.
C'est faisable avec du javascript. Cela demande pas mal de code, du temps, des connaissances. Et cela risque de ne pas être accessible aux portables. Certains widget des sites d'hébergement le permettent.

Distance entre les diaporamas
Effectivement… Curieux que cela ne se paramètre pas avec le module jimdo !
Vous pouvez modifier cela avec "modifier le head" (lire les tutos please…).
La class à modifier dans votre cas est .thumb_pro3
ça donne :

Code:

.thumb_pro3 {height:400px!important;}

en modifiant la hauteur selon votre design

[alp352]

Merci de cette réponse détaillée
Mais insérer un diaporama externe ne correspond pas à ce que je souhaite. Je tiens à afficher directement les photos en pleine largeur de page, comme ici http://alp352.jimdo.com/photos/photos-empilees/
On les visionne en se servant de la molette de la souris, et on garde la possibilité d'agrandir encore celles qui nous interessent.
En fait il faudrait que ce soit comme à cette page http://alp352.jimdo.com/photos/photos-en-galeries/
mais sans ces énormes intervalles entre les photos

J'ai essayé d'insérer le code .thumb_pro3 dans le head, mais ça ne marche pas, il n'est pas sauvegardé

[FilmsdeLover]

Et pourquoi vous n'utilisez pas directement juste des modules "Image" tout simples, disposés à la suite sur votre page ? Il permet, si je ne me trompe pas, d'agrandir les grandes photos aussi au clic et l'effet rendrait bien je pense.

[alp352]

Oui, c'est ce que j'ai fait ici http://alp352.jimdo.com/photos/photos-empilees/
Ce n'est pas mal, mais on m'a fait remarquer que cela pouvait être ennuyeux d'être obligé de refermer chaque photo avant de cliquer sur la suivante. Il est vrai que si on les voit déjà en grande largeur, on n'éprouvera pas forcément le besoin de les agrandir toutes
Qu'en pensez-vous?

[FilmsdeLover]

Je trouve ça bien mieux. Votre site est déjà très large et c'est vraiment le format qui rend le mieux justice à vos photos.

[FredVig]

Code:

<style type="text/css">
    /*<![CDATA[*/
    .thumb_pro3 {height:400px!important;}
  /*]]>*/
    </style>

[alp352]

Merci pour ce code, j'ai bien essayé, mais ça donne des résultats bizarres.
J'ai fait varier la hauteur mais je ne suis pas arrivé à un bon résultat.
Il y a toujours un très grand intervalle avant la première image, et si j'essaie de resserrer un peu plus, la dernière photo est tronquée.

Par contre, dans la présentation image par image, peut-on augmenter la taille de la photo on click (1200 px par exemple)
Merci, bonne soirée

[FredVig]

Je n'avais pas vu… il manquait la class d'un autre contenant.
essayez comme ça : (avec inherit c'est encore plus simple)
<style type="text/css">
   /*<![CDATA[*/
.thumb_pro3, .innerthumbnail {height:inherit!important;}
 /*]]>*/
   </style>
en image individuelle, il suffit de sélectionner l’icône "agrandir l'image par clic" , la neuvième icône dans le module image.

[alp352]

Avec ça, ça marche, c'est super, merci beaucoup FredVig
Et si je veux toutefois les espacer un petit peu, 20 px par exemple, y'aurait une solution complémentaire?
Pour ma question sur l'agrandissement On Click d'une image individuelle, je voulais dire "agrandir un peu plus que ne le fait Jimdo en sélectionnant le bouton correspondant, mais je viens de m'apercevoir qu'elles sont agrandies à la taille où on les a téléchargées, donc j'ai la réponse
Encore merci

[FredVig]

Vous avez raison pour la taille de téléchargement.
pour l'espacement, c'est très simple : vous rajoutez après la dernière accolade de code une valeur de padding :
.thumb_pro3 {padding-bottom:20px!important;}

[alp352]

Cette fois c'est parfait, merci encore! Ca me donne envie de potasser un peu le css

[Contenu sponsorisé]