Bonjour,

J'utilise une galerie photo type lightbox, c'est à dire des miniatures qui s'agrandissent au 1er plan quand on clique dessus.

Et j'aimerai protéger mes photos du clic droit et du glisser-déposer lors de l'agrandissement,donc j'aimerai mettre un div qui aurait un gif transparent comme background, et qui serai devant la photo.

Voici le code d'origine simplifié:

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
 
                   var $mask           = $('<div id="mask"/>').appendTo('body'),
			$overlay        = $('<div id="overlay"/>').appendTo('body'),
			$overlayContent = $('<div id="overlayContent"/>').appendTo($overlay),
 
function overlayCreate( mode, type, sources, title, description ) {
			$.data($overlay[0], 'mode', mode);
 
			$otitle[0].innerHTML = title;
			$odescription[0].innerHTML = description;
 
			var top = $win.scrollTop() + $win.height()/2;
 
			$mask.css('height', $(document).height()).fadeIn(400, function(){
				$overlayLoader.css( 'top', top ).show();
 
				if( type === 'photo' ) {
					//IE fix to force load image
					if( msie ) {
						$overlay.css({ visibility: 'hidden', display: 'block' });
						$overlayContent.css({ visibility: 'hidden', display: 'block' });
					}
 
					var $image = $('<img src="'+ sources.text() +'" alt="" />').appendTo($overlayContent);
					$image[0].onload = function(){
						resizeImage( $image[0] );
 
						if( msie ) {
							$overlay.css({ visibility: 'visible', display: 'none' });
							$overlayContent.css({ visibility: 'visible', display: 'none' });
						}
 
						overlayShow( $image[0].width, $image[0].height, top);
					};
				}
                        });
 
		}
 
function overlayShow( ow, oh, top ) {
			$overlay.css({ display: 'block', visibility: 'hidden', width: ow });
			$overlayContent.show();
 
			var captionHeight = $overlay.find('div.details').height() + 20,
				marginTop = -(oh + captionHeight + 40)/2,
				marginLeft = -(ow + 40)/2,
				mode = $.data($overlay[0], 'mode'),
				itemIndex = mode === 'coverflow' ? index : thumbIndex;
 
			$overlayContent.hide();
}

Et voici ce que j'ai essayé :

dans la déclaration des variables, j'ai ajouté ça
Code : Sélectionner tout - Visualiser dans une fenêtre à part
$protection     = $('<div id="protection"/>').appendTo($overlayContent),
dans la fonction overlayShow j'ai ajouté ça :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
$protection.show();
et en CSS j'ai mis :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
#protection {background-image: url(images/protection.gif) repeat; z-index:9999;}
mais ça ne fonctionne pas, peut-on m'aider svp ?

merci