Discussion :

[arnlig3550]

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

[Bovino]

Problème maintes fois traité : si tu ne veux pas partager tes photos, ne les met pas en ligne. Point barre, parce que pour afficher tes photos, le navigateur est obligé de les télécharger au préalable, donc aucune protection n'est possible (pour t'en convaincre, sur Firefox : "Outils > Informations sur la page" onglet Médias).

Cependant, je suis toujours stupéfait par les messages du type "J'ai pompé un script sur internet, mais ce que je mets moi doit être protégé"...

[arnlig3550]

Qu'est ce que je vous ai fait pour me répondre ainsi ?

Et comment pouvez vous dire que c'est un code que j'ai piqué ? Qu'est ce que vous en savez ?? J'ai acheté ce script ! Et je peux vous en donner la preuve ! C'est d'ailleurs pour ca que je divulgue qu'une petite partie du code (par rapport à l'auteur).Alors au lieu d'affirmer une telle chose, vous auriez mieux fait de me poser la question avant.

Concernant ce que je veux faire, je sais très bien que l'on peut toujours avoir accès à une photos, pas besoin de me l'expliquer, mais tout le monde ne connait pas toutes les solutions ! Si je peux éviter que certain amateurs volent mes photos, ca sera toujours ca !

Je tiens à dire aussi que c'est pour un site professionnel, donc faire de la pub sans photos ca ne fonctionne pas, et une entreprise ayant les droits sur ses données essaye de les protéger un maximum, et beaucoup de site professionnel applique cette méthode donc ne dites pas que ca ne sert a rien !

Je crois que vous êtes sur ce forum pour nous aider a coder et pas a nous contredire dans nos choix, veuillez les respecter ! Si pour vous c'est inutile, ne répondez pas et laissez la place a quelqu'un d'autres !

Merci

[Bovino]

ajouter albums galerie jquery
components-thumbScroller


Et concernant le côté "professionnel", alors il faut s'inspirer de tous les sites professionnels sérieux qui ont abandonné depuis longtemps l'idée de "protéger" leurs photos et qui préfèrent utiliser des watermarks.
Et encore une fois, vouloir interdire de télécharger des images qui par définition ont déjà été téléchargées, ça fait pas très sérieux...

[SpaceFrog]

Il 'y a aucune agression dans la réponse de Bovino.
C'est juste un fait, site professionnel ou pas, script acheté ou repiqué, peu importe les seules façons de protéger les images sont:

- ne pas les mettre en ligne
- mettre un filigrane de copyright dans l'image

Comme le dit Bovino si l'image s'affiche elle est récupérable, soit dans le cache soit dans l'onglet média de firefox et si tu arrives à mettre un script php de controle de diffusion de l'image, l'utilisateur pourra toujours faire une capture d'écran !

Dincn ne prends pas la mouche et accepte les conseils avisés et l'aide que t'apporte Bovino.

[arnlig3550]

Bonjour,

Il 'y a aucune agression dans la réponse de Bovino.

Désolé mais quand on entend les termes "point barre" et "je suis stupéfait", on ne dit jamais ça "normalement". Et à chaque fois que Bovino me répond, c'est pour m'envoyer ballader, et ça j'accepte pas ! C'est un forum d'entraide à ce que je sache ...

Pour votre réponse de ne pas mettre de photos en ligne, je trouve cette réponse complètement absurde ! un clown ferai la même réponse ...

Vous dites de mettre un watermarks, ok je suis d'accord, mais qui m'empêche de mettre une petite protection en plus ? Personne.

Et encore une fois, vouloir interdire de télécharger des images qui par définition ont déjà été téléchargées, ça fait pas très sérieux...

Et une fois de plus, qu'est ce que vous en savez ? c'est des photos prises par moi-même, alors arretez avec vos affirmations fausses !

Et une dernière chose entre parenthèse qui s'adresse à vous 2.
Est-ce que vous connaissez la politesse ? Le minimum, le mot "Bonjour" ça vous dit quelque chose ? J'en ai pas l'impression ... Pour un responsable et un modérateur, moi je vous dis bravo ! C'est à vous de montrer l'exemple, j'ai moi même été modérateur d'un forum, donc je sais de quoi je parle .

[Bovino]

arretez avec vos affirmations fausses !

Encore faut-il comprendre ce qui est dit.
Tout ce que je t'explique, c'est que si les images sont affichées dans le navigateur, c'est qu'il les a déjà téléchargées, donc je confirme : vouloir interdire de télécharger des images que le navigateur a déjà téléchargé, ça fait pas très sérieux.

[Golgotha]

Bonjour,

la protection par watermarks doit être fait coté serveur, sinon ça ne servira à rien.

En fait, part du fait que si la photo arrive coté client, sans watermarks, aucune protection n'est valable. On arrivera d'une façon ou d'une autre à récupérer la photo.

[arnlig3550]

vouloir interdire de télécharger des images que le navigateur a déjà téléchargé, ça fait pas très sérieux.

Exprimé comme cela, ça n'a pas le même sens c'est sûr, c'était à vous de bien vous exprimer...
Mais du coup je ne vois pas le rapport avec le sérieux et le non sérieux. Le navigateur télécharge la photo, c'est normal, il en a besoin pour l'afficher, mais je parle pour un utilisateur, il n'a aucun droit de télécharger lui même la photo ! Mais moi j'ai le droit de mettre une protection (même s'il reste des failles).

[arnlig3550]

Bonjour,

la protection par watermarks doit être fait coté serveur, sinon ça ne servira à rien.

En fait, part du fait que si la photo arrive coté client, sans watermarks, aucune protection n'est valable. On arrivera d'une façon ou d'une autre à récupérer la photo.

Bonjour,

Les watermarks, je les ajoute directement sur la photo avec un éditeur photo, c'est encore mieux

[fredoche]

Exprimé comme cela, ça n'a pas le même sens c'est sûr, c'était à vous de bien vous exprimer...
Mais du coup je ne vois pas le rapport avec le sérieux et le non sérieux. Le navigateur télécharge la photo, c'est normal, il en a besoin pour l'afficher, mais je parle pour un utilisateur, il n'a aucun droit de télécharger lui même la photo ! Mais moi j'ai le droit de mettre une protection (même s'il reste des failles).

Y'a t'il plus sourd que celui qui ne veut rien entendre ?

Cet utilisateur qui n'a aucun droit de le faire vient pourtant de le faire avec son navigateur. Et si tu crois à certaines distinctions entre utilisateur et navigateur, elles n'existent pas, le navigateur est un outil au service et sous le contrôle de l'utilisateur.

Ca soulève de sacrés problèmes pour la VOD par exemple, et en fin de compte toute protection est relativement illusoire, car rien n'empêche au final la capture des octets en sortie de buffer vidéo.

[danielhagnoul]

Bonsoir

Tout ce qui est affiché par un navigateur est copiable, c'est un fait !

Est-il possible de poser un voile sur l'image ? Oui !

Est-ce utile comme "protection" vis-à-vis du clic droit de l'utilisateur lambda ? À vous de voir.

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Daniel Hagnoul">
		<title>Forum jQuery</title>
		<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
		<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
		<style>
			.hyphens { -moz-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }
			article { display:table-cell; text-align:justify; border:0.1rem dotted grey; }
			.table1 { border-collapse:separate; border-spacing:3rem; }
			.ligne { display:table-row; }
 
			.table1 .ligne { height:25rem; }
			.table1 article { width:40rem; vertical-align:top; }
 
			/* TEST */
		</style>
	</head>
	<body>
		<h1>Forum jQuery</h1>
		<h2>Titre 2</h2>
		<section class="conteneur">				
			<section class="table1">
				<section class="ligne">
					<article>
 
						<div id="protection">
							<img src="http://danielhagnoul.developpez.com/images/imageTest.png">
						</div>
 
						<img src="http://danielhagnoul.developpez.com/images/imageTest.png">
 
					</article>
					<article>
 
						<img src="http://danielhagnoul.developpez.com/images/imageTest.png">
 
						<img src="http://danielhagnoul.developpez.com/images/imageTest.png">
 
					</article>
				</section>
			</section>
		</section>
		<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
			<time datetime="2012-12-20T22:56:31.806+01:00" pubdate>2012-12-20T22:56:31.806+01:00</time>
			<span itemprop="name">Daniel Hagnoul</span>
			<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
			<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
			<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
			<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
		</footer>
		<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
		<script src="http://code.jquery.com/jquery-1.9.0b1.js"></script>
		<!--<script src="http://code.jquery.com/jquery-migrate-1.0.0b1.js"></script>-->
		<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
		<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
		<script>
			"use strict";
 
			$(function(){
 
				/*
				 * Pose un voile quasi transparent sur une division qui
				 * recouvre l'image.
				 * 
				 * Attention aux dimensions de la division, tout ce qui est en 
				 * dessous ne reçoit plus les mouseevent.
				 */
				var jObj = $( "#protection" );
 
                $( "<div/>", {
                    "css" : {
                    	"position" : "absolute",
	            		"left" : jObj.offset().left,
	            		"top" : jObj.offset().top,
	            		"width" : jObj.outerWidth(),
	            		"height" : jObj.outerHeight(),
	            		"opacity" : "0.1", // pas en dessous de 0.1, mettre 1 pour test
	            		"background" : "#BBBBBB",
	            		"z-index" : 9999,
                        "filter" : "alpha(opacity=10)" // IE < 9, 10 == 0.1
                    }
                }).appendTo( jObj );
 
 
			});
 
			$( window ).load( function(){
 
			});
		</script>
	</body>
</html>

[Bovino]

Bon, je vais reformuler mon point de vue de façon plus "diplomatique"...

Tout d'abord, arnlig3550, je n'ai rien contre toi
Dans une discussion précédente, tu te disais "débutant" et j'essaye juste (peut-être, mais c'est mon habitude, de façon un peu brusque) de te donner des conseils pour t'éviter de perdre ton temps.

Aujourd'hui, pour plus de 95 % des internautes (j'avoue, c'est une estimation...) récupérer une image quelle que soit la protection est un jeu d'enfant et prend moins de dix secondes (ex : Menu > Outils > Informations sur la page). Cela ne demande aucune compétence particulière.
Donc vouloir empêcher certaines actions empêchera donc les moins de 5 % les plus incapables (et ce n'est pas un jugement, c'est juste reconnaitre qu'on peut ne pas avoir d'affinité avec un ordinateur) de récupérer tes photos, cela en considérant que ces personnes n'aient personne dans leur entourage à qui demander comment faire. Bref, c'est juste une gageure ! Vouloir mettre en place ce genre de chose ne sera donc globalement qu'une perte de temps. Or en milieu pro, perdre du temps pour ça, ce n'est pas sérieux (d'où mon commentaire à ce sujet).

Pour autant, vouloir protéger un oeuvre est tout ce qu'il y a de plus normal et justifié.
Reste à savoir comment le faire.
L'une des solutions qui a été proposée (et à commencer par moi...) est l'ajout d'une watermark. Bien sûr, ce n'est pas infaillible non plus car un graphiste peut virer une watermark en moins de cinq minutes (en l’occurrence, c'est une fille qui m'a fait la dem, mais c'est impressionnant !) seulement là, il s'agit d'un travail de spécialiste qui n'est pas à la portée de tout un chacun ni des relations de tout un chacun.
En complément, il faut mettre en ligne des versions dégradées de la photo : la passer en 72 dpi maximum avec un fort taux de compression et des dimensions réduites (maxi 800x600 selon moi voire 640x480) ce qui fait que même sans watermark, la photo sera difficilement exploitable.

Enfin, ayant un peu travaillé dans le monde de l'édition et de la photo, pour un professionnel, se faire "pomper" un travail fait partie du métier. Un de mes éditeurs m'expliquant même qu'avoir mes vidéos sur les réseaux P2P était une bonne chose, il ne faut pas en avoir peur.

[arnlig3550]

Bonjour,

Une réponse comme ça Bovino, je l'accepte sans problème !
Il y a une énorme différence entre votre première réponse et celle-ci sur la façon dont vous dîtes les choses, vous ne trouvez pas ?

Cela dit, le site que je fais n'est pas pour moi personnellement,je m'en occupe mais c'est tout. Ce n'est pas moi le gérant de l'entreprise, et j'ai le temps de faire ce site, c'est pour ça que je veux en faire un maximum pour cette entreprise, peu importe le temps que ça prendra. Puis je pense que mettre un background-image par dessus un overlay ce n'est pas ça qui prendra le plus de temps à faire (à condition que vous m'aidez).

Même si ça évite seulement 5% de vol, ça sera toujours ça en moins ^^ Donc vous aller peut-être me trouver têtu, mais je tiens quand même à établir ce voile sur l'overlay. Ce n'est pas ça qui fera ralentir le site.

Si vous m'aidez, j'aurai au moins eu ce que je voulais, et c'est ce qui compte ! Et comme le dit danielhagnoul, c'est moi qui verra si c'était nécessaire ou pas. Puis ça va me permettre d'apprendre un peu plus le jquery en codant ça, c'est en faisant qu'on apprend !

Sinon merci pour cet exemple danielhagnoul, mais je ne vois pas comment l'intégrer à mon code d'origine (1er message), je suis mal parti dans ce que j'ai essayé de faire ?