Discussion :

[binco]

Bonjour

Dans ma page j'ai une image

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
.petitportrait{ 
width:58px; 
height:77px;
margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
}
.grandportrait{ 
width:580px; 
height:770px;
margin-left:150px;
}
#cadre_agrandissement {
  background: white;
  border-style: solid;
  border-color: black;
  position: absolute;
  top: 50px;
  left: 500px;
  width: 0px;
  height: 0px;
}
.fermer a{
font-family: "Arial", "Arial Narrow"; font-size: x-large; font-style: normal; font-weight: normal; color: black; text-align: left; margin-left: auto; margin-right: auto ; margin-top: auto;  margin-bottom: auto;
}

Code html :

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

1
2
<img id="imageportrait" src="dessin15petit.jpg" class="petitportrait gravure" title="Nu debout, gravure au scotch" alt="Nu debout, gravure au scotch"/>
<div id="cadre_agrandissement"></div>

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
/*agrandissement des images*/
$(function(){
	$('.petitportrait').css('border','5px white solid');	
	$('.petitportrait').on( "click", function(){
		$(this).css('border','5px black solid');
		$('body').css('background-color','blue').css('opacity','0.4');
		var a = $(this).attr('id');	
		var b = $(this).attr('src');
		var c = $(this).attr('title');
		var d = $(this).attr('alt');
		var nom_img = $(this).attr('src');
		var nom1 = nom_img.charAt(0);
		var nom2 = nom_img.charAt(1);
		var e = b.replace('petit.jpg','grand.jpg');
		$('#cadre_agrandissement').html('<span class="fermer"><a id="lien" href="#">Fermer</a></span> <br> <img id="' +a+ '" src="' +e+ '" class="grandportrait" title="' +c+ '" alt="' +d+ '"/> <br> Intitulé: ' +c+ ' ');
		$('#cadre_agrandissement').animate({ 'height':'970px'}, 500).animate({ 'width': '880px'}, 500)
	});
	$('#cadre_agrandissement').on( "click", "#lien", function(){
		$('.petitportrait').css('border','5px white solid');
		$('#cadre_agrandissement').animate({'height' : '0px', 'width' : '0px'}, 500 );
		$('#cadre_agrandissement').empty();
	});	
});

Quand on clic dessus une div s'ouvre dans laquelle l'image est agrandie
Je veux que quand on clic sur l'image un voile bleu d'opacité 0.4 recouvre ma fenêtre excepté le cadre agrandissement
J'ai essayé

Code :

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

$('body').css('background-color','blue').css('opacity','0.4');

mais toute ma fenetre y comprit la cadre est recouvert par ce voile
Avez vous une astuce?
Cordialement

[SpaceFrog]

il faut un trou au milieu du voile ...

[Bovino]

A priori, il suffit de positionner l'image "par-dessus" le voile, typiquement en jouant avec le z-index. Sans oublier le bouton de fermeture bien sûr.

[binco]

J'ai beau mettre un z-index supérieur pour le cadre agrandissement ... ça ne marche pas

ci dessous le code:
image petit format: dessin15petit.jpg
image grand format: dessin15grand.jpg

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
.petitportrait{ 
width:58px; 
height:77px;
margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
}
 
.grandportrait{ 
width:580px; 
height:770px;
margin-left:150px;
}
 
#cadre_agrandissement {
  background: white;
  border-style: solid;
  border-color: black;
  position: absolute;
  top: 50px;
  left: 500px;
  width: 0px;
  height: 0px;
}
 
.fermer a{
font-family: "Arial", "Arial Narrow"; 
font-size: x-large; font-style: normal; 
font-weight: normal; color: black; 
text-align: left; margin-left: auto; 
margin-right: auto ; margin-top: auto;
margin-bottom: auto;
}

Code html :

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

1
2
3
4
5
6
<div id="voile">
<div id="contenu">
<img id="imageportrait" src="dessin15petit.jpg" class="petitportrait gravure" title="Nu debout, gravure au scotch" alt="Nu debout, gravure au scotch"/>
<div id="cadre_agrandissement"></div>
</div>
</div>

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
/*agrandissement des images*/
$(function(){
	$('.petitportrait').css('border','5px white solid');	
	$('.petitportrait').on( "click", function(){
		$(this).css('border','5px black solid');
		$('#cadre_agrandissement').css('z-index','10');
		$('#voile').css('height','100%').css('width','100%').css('background-color','blue').css('opacity','.5').css('z-index','5');
		$('#contenu').css('z-index','1');
		var a = $(this).attr('id');	
		var b = $(this).attr('src');
		var e = b.replace('petit.jpg','grand.jpg');
		$('#cadre_agrandissement').html('<span class="fermer"><a id="lien" href="#">Fermer</a></span> <br> <img id="' +a+ '" src="' +e+ '" class="grandportrait"  /> ');
		$('#cadre_agrandissement').animate({ 'height':'970px'}, 500).animate({ 'width': '880px'}, 500)
	});
	$('#cadre_agrandissement').on( "click", "#lien", function(){
		$('.petitportrait').css('border','5px white solid');
		$('#cadre_agrandissement').animate({'height' : '0px', 'width' : '0px'}, 500 );
		$('#cadre_agrandissement').empty();
	});	
});

[NoSmoking]

Bonjour,
peut être que la solution apportée dans cette discussion pourrait t'aider
Imbrication d'événements

[danielhagnoul]

Je vous conseille d'oublier vos codes et de repartir à l'assaut de votre problème avec les codes suivants (en modifiant le nom et l'URL des images bien entendus) :

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
.imageportrait{ 
    width: 58px; 
    height: 77px;
    margin: 1px;
}
#cadre_agrandissement {
    display: none;
    position: absolute;
    top: 50px;
    left: 500px;
    width: 0px;
    height: 0px;
    background: white;
    border-style: solid;
    border-color: black;
    z-index: 9999;
}
#cadre_agrandissement > img {
    display: block;
    margin: auto;
}
#voile {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: 9998;
}
#lienFermer {
    display: block;
    font-weight: 700;
    font-size: larger;
    margin: 12px;
}

Code HTML :

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

1
2
3
4
<div id="voile"></div>
<div id="cadre_agrandissement"></div>
<img class="imageportrait" data-src="" src="../images/avatarDVJHpetit.jpg">
<img class="imageportrait" data-src="" src="../images/badgepetit.jpg">

Code JavaScript :

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
$( function(){ // forme abrégée de $(document).ready(function(
 
    var jObjPetitPortrait = $('.imageportrait'),
        jObjCadreAgrandissement = $('#cadre_agrandissement'),
        jObjVoile = $('#voile');
 
    jObjPetitPortrait
        .css( 'border','5px white solid' )
        .on( "click", function(){
            var jObj = $( this );
 
            jObj.css('border','5px black solid');
 
            jObjVoile.show();
 
            jObjCadreAgrandissement
                .show()
                .html('<a id="lienFermer" href="#">Fermer</a> <br/> <img src="' + jObj.attr( 'src' ).replace( 'petit.jpg', 'grand.jpg' ) + '"> ')
                .animate({
                    'height':'970px',
                    'width': '880px'
                }, 500 );
    });
 
    jObjCadreAgrandissement.on( "click", "#lienFermer", function(){
        jObjVoile.hide();
        jObjPetitPortrait.css( 'border','5px white solid' );
        jObjCadreAgrandissement
            .animate({ 'height' : '0px', 'width' : '0px' }, 500 )
            .hide()
            .empty();
    });
});