Discussion :

[dhillig]

Bonsoir à tous,
Est-il possible de mettre en place un effet zoom sur une image responsive uniquement au format tablette et inférieur ?
Mon code est le suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
          <div class="grid__item" data-size="1280x1212">
            <figure> <a href="../img/original/cavazanno.jpg" class="img-wrap"><img src="../img/thumbs/cavazanno_thumb.jpg" alt="Giorgio Cavazzano" /></a>
              <figcaption><strong>Giorgio Cavazzano</strong></figcaption>
            </figure>
            <div class="description description--grid">
              <h1><strong>Giorgio Cavazzano</strong></h1>
              <p>Histoire de Picsou</p>

Chaque image a une taille différente (data-size). Le

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="../img/original/cavazanno.jpg" class="img-wrap">

est impeccable sur format ordi, mais sur tablette, l'image faisant 50% de large, difficile de la voir. N'en parlons pas sur smartphone
Je ne tombe sur les forums que sur des solutions de zoom sur image à un format bien déterminé. Rajouter un effet lighbox (ou un effet loupe) serait idéal à partir d'un certain format, mais cela me semble impossible à faire dans mon cas
Est-ce possible ?
Merci pour votre aide et bonne soirée,
dh

[Invité]

Bonjour,

oui, c'est possible, et la réponse est dans ta question :

... Rajouter un effet lighbox (ou un effet loupe) ...

[dhillig]

Bonjour jreaux62,
Tu pencherais plus pour l'effet zoom (comme http://alijafarian.com/demos/css-image-zooming-grid/?
Où me mets-je encore le doigt d'ans l'œil ?
J'ai tenté diverses lighbox... aucun résultat
Merci pour ton aide et bonne journée,
dh

[Invité]

Bonjour,

toi seul sais quel effet tu veux obtenir au final. A toi d'en prendre la décision.

S'il s'agit d'afficher une grande image au clic sur une petite, n'importe quelle lightbox fera l'affaire !
Par exemple :

• Colorbox
• Magnific Popup
• ...

N.B. Et "Ca ne marche pas" n'a jamais aidé à résoudre quoi que ce soit.

[dhillig]

Cela doit donc venir de mon code ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
            <figure> <a href="../img/original/cavazanno.jpg" class="img-wrap image-popup-vertical-fit" href="../img/original/cavazanno.jpg"><img src="../img/thumbs/cavazanno_thumb.jpg" alt="Giorgio Cavazzano" /></a>
              <figcaption><strong>Giorgio Cavazzano</strong></figcaption>
            </figure>
            <div class="description description--grid">
              <h1><strong>Giorgio Cavazzano</strong></h1>
              <p>Histoire de Picsou</p>

A l'origine, j'ai déjà un effet "lightbox", mais le site étant responsive, sur smartphone la photo bg est minuscule (50% de largeur), j'aimerais donc rajouter un 3e href à la photo bg pour qu'elle s'affiche à width: 100% sur tablette et smartphone.
Est-ce possible ?
Merci pour ton aide jreaux62,
dh

[Invité]

Montre-nous des copies d'écran,
car là, je ne vois vraiment pas ce qui pose problème...