Enregistrer une image avec le clic droit avec jquery lightbox [Résolu]

Le sujet a été évoqué http://forum.alsacreations.com/topic-4-31869-1-2-liens-qui-masquent-une-image-et-empechent-le-click-droit-dessus.html#copy , mais avec Lytebox et ce ne sont pas les mêmes CSS, par ailleurs je ne suis pas un spécialiste
J'ai un diaporama conçu avec des popups jquery lightbox, Je souhaiterai que les visiteurs puissent s'ils le souhaitent enregistrer l'image mais le menu contexuel n'offre pas cette possibilité. L'image est recouverte par les liens "Prev" et "Next", j'ai bien essayé de réduire leur couverture à 1/3 chacun, cela fonctionne seulement sur IE, pas sur Mozilla. Quelqu'un aurait-il une solution ? Merci.
Modifié par Guy44 (27 Jan 2009 - 11:15)

Peut être est-ce une question qui ne peut avoir de solution... ?
à défaut je livre ci-après le code CSS utilisé :

#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 33%;
	height: 100%;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;

Modifié par Florent V. (25 Jan 2009 - 13:51)

Bonjour également,

Si j'en crois les démos du plugin Lightbox pour jQuery, les boutons de navigation précédent/suivant sont dans un bloc (div#lightbox-nav) qui est positionné en absolu et affiché par-dessus l'image.

Aussi, dans Firefox au moins, même si tu réduis la largeur de chaque bouton de navigation il reste ce DIV transparent qui fait écran entre l'image et le clic de l'utilisateur.

Une solution serait de changer de supprimer le height:100% pour ce bloc, mais ça peut poser problème pour le positionnement des boutons de navigation, et pour leur dimensionnement, surtout que ce dernier est calculé dynamiquement par le script JS.

À tenter, mais il se peut que modifier le CSS ne suffise pas, vu que le code JavaScript rentre aussi en jeu et modifie les styles de certains éléments.

Par ailleurs et pour finir ce message: il est demandé que chaque bloc de code cité sur le forum soit encadré par les balises [ code] et [ /code] (sans espace après le crochet ouvrant). Pourrais-tu corriger ton message ci-dessus (via le bouton «éditer») pour suivre cette règle de mise en forme? Merci d'avance.

Bonjour et merci pour ces conseils
Tout d'abord désolé de ne pas avoir mis les balises code et fait une fausse manip...
Voilà ça fonctionne sur IE et Fire Fox.
Je vous livre ci-dessous, après différents essais, le code CSS en ligne.
Remarques : height de la balise lightbox-nav est : 0%, si on ne met rien , il n'y a plus les boutons de navigation. Sur cette même balise, il faut laisser width: 100%, ce pourcentage couvre l'amplitude totale des 2 boutons de navigation, par ex. si on met 50%, le bouton gauche (PREV) reste à gauche et le bouton droit (NEXT) se positionne au milieu.
Balise "lightbox-nav-btnPrev, #lightbox-nav-btnNext" , écrire width : 33%, ce qui rend les liens PRE et NEXT actifs sur 33% à gauche et à 33% à droite de l'image , sur le milieu (33% restant) avec le clic droit, on peut afficher l'image ou l'enregistrer sous.

#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height:0%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 33%;
	height: 0%;
	display: block;
}

Je vous laisse vérifier en attendant d'éventuelles remarques et mettrai le sujet "RESOLU".
encore merci de votre concours