Besoin d'aide pour améliorer un code zoom sur image

**ROMAIN4** · 29/11/2016, 21h07

Bonjour,
Je cherche à améliorer un code qui permet de zoomer sur une image dans une galerie avec un lien vers le site correspondant. ça marche mais mon problème, c'est que je souhaite qu'au zoom les autres images restent fixent en arrière plan. Je bute là-dessus.
Voici le code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">
 
<!-- 
.zoom {
height:400px;
margin:auto;
}
.zoom p {
text-align:center;
}
.zoom img {
width:232px;
height:275px;
}
.zoom img:hover {
width:250px;
height:296px;
}
 
-->
</style>
</head>
 
<body>
<div class="zoom">
<center>
 
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span>
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span>
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span>
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span><br>
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span>
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span>
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span>
<span Title="PIERRES-INFO"><a href="http://www.pierres-info.fr/accueil/index.html"><img src="antoine_fargette.jpg"></a></span>
</center>
</div>
</body>
</html

Ce que ça donne actuellement en image (décalages) : Nom : Capturer.JPG
Affichages : 168
Taille : 73,1 Ko

Merci pour votre aide
ROMAIN

**ROMAIN4** · 30/11/2016, 14h11

Bon,
Mon affaire n'a pas l'air de passionner les foules...
Alors j'ai cherché comme un grand et j'ai modifié mon code; seul problème qui paraît récurent mais dont je n'ai pas encore trouvé la solution malgré mes recherches et une bonne prise de tête, c'est comment centrer mes images dans le bloc...
Voici le code (j'ai laissé volontairement le cadre du bloc visible pour voir le problème de centrage) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">
.conteneur_images
{
background:;
border: 1px ridge violet;
height: 176px;
margin-left: 5%;
margin-right: 5%;
width: auto;
}
 
.image
{ 
float: left;
width: 140px;
height: 166px;
margin: 5px;
}
 
img#zoom
{
height: 100%;
width: 100%;
}
 
img#zoom:hover
{
background:#fef9e7;
height:150%;
left:-10px;
padding: 2px;
position: relative;
top: -60px;
width: 200%;
box-shadow:
5px 5px 7px #f9e79f;
}</style>
</head>
 
<body>
<div class="conteneur_images">
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div></div>
<div class="conteneur_images">
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
<div class="image" id="image"><a href="http://www.pierres-info.fr/accueil/index.html"><img id="zoom" src="antoine_fargette.jpg" title="ANTOINE FARGETTE" alt="Mon Chat photo 2"></a></div>
</div><br>
</div>		
</body>
</html>

Et en image : Nom : Capturer.JPG
Affichages : 132
Taille : 62,4 Ko

Merci pour votre aide, si ti plait missieu
ROMAIN

Invité · 30/11/2016, 16h27

Bonjour,

un effet sympa :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.conteneur_images {
  margin: 5px;
  width: auto;
}
 
.image {
  float: left;
  width: 140px;
  height: 140px;
  margin: 5px;
  overflow: hidden;
}
.image:hover {
  overflow: visible;
}
img#zoom {
  min-width: 100%;
  min-height: 100%;
  max-width: 200px;
  max-height: 200px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
img#zoom:hover {
  box-shadow: 5px 5px 7px #333;
  -webkit-transform: scale(1.5) rotate(-3deg);
  -moz-transform: scale(1.5) rotate(-3deg);
  -o-transform: scale(1.5) rotate(-3deg);
  transform: scale(1.5) rotate(-3deg);
}

**ROMAIN4** · 30/11/2016, 16h57

Merci
Effectivement très chouette, j'achète...
Mais mes images ne sont toujours pas centrées dans le container, barnacle !...

Invité · 30/11/2016, 17h25

Comme ça alors : http://codepen.io/jreaux62/pen/ObOZKM

J'ai aussi modifié le HTML (car un id est TOUJOURS unique, et ici, on n'en a pas besoin !) :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="conteneur_images">
  <figure>
    <a href="#"><img src="http://www.gettyimages.fr/gi-resources/images/Embed/new/embed2.jpg" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://french.xinhuanet.com/titlepic/135151130_1456974222920_title1n.jpg" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.gettyimages.com/gi-resources/images/Olympics/Rio2016OlympicHub/olympichair_GettyImages-591810506.jpg" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1475568296" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="https://twistedsifter.files.wordpress.com/2016/03/popular-images-with-a-twist-by-tony-futura-13.jpg" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="https://cdn.pixabay.com/photo/2016/07/30/13/16/dandelion-1557110_960_720.jpg" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1475568296" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.forumdesimages.fr/media/cache/fdi_big_overview/media/fdi/35786-prog-stuart-little-_-christophel-1.jpg" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1475568296" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1475568296" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1475568296" alt=""></a>
  </figure>
  <figure>
    <a href="#"><img src="http://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1475568296" alt=""></a>
  </figure>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.conteneur_images {
  text-align: center;
  max-width: 960px;
  margin: 5px auto;
}
 
.conteneur_images figure {
  text-align: center;
  display: inline-block;
  width: 140px;
  height: 140px;
  margin: 5px;
  overflow: hidden;
  position: relative;
}
 
.conteneur_images figure:hover {
  overflow: visible;
}
 
.conteneur_images figure img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  max-width: 200px;
  max-height: 200px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
.conteneur_images figure img:hover {
  z-index: 2;
  box-shadow: 5px 5px 7px #333;
  -webkit-transform: scale(1.5) rotate(-3deg);
  -moz-transform: scale(1.5) rotate(-3deg);
  -o-transform: scale(1.5) rotate(-3deg);
  transform: scale(1.5) rotate(-3deg);
}

**ROMAIN4** · 30/11/2016, 17h52

C'est parfait centré et magnifique !...
Un grand merci, je vais pouvoir ranger l'aspirine dans l'armoire...

**ROMAIN4** · 01/12/2016, 09h55

Arch !... C'était trop beau, tout fonctionnait à la perfection sous Mozilla, mais en faisant un essai sur IE (9 chez moi) rien ne va plus...
Voilà en image ce que cela donne :
Nom : Capture.JPG
Affichages : 149
Taille : 70,3 Ko

Nom : Capture.JPG
Affichages : 149
Taille : 70,3 Ko

Une solution existe-t-elle ?...
Merci pour vos infos
ROMAIN

Invité · 01/12/2016, 10h36

Oui.

Désinstaller I.E.

(I.E.9.... pfff...)

N.B. Ca fonctionne correctement sur Firefox, Opera, Chrome et Edge.

**ROMAIN4** · 01/12/2016, 10h42

OK mais étant donné que c'est pour afficher sur mon site, ça va être compliqué de demander à tout le monde de désinstaller IE pour Mozilla...
Il n'y a donc pas de solution, même autre ?...

Invité · 01/12/2016, 10h46

Plusieurs solution :

1/ écrire un CSS de substitution spécialement pour IE (ou plusieurs, en fonction des versions, toutes plus ou moins pourries...)

2/ utiliser un script/plugin JavaScript/jQuery :

"galerie images jQuery"

3/ Dire "m...." à ceux qui utilisent encore I.E.

**ROMAIN4** · 01/12/2016, 10h49

Ok Merci je leur dirais...

Besoin d'aide pour améliorer un code zoom sur image

CSS

Discussions similaires

Partager

Partager